'use client';

import { useState } from 'react';
import { Settings, Upload, Image, Globe, Mail, MessageSquare, Phone, MapPin, Link2, Clock, Save, FileText, Camera, Palette, Ruler, Sun, Moon, Monitor, Smartphone, Tablet, Package, Wrench, FileCheck, BadgeDollarSign, CreditCard } from 'lucide-react';

interface CompanySettings {
  name: string;
  shortName: string;
  tagLine: string;
  description: string;
  email: string;
  phone: string;
  website: string;
  address: string;
  city: string;
  country: string;
  tin: string;
  bin: string;
  tradeLicense: string;
  timezone: string;
  currency: string;
  language: string;
  logo: string;
  favicon: string;
  primaryColor: string;
  secondaryColor: string;
  borderRadius: number;
  socialLinks: {
    facebook: string;
    twitter: string;
    instagram: string;
    linkedin: string;
    youtube: string;
  };
  smtp: {
    host: string;
    port: number;
    user: string;
    password: string;
    fromEmail: string;
    fromName: string;
    encryption: 'ssl' | 'tls' | 'none';
  };
  sms: {
    provider: string;
    apiKey: string;
    senderId: string;
    url: string;
  };
  heroData: {
    title: string;
    subtitle: string;
    ctaText: string;
    ctaLink: string;
    videoUrl: string;
    backgroundImage: string;
  };
  masterData: {
    kycDocuments: { name: string; required: boolean }[];
    subscriptionPlans: { name: string; price: number; duration: number; features: string[] }[];
    investorDocuments: { id: string; name: string; required: boolean; description: string }[];
    merchantDocuments: { id: string; name: string; required: boolean; description: string }[];
    swapStationDocuments: { id: string; name: string; required: boolean; description: string }[];
    rentalDocuments: {
      type: 'single' | 'shared' | 'rent-to-own';
      name: string;
      documents: { id: string; name: string; required: boolean; description: string }[];
    }[];
  };
  parts: { id: string; name: string; price: number; inStock: number }[];
  serviceCenters: { id: string; name: string; address: string; phone: string; rating: number }[];
  rentalPolicy: {
    minAge: number;
    requireLicense: boolean;
    deposit: number;
    lateFeePerHour: number;
    cancellationFee: number;
    damagePenalty: { level: string; amount: number }[];
    rules: string[];
  };
}

const initialSettings: CompanySettings = {
  name: 'JAIBEN Mobility Ltd',
  shortName: 'JAIBEN',
  tagLine: 'Your Trusted EV Mobility Partner',
  description: 'Leading electric vehicle rental and swap station network in Bangladesh',
  email: 'info@jaiben.com',
  phone: '+880 9611-222-333',
  website: 'https://jaiben.com',
  address: 'House 45, Road 13, Gulshan 1',
  city: 'Dhaka',
  country: 'Bangladesh',
  tin: '123456789012',
  bin: '987654321098',
  tradeLicense: 'TRAD/2023/001234',
  timezone: 'Asia/Dhaka',
  currency: 'BDT',
  language: 'en',
  logo: '/logo.png',
  favicon: '/favicon.ico',
  primaryColor: '#10B981',
  secondaryColor: '#3B82F6',
  borderRadius: 8,
  socialLinks: {
    facebook: 'https://facebook.com/jaiben',
    twitter: 'https://twitter.com/jaiben',
    instagram: 'https://instagram.com/jaiben',
    linkedin: 'https://linkedin.com/company/jaiben',
    youtube: 'https://youtube.com/@jaiben'
  },
  smtp: {
    host: 'smtp.mailserver.com',
    port: 587,
    user: 'noreply@jaiben.com',
    password: '••••••••••••',
    fromEmail: 'noreply@jaiben.com',
    fromName: 'JAIBEN Mobility',
    encryption: 'tls'
  },
  sms: {
    provider: 'BulkSMS',
    apiKey: '••••••••••••••••',
    senderId: 'JAIBEN',
    url: 'https://api.bulksmsbd.com'
  },
  heroData: {
    title: 'Welcome to JAIBEN',
    subtitle: 'Your trusted partner for electric vehicle mobility solutions across Bangladesh',
    ctaText: 'Get Started',
    ctaLink: '/rent',
    videoUrl: '',
    backgroundImage: '/hero-bg.jpg'
  },
  masterData: {
    kycDocuments: [
      { name: 'NID Card', required: true },
      { name: 'Driving License', required: true },
      { name: 'Passport Photo', required: true },
      { name: 'Address Proof', required: false },
      { name: 'Business Trade License', required: false },
    ],
    subscriptionPlans: [
      { name: 'Daily', price: 500, duration: 1, features: ['24 hours access', 'Basic support'] },
      { name: 'Weekly', price: 3000, duration: 7, features: ['7 days access', 'Priority support', 'Free swap'] },
      { name: 'Monthly', price: 10000, duration: 30, features: ['30 days access', 'VIP support', 'Unlimited swap', 'Damage coverage'] },
      { name: 'Yearly', price: 80000, duration: 365, features: ['1 year access', 'Dedicated manager', 'Unlimited swap', 'Full coverage', 'Discounted rates'] },
    ],
    investorDocuments: [
      { id: 'inv_nid', name: 'NID Card (Front & Back)', required: true, description: 'National ID card copy' },
      { id: 'inv_photo', name: 'Passport Size Photo', required: true, description: 'Recent passport size photograph' },
      { id: 'inv_bank', name: 'Bank Account Info', required: true, description: 'Bank account details for earnings' },
      { id: 'inv_mobile', name: 'Mobile Banking', required: true, description: 'bKash/Rocket account details' },
      { id: 'inv_tin', name: 'TIN Certificate', required: false, description: 'Tax Identification Number' },
      { id: 'inv_tax', name: 'Tax Return', required: false, description: 'Recent tax return copy' },
      { id: 'inv_ec', name: 'Emergency Contact ID', required: false, description: 'Emergency contact NID copy' },
    ],
    merchantDocuments: [
      { id: 'mer_trade', name: 'Trade License', required: true, description: 'Business trade license' },
      { id: 'mer_nid', name: 'Owner NID Card', required: true, description: 'Owner/proprietor NID card' },
      { id: 'mer_photo', name: 'Shop Photo', required: true, description: 'Photo of shop premises' },
      { id: 'mer_tin', name: 'TIN Certificate', required: true, description: 'Tax Identification Number' },
      { id: 'mer_bank', name: 'Bank Account Info', required: true, description: 'Business bank account' },
      { id: 'mer_agreement', name: 'Shop Agreement', required: false, description: 'Rent agreement or ownership' },
      { id: 'mer_fire', name: 'Fire License', required: false, description: 'Fire safety license' },
    ],
    swapStationDocuments: [
      { id: 'ss_trade', name: 'Trade License', required: true, description: 'Business trade license' },
      { id: 'ss_owner_nid', name: 'Owner NID Card', required: true, description: 'Proprietor NID card' },
      { id: 'ss_photo', name: 'Station Photo', required: true, description: 'Photo of swap station' },
      { id: 'ss_tin', name: 'TIN Certificate', required: true, description: 'Tax Identification Number' },
      { id: 'ss_electric', name: 'Electricity Bill', required: true, description: 'Recent electricity bill' },
      { id: 'ss_agreement', name: 'Space Agreement', required: false, description: 'Rent/space agreement' },
      { id: 'ss_safety', name: 'Safety Certificate', required: false, description: 'Electrical safety certificate' },
    ],
    rentalDocuments: [
      {
        type: 'single',
        name: 'Rental (Single)',
        documents: [
          { id: 'rent_nid', name: 'NID Card', required: true, description: 'Valid National ID' },
          { id: 'rent_license', name: 'Driving License', required: true, description: 'Valid driving license' },
          { id: 'rent_photo', name: 'Passport Photo', required: true, description: 'Recent photo' },
          { id: 'rent_deposit', name: 'Deposit Receipt', required: true, description: 'Security deposit proof' },
          { id: 'rent_ec', name: 'Emergency Contact', required: true, description: 'Emergency contact info' },
        ]
      },
      {
        type: 'shared',
        name: 'Rental (2 Person Shared)',
        documents: [
          { id: 'rent_nid_1', name: 'Rider 1 - NID Card', required: true, description: 'Primary rider NID' },
          { id: 'rent_license_1', name: 'Rider 1 - Driving License', required: true, description: 'Primary rider license' },
          { id: 'rent_nid_2', name: 'Rider 2 - NID Card', required: true, description: 'Secondary rider NID' },
          { id: 'rent_license_2', name: 'Rider 2 - Driving License', required: true, description: 'Secondary rider license' },
          { id: 'rent_photo', name: 'Passport Photos (Both)', required: true, description: 'Photos of both riders' },
          { id: 'rent_deposit', name: 'Deposit Receipt', required: true, description: 'Security deposit proof' },
          { id: 'rent_agreement', name: 'Shared Agreement', required: true, description: 'Agreement between riders' },
          { id: 'rent_ec', name: 'Emergency Contacts', required: true, description: 'Emergency contacts for both' },
        ]
      },
      {
        type: 'rent-to-own',
        name: 'Rent-to-Own',
        documents: [
          { id: 'rto_nid', name: 'NID Card', required: true, description: 'Valid National ID' },
          { id: 'rto_license', name: 'Driving License', required: true, description: 'Valid driving license' },
          { id: 'rto_photo', name: 'Passport Photo', required: true, description: 'Recent photo' },
          { id: 'rto_income', name: 'Income Proof', required: true, description: 'Salary/income certificate' },
          { id: 'rto_bank', name: 'Bank Statement', required: true, description: '6 months bank statement' },
          { id: 'rto_tin', name: 'TIN Certificate', required: false, description: 'Tax Identification Number' },
          { id: 'rto_guarantor', name: 'Guarantor Info', required: true, description: 'Guarantor details' },
          { id: 'rto_guarantor_nid', name: 'Guarantor NID', required: true, description: 'Guarantor NID copy' },
          { id: 'rto_agreement', name: 'RTO Agreement', required: true, description: 'Rent-to-own contract' },
          { id: 'rto_insurance', name: 'Insurance', required: false, description: 'Vehicle insurance' },
        ]
      },
    ]
  },
  parts: [
    { id: 'PRT-001', name: 'Battery 60V', price: 15000, inStock: 25 },
    { id: 'PRT-002', name: 'Front Tire', price: 2500, inStock: 50 },
    { id: 'PRT-003', name: 'Rear Tire', price: 2500, inStock: 50 },
    { id: 'PRT-004', name: 'Brake Pad', price: 800, inStock: 100 },
    { id: 'PRT-005', name: 'Mirror', price: 350, inStock: 80 },
  ],
  serviceCenters: [
    { id: 'SC-001', name: 'JAIBEN Service Center - Gulshan', address: 'House 45, Road 13, Gulshan 1, Dhaka', phone: '+8801712345670', rating: 4.8 },
    { id: 'SC-002', name: 'JAIBEN Service Center - Banani', address: 'Road 11, Banani, Dhaka', phone: '+8801712345671', rating: 4.5 },
  ],
  rentalPolicy: {
    minAge: 18,
    requireLicense: true,
    deposit: 5000,
    lateFeePerHour: 200,
    cancellationFee: 1000,
    damagePenalty: [
      { level: 'Minor Scratch', amount: 500 },
      { level: 'Major Damage', amount: 5000 },
      { level: 'Total Loss', amount: 25000 },
    ],
    rules: [
      'No smoking in vehicles',
      'Return with same fuel/charge level',
      'No unauthorized drivers',
      'Follow traffic rules',
      'Report accidents within 24 hours',
    ]
  }
};

export default function CompanySettingsPage() {
  const [settings, setSettings] = useState<CompanySettings>(initialSettings);
  const [activeTab, setActiveTab] = useState<'general' | 'branding' | 'social' | 'integration' | 'landing' | 'master' | 'rental'>('general');
  const [activeMasterTab, setActiveMasterTab] = useState<'kyc' | 'investor' | 'merchant' | 'swapstation' | 'rental' | 'plans' | 'parts' | 'service'>('kyc');
  const [saved, setSaved] = useState(false);

  const handleSave = () => {
    setSaved(true);
    setTimeout(() => setSaved(false), 2000);
  };

  const tabs = [
    { id: 'general', label: 'General', icon: Settings },
    { id: 'branding', label: 'Branding', icon: Palette },
    { id: 'social', label: 'Social Media', icon: Link2 },
    { id: 'integration', label: 'Integrations', icon: Mail },
    { id: 'landing', label: 'Landing Page', icon: Monitor },
    { id: 'master', label: 'Master Data', icon: Package },
    { id: 'rental', label: 'Rental Policy', icon: FileCheck },
  ];

  return (
    <div className="p-4 lg:p-6">
      <div className="flex flex-col lg:flex-row lg:items-center lg:justify-between gap-4 mb-6">
        <div>
          <h1 className="text-2xl lg:text-3xl font-extrabold text-slate-800">Company Settings</h1>
          <p className="text-sm text-slate-500 mt-1">Manage your company information and configurations</p>
        </div>
        <button 
          onClick={handleSave}
          className="py-2.5 px-4 bg-accent text-white rounded-lg font-semibold text-sm hover:bg-accent-dark transition-colors flex items-center gap-2"
        >
          <Save className="w-4 h-4" /> Save Changes
        </button>
      </div>

      {saved && (
        <div className="mb-4 p-3 bg-green-100 text-green-700 rounded-lg text-sm">
          Settings saved successfully!
        </div>
      )}

      <div className="grid lg:grid-cols-4 gap-6">
        <div className="lg:col-span-1 bg-white rounded-xl shadow-sm border border-slate-100 p-2">
          <nav className="space-y-1">
            {tabs.map(tab => (
              <button
                key={tab.id}
                onClick={() => setActiveTab(tab.id as typeof activeTab)}
                className={`w-full flex items-center gap-3 px-3 py-2.5 rounded-lg text-sm font-medium transition-colors ${
                  activeTab === tab.id 
                    ? 'bg-accent text-white' 
                    : 'text-slate-600 hover:bg-slate-50'
                }`}
              >
                <tab.icon className="w-4 h-4" />
                {tab.label}
              </button>
            ))}
          </nav>
        </div>

        <div className="lg:col-span-3 bg-white rounded-xl shadow-sm border border-slate-100">
          {activeTab === 'general' && (
            <div className="p-6 space-y-6">
              <h3 className="text-lg font-semibold text-slate-800">General Information</h3>
              
              <div className="grid lg:grid-cols-2 gap-4">
                <div>
                  <label className="text-sm text-slate-600">Company Name</label>
                  <input
                    type="text"
                    value={settings.name}
                    onChange={(e) => setSettings({ ...settings, name: e.target.value })}
                    className="w-full px-3 py-2 border border-slate-200 rounded-lg text-sm mt-1"
                  />
                </div>
                <div>
                  <label className="text-sm text-slate-600">Short Name</label>
                  <input
                    type="text"
                    value={settings.shortName}
                    onChange={(e) => setSettings({ ...settings, shortName: e.target.value })}
                    className="w-full px-3 py-2 border border-slate-200 rounded-lg text-sm mt-1"
                  />
                </div>
                <div>
                  <label className="text-sm text-slate-600">Tagline</label>
                  <input
                    type="text"
                    value={settings.tagLine}
                    onChange={(e) => setSettings({ ...settings, tagLine: e.target.value })}
                    className="w-full px-3 py-2 border border-slate-200 rounded-lg text-sm mt-1"
                  />
                </div>
                <div>
                  <label className="text-sm text-slate-600">Website</label>
                  <input
                    type="text"
                    value={settings.website}
                    onChange={(e) => setSettings({ ...settings, website: e.target.value })}
                    className="w-full px-3 py-2 border border-slate-200 rounded-lg text-sm mt-1"
                  />
                </div>
              </div>

              <div>
                <label className="text-sm text-slate-600">Description</label>
                <textarea
                  value={settings.description}
                  onChange={(e) => setSettings({ ...settings, description: e.target.value })}
                  className="w-full px-3 py-2 border border-slate-200 rounded-lg text-sm mt-1"
                  rows={3}
                />
              </div>

              <div className="grid lg:grid-cols-2 gap-4">
                <div>
                  <label className="text-sm text-slate-600">Email</label>
                  <input
                    type="email"
                    value={settings.email}
                    onChange={(e) => setSettings({ ...settings, email: e.target.value })}
                    className="w-full px-3 py-2 border border-slate-200 rounded-lg text-sm mt-1"
                  />
                </div>
                <div>
                  <label className="text-sm text-slate-600">Phone</label>
                  <input
                    type="text"
                    value={settings.phone}
                    onChange={(e) => setSettings({ ...settings, phone: e.target.value })}
                    className="w-full px-3 py-2 border border-slate-200 rounded-lg text-sm mt-1"
                  />
                </div>
              </div>

              <div>
                <label className="text-sm text-slate-600">Address</label>
                <textarea
                  value={settings.address}
                  onChange={(e) => setSettings({ ...settings, address: e.target.value })}
                  className="w-full px-3 py-2 border border-slate-200 rounded-lg text-sm mt-1"
                  rows={2}
                />
              </div>

              <div className="grid lg:grid-cols-3 gap-4">
                <div>
                  <label className="text-sm text-slate-600">City</label>
                  <input
                    type="text"
                    value={settings.city}
                    onChange={(e) => setSettings({ ...settings, city: e.target.value })}
                    className="w-full px-3 py-2 border border-slate-200 rounded-lg text-sm mt-1"
                  />
                </div>
                <div>
                  <label className="text-sm text-slate-600">Country</label>
                  <input
                    type="text"
                    value={settings.country}
                    onChange={(e) => setSettings({ ...settings, country: e.target.value })}
                    className="w-full px-3 py-2 border border-slate-200 rounded-lg text-sm mt-1"
                  />
                </div>
                <div>
                  <label className="text-sm text-slate-600">Timezone</label>
                  <select
                    value={settings.timezone}
                    onChange={(e) => setSettings({ ...settings, timezone: e.target.value })}
                    className="w-full px-3 py-2 border border-slate-200 rounded-lg text-sm mt-1"
                  >
                    <option value="Asia/Dhaka">Asia/Dhaka (GMT+6)</option>
                    <option value="Asia/Kolkata">Asia/Kolkata (GMT+5:30)</option>
                    <option value="UTC">UTC (GMT+0)</option>
                  </select>
                </div>
              </div>

              <h3 className="text-lg font-semibold text-slate-800 pt-4 border-t">Business Registration</h3>
              
              <div className="grid lg:grid-cols-3 gap-4">
                <div>
                  <label className="text-sm text-slate-600">TIN Number</label>
                  <input
                    type="text"
                    value={settings.tin}
                    onChange={(e) => setSettings({ ...settings, tin: e.target.value })}
                    className="w-full px-3 py-2 border border-slate-200 rounded-lg text-sm mt-1"
                  />
                </div>
                <div>
                  <label className="text-sm text-slate-600">BIN Number</label>
                  <input
                    type="text"
                    value={settings.bin}
                    onChange={(e) => setSettings({ ...settings, bin: e.target.value })}
                    className="w-full px-3 py-2 border border-slate-200 rounded-lg text-sm mt-1"
                  />
                </div>
                <div>
                  <label className="text-sm text-slate-600">Trade License</label>
                  <input
                    type="text"
                    value={settings.tradeLicense}
                    onChange={(e) => setSettings({ ...settings, tradeLicense: e.target.value })}
                    className="w-full px-3 py-2 border border-slate-200 rounded-lg text-sm mt-1"
                  />
                </div>
              </div>

              <div>
                <label className="text-sm text-slate-600">Documents</label>
                <div className="mt-2 p-4 border-2 border-dashed border-slate-200 rounded-lg text-center hover:border-accent cursor-pointer">
                  <Upload className="w-8 h-8 mx-auto text-slate-400" />
                  <p className="text-sm text-slate-500 mt-1">Drop files here or click to upload</p>
                  <p className="text-xs text-slate-400">PDF, JPG, PNG up to 10MB</p>
                </div>
              </div>
            </div>
          )}

          {activeTab === 'branding' && (
            <div className="p-6 space-y-6">
              <h3 className="text-lg font-semibold text-slate-800">Branding & Design</h3>
              
              <div className="grid lg:grid-cols-2 gap-6">
                <div>
                  <label className="text-sm text-slate-600">Company Logo</label>
                  <div className="mt-2 border-2 border-dashed border-slate-200 rounded-lg p-6 text-center hover:border-accent cursor-pointer">
                    <Image className="w-12 h-12 mx-auto text-slate-400" />
                    <p className="text-sm text-slate-500 mt-2">Upload Logo (PNG, SVG)</p>
                    <p className="text-xs text-slate-400">Recommended: 200x50px</p>
                  </div>
                </div>
                <div>
                  <label className="text-sm text-slate-600">Favicon</label>
                  <div className="mt-2 border-2 border-dashed border-slate-200 rounded-lg p-6 text-center hover:border-accent cursor-pointer">
                    <Camera className="w-12 h-12 mx-auto text-slate-400" />
                    <p className="text-sm text-slate-500 mt-2">Upload Favicon</p>
                    <p className="text-xs text-slate-400">Recommended: 32x32px</p>
                  </div>
                </div>
              </div>

              <div className="grid lg:grid-cols-2 gap-6 pt-4">
                <div>
                  <label className="text-sm text-slate-600">Primary Color</label>
                  <div className="flex items-center gap-3 mt-2">
                    <input
                      type="color"
                      value={settings.primaryColor}
                      onChange={(e) => setSettings({ ...settings, primaryColor: e.target.value })}
                      className="w-12 h-12 rounded-lg cursor-pointer border-0"
                    />
                    <input
                      type="text"
                      value={settings.primaryColor}
                      onChange={(e) => setSettings({ ...settings, primaryColor: e.target.value })}
                      className="flex-1 px-3 py-2 border border-slate-200 rounded-lg text-sm"
                    />
                  </div>
                </div>
                <div>
                  <label className="text-sm text-slate-600">Secondary Color</label>
                  <div className="flex items-center gap-3 mt-2">
                    <input
                      type="color"
                      value={settings.secondaryColor}
                      onChange={(e) => setSettings({ ...settings, secondaryColor: e.target.value })}
                      className="w-12 h-12 rounded-lg cursor-pointer border-0"
                    />
                    <input
                      type="text"
                      value={settings.secondaryColor}
                      onChange={(e) => setSettings({ ...settings, secondaryColor: e.target.value })}
                      className="flex-1 px-3 py-2 border border-slate-200 rounded-lg text-sm"
                    />
                  </div>
                </div>
              </div>

              <div>
                <label className="text-sm text-slate-600">Border Radius</label>
                <div className="flex items-center gap-4 mt-2">
                  <Ruler className="w-5 h-5 text-slate-400" />
                  <input
                    type="range"
                    min={0}
                    max={20}
                    value={settings.borderRadius}
                    onChange={(e) => setSettings({ ...settings, borderRadius: parseInt(e.target.value) })}
                    className="flex-1"
                  />
                  <span className="text-sm text-slate-600">{settings.borderRadius}px</span>
                </div>
                <div className="flex gap-2 mt-4">
                  {[4, 8, 12, 16].map(radius => (
                    <button
                      key={radius}
                      onClick={() => setSettings({ ...settings, borderRadius: radius })}
                      className={`px-3 py-2 text-sm border ${settings.borderRadius === radius ? 'bg-accent text-white' : 'border-slate-200'}`}
                      style={{ borderRadius: radius }}
                    >
                      {radius}px
                    </button>
                  ))}
                </div>
              </div>

              <div>
                <label className="text-sm text-slate-600">Preview</label>
                <div className="mt-2 p-6 bg-slate-100 rounded-lg flex items-center justify-center gap-4">
                  <div 
                    className="px-4 py-2 text-white font-bold"
                    style={{ backgroundColor: settings.primaryColor, borderRadius: settings.borderRadius }}
                  >
                    Primary
                  </div>
                  <div 
                    className="px-4 py-2 text-white font-bold"
                    style={{ backgroundColor: settings.secondaryColor, borderRadius: settings.borderRadius }}
                  >
                    Secondary
                  </div>
                </div>
              </div>
            </div>
          )}

          {activeTab === 'social' && (
            <div className="p-6 space-y-6">
              <h3 className="text-lg font-semibold text-slate-800">Social Media Links</h3>
              
              <div className="space-y-4">
                <div className="flex items-center gap-3">
                  <span className="w-5 text-blue-600 font-bold text-sm">FB</span>
                  <label className="w-24 text-sm text-slate-600">Facebook</label>
                  <input
                    type="text"
                    value={settings.socialLinks.facebook}
                    onChange={(e) => setSettings({ ...settings, socialLinks: { ...settings.socialLinks, facebook: e.target.value } })}
                    className="flex-1 px-3 py-2 border border-slate-200 rounded-lg text-sm"
                    placeholder="https://facebook.com/yourpage"
                  />
                </div>
                <div className="flex items-center gap-3">
                  <span className="w-5 text-sky-500 font-bold text-sm">X</span>
                  <label className="w-24 text-sm text-slate-600">Twitter</label>
                  <input
                    type="text"
                    value={settings.socialLinks.twitter}
                    onChange={(e) => setSettings({ ...settings, socialLinks: { ...settings.socialLinks, twitter: e.target.value } })}
                    className="flex-1 px-3 py-2 border border-slate-200 rounded-lg text-sm"
                    placeholder="https://twitter.com/yourpage"
                  />
                </div>
                <div className="flex items-center gap-3">
                  <span className="w-5 text-pink-600 font-bold text-sm">IG</span>
                  <label className="w-24 text-sm text-slate-600">Instagram</label>
                  <input
                    type="text"
                    value={settings.socialLinks.instagram}
                    onChange={(e) => setSettings({ ...settings, socialLinks: { ...settings.socialLinks, instagram: e.target.value } })}
                    className="flex-1 px-3 py-2 border border-slate-200 rounded-lg text-sm"
                    placeholder="https://instagram.com/yourpage"
                  />
                </div>
                <div className="flex items-center gap-3">
                  <span className="w-5 text-blue-700 font-bold text-sm">IN</span>
                  <label className="w-24 text-sm text-slate-600">LinkedIn</label>
                  <input
                    type="text"
                    value={settings.socialLinks.linkedin}
                    onChange={(e) => setSettings({ ...settings, socialLinks: { ...settings.socialLinks, linkedin: e.target.value } })}
                    className="flex-1 px-3 py-2 border border-slate-200 rounded-lg text-sm"
                    placeholder="https://linkedin.com/company/yourpage"
                  />
                </div>
                <div className="flex items-center gap-3">
                  <span className="w-5 text-red-600 font-bold text-sm">YT</span>
                  <label className="w-24 text-sm text-slate-600">YouTube</label>
                  <input
                    type="text"
                    value={settings.socialLinks.youtube}
                    onChange={(e) => setSettings({ ...settings, socialLinks: { ...settings.socialLinks, youtube: e.target.value } })}
                    className="flex-1 px-3 py-2 border border-slate-200 rounded-lg text-sm"
                    placeholder="https://youtube.com/@yourchannel"
                  />
                </div>
              </div>
            </div>
          )}

          {activeTab === 'integration' && (
            <div className="p-6 space-y-6">
              <h3 className="text-lg font-semibold text-slate-800">Email Integration (SMTP)</h3>
              
              <div className="grid lg:grid-cols-2 gap-4">
                <div>
                  <label className="text-sm text-slate-600">SMTP Host</label>
                  <input
                    type="text"
                    value={settings.smtp.host}
                    onChange={(e) => setSettings({ ...settings, smtp: { ...settings.smtp, host: e.target.value } })}
                    className="w-full px-3 py-2 border border-slate-200 rounded-lg text-sm mt-1"
                  />
                </div>
                <div>
                  <label className="text-sm text-slate-600">SMTP Port</label>
                  <input
                    type="number"
                    value={settings.smtp.port}
                    onChange={(e) => setSettings({ ...settings, smtp: { ...settings.smtp, port: parseInt(e.target.value) } })}
                    className="w-full px-3 py-2 border border-slate-200 rounded-lg text-sm mt-1"
                  />
                </div>
                <div>
                  <label className="text-sm text-slate-600">Username</label>
                  <input
                    type="text"
                    value={settings.smtp.user}
                    onChange={(e) => setSettings({ ...settings, smtp: { ...settings.smtp, user: e.target.value } })}
                    className="w-full px-3 py-2 border border-slate-200 rounded-lg text-sm mt-1"
                  />
                </div>
                <div>
                  <label className="text-sm text-slate-600">Password</label>
                  <input
                    type="password"
                    value={settings.smtp.password}
                    onChange={(e) => setSettings({ ...settings, smtp: { ...settings.smtp, password: e.target.value } })}
                    className="w-full px-3 py-2 border border-slate-200 rounded-lg text-sm mt-1"
                  />
                </div>
                <div>
                  <label className="text-sm text-slate-600">From Email</label>
                  <input
                    type="email"
                    value={settings.smtp.fromEmail}
                    onChange={(e) => setSettings({ ...settings, smtp: { ...settings.smtp, fromEmail: e.target.value } })}
                    className="w-full px-3 py-2 border border-slate-200 rounded-lg text-sm mt-1"
                  />
                </div>
                <div>
                  <label className="text-sm text-slate-600">From Name</label>
                  <input
                    type="text"
                    value={settings.smtp.fromName}
                    onChange={(e) => setSettings({ ...settings, smtp: { ...settings.smtp, fromName: e.target.value } })}
                    className="w-full px-3 py-2 border border-slate-200 rounded-lg text-sm mt-1"
                  />
                </div>
              </div>

              <div>
                <label className="text-sm text-slate-600">Encryption</label>
                <div className="flex gap-3 mt-2">
                  {(['ssl', 'tls', 'none'] as const).map(enc => (
                    <button
                      key={enc}
                      onClick={() => setSettings({ ...settings, smtp: { ...settings.smtp, encryption: enc } })}
                      className={`px-4 py-2 text-sm rounded-lg border ${
                        settings.smtp.encryption === enc 
                          ? 'bg-accent text-white border-accent' 
                          : 'border-slate-200 text-slate-600'
                      }`}
                    >
                      {enc.toUpperCase()}
                    </button>
                  ))}
                </div>
              </div>

              <h3 className="text-lg font-semibold text-slate-800 pt-4 border-t">SMS Integration</h3>
              
              <div className="grid lg:grid-cols-2 gap-4">
                <div>
                  <label className="text-sm text-slate-600">Provider</label>
                  <select
                    value={settings.sms.provider}
                    onChange={(e) => setSettings({ ...settings, sms: { ...settings.sms, provider: e.target.value } })}
                    className="w-full px-3 py-2 border border-slate-200 rounded-lg text-sm mt-1"
                  >
                    <option value="BulkSMS">BulkSMS BD</option>
                    <option value="Twilio">Twilio</option>
                    <option value="Msg91">Msg91</option>
                  </select>
                </div>
                <div>
                  <label className="text-sm text-slate-600">Sender ID</label>
                  <input
                    type="text"
                    value={settings.sms.senderId}
                    onChange={(e) => setSettings({ ...settings, sms: { ...settings.sms, senderId: e.target.value } })}
                    className="w-full px-3 py-2 border border-slate-200 rounded-lg text-sm mt-1"
                  />
                </div>
                <div className="lg:col-span-2">
                  <label className="text-sm text-slate-600">API Key</label>
                  <input
                    type="password"
                    value={settings.sms.apiKey}
                    onChange={(e) => setSettings({ ...settings, sms: { ...settings.sms, apiKey: e.target.value } })}
                    className="w-full px-3 py-2 border border-slate-200 rounded-lg text-sm mt-1"
                  />
                </div>
                <div className="lg:col-span-2">
                  <label className="text-sm text-slate-600">API URL</label>
                  <input
                    type="text"
                    value={settings.sms.url}
                    onChange={(e) => setSettings({ ...settings, sms: { ...settings.sms, url: e.target.value } })}
                    className="w-full px-3 py-2 border border-slate-200 rounded-lg text-sm mt-1"
                  />
                </div>
              </div>
            </div>
          )}

          {activeTab === 'landing' && (
            <div className="p-6 space-y-6">
              <h3 className="text-lg font-semibold text-slate-800">Landing Page Hero Section</h3>
              
              <div className="grid lg:grid-cols-2 gap-4">
                <div>
                  <label className="text-sm text-slate-600">Hero Title</label>
                  <input
                    type="text"
                    value={settings.heroData.title}
                    onChange={(e) => setSettings({ ...settings, heroData: { ...settings.heroData, title: e.target.value } })}
                    className="w-full px-3 py-2 border border-slate-200 rounded-lg text-sm mt-1"
                  />
                </div>
                <div>
                  <label className="text-sm text-slate-600">Subtitle</label>
                  <input
                    type="text"
                    value={settings.heroData.subtitle}
                    onChange={(e) => setSettings({ ...settings, heroData: { ...settings.heroData, subtitle: e.target.value } })}
                    className="w-full px-3 py-2 border border-slate-200 rounded-lg text-sm mt-1"
                  />
                </div>
              </div>

              <div className="grid lg:grid-cols-2 gap-4">
                <div>
                  <label className="text-sm text-slate-600">CTA Button Text</label>
                  <input
                    type="text"
                    value={settings.heroData.ctaText}
                    onChange={(e) => setSettings({ ...settings, heroData: { ...settings.heroData, ctaText: e.target.value } })}
                    className="w-full px-3 py-2 border border-slate-200 rounded-lg text-sm mt-1"
                  />
                </div>
                <div>
                  <label className="text-sm text-slate-600">CTA Link</label>
                  <input
                    type="text"
                    value={settings.heroData.ctaLink}
                    onChange={(e) => setSettings({ ...settings, heroData: { ...settings.heroData, ctaLink: e.target.value } })}
                    className="w-full px-3 py-2 border border-slate-200 rounded-lg text-sm mt-1"
                  />
                </div>
              </div>

              <div>
                <label className="text-sm text-slate-600">Background Image</label>
                <div className="mt-2 border-2 border-dashed border-slate-200 rounded-lg p-6 text-center hover:border-accent cursor-pointer">
                  <Image className="w-12 h-12 mx-auto text-slate-400" />
                  <p className="text-sm text-slate-500 mt-2">Upload Background Image</p>
                  <p className="text-xs text-slate-400">Recommended: 1920x1080px</p>
                </div>
              </div>

              <div>
                <label className="text-sm text-slate-600">Video URL (Optional)</label>
                <input
                  type="text"
                  value={settings.heroData.videoUrl}
                  onChange={(e) => setSettings({ ...settings, heroData: { ...settings.heroData, videoUrl: e.target.value } })}
                  className="w-full px-3 py-2 border border-slate-200 rounded-lg text-sm mt-1"
                  placeholder="https://youtube.com/watch?v=..."
                />
              </div>

              <div className="pt-4 border-t">
                <label className="text-sm text-slate-600">Preview</label>
                <div className="mt-2 p-8 bg-gradient-to-br from-slate-800 to-slate-900 rounded-lg text-center">
                  <h4 className="text-2xl font-bold text-white">{settings.heroData.title}</h4>
                  <p className="text-slate-300 mt-2">{settings.heroData.subtitle}</p>
                  <button 
                    className="mt-4 px-6 py-2 bg-accent text-white rounded-lg"
                    style={{ borderRadius: settings.borderRadius }}
                  >
                    {settings.heroData.ctaText}
                  </button>
                </div>
              </div>
            </div>
          )}

          {activeTab === 'master' && (
            <div className="p-6 space-y-6">
              <h3 className="text-lg font-semibold text-slate-800">Master Data</h3>
              
              <div className="flex flex-wrap gap-2 border-b border-slate-200 pb-2">
                {[
                  { id: 'kyc', label: 'KYC Documents' },
                  { id: 'investor', label: 'Investor' },
                  { id: 'merchant', label: 'Merchant' },
                  { id: 'swapstation', label: 'Swap Station' },
                  { id: 'rental', label: 'Rental Types' },
                  { id: 'plans', label: 'Subscription Plans' },
                ].map(tab => (
                  <button
                    key={tab.id}
                    onClick={() => setActiveMasterTab(tab.id as typeof activeMasterTab)}
                    className={`px-3 py-1.5 text-sm rounded-lg ${
                      activeMasterTab === tab.id
                        ? 'bg-accent text-white'
                        : 'text-slate-600 hover:bg-slate-50'
                    }`}
                  >
                    {tab.label}
                  </button>
                ))}
              </div>

              {activeMasterTab === 'kyc' && (
                <div>
                  <h4 className="font-medium text-slate-700 mb-3">KYC Documents Required</h4>
                  <div className="space-y-2">
                    {settings.masterData.kycDocuments.map((doc, i) => (
                      <div key={i} className="flex items-center gap-3 p-2 border border-slate-200 rounded-lg">
                        <input
                          type="checkbox"
                          checked={doc.required}
                          onChange={(e) => {
                            const updated = [...settings.masterData.kycDocuments];
                            updated[i].required = e.target.checked;
                            setSettings({ ...settings, masterData: { ...settings.masterData, kycDocuments: updated } });
                          }}
                          className="w-4 h-4"
                        />
                        <span className="flex-1 text-sm">{doc.name}</span>
                        <span className={`text-xs px-2 py-0.5 rounded ${doc.required ? 'bg-red-100 text-red-700' : 'bg-slate-100 text-slate-500'}`}>
                          {doc.required ? 'Required' : 'Optional'}
                        </span>
                      </div>
                    ))}
                  </div>
                </div>
              )}

              {activeMasterTab === 'investor' && (
                <div>
                  <h4 className="font-medium text-slate-700 mb-3">Investor Documents</h4>
                  <div className="space-y-2">
                    {settings.masterData.investorDocuments.map((doc, i) => (
                      <div key={doc.id} className="flex items-center gap-3 p-3 border border-slate-200 rounded-lg">
                        <input
                          type="checkbox"
                          checked={doc.required}
                          onChange={(e) => {
                            const updated = [...settings.masterData.investorDocuments];
                            updated[i].required = e.target.checked;
                            setSettings({ ...settings, masterData: { ...settings.masterData, investorDocuments: updated } });
                          }}
                          className="w-4 h-4"
                        />
                        <div className="flex-1">
                          <p className="text-sm font-medium">{doc.name}</p>
                          <p className="text-xs text-slate-500">{doc.description}</p>
                        </div>
                        <span className={`text-xs px-2 py-0.5 rounded ${doc.required ? 'bg-red-100 text-red-700' : 'bg-slate-100 text-slate-500'}`}>
                          {doc.required ? 'Required' : 'Optional'}
                        </span>
                      </div>
                    ))}
                  </div>
                  <button className="mt-4 text-sm text-accent hover:underline">+ Add Document</button>
                </div>
              )}

              {activeMasterTab === 'merchant' && (
                <div>
                  <h4 className="font-medium text-slate-700 mb-3">Merchant Documents</h4>
                  <div className="space-y-2">
                    {settings.masterData.merchantDocuments.map((doc, i) => (
                      <div key={doc.id} className="flex items-center gap-3 p-3 border border-slate-200 rounded-lg">
                        <input
                          type="checkbox"
                          checked={doc.required}
                          onChange={(e) => {
                            const updated = [...settings.masterData.merchantDocuments];
                            updated[i].required = e.target.checked;
                            setSettings({ ...settings, masterData: { ...settings.masterData, merchantDocuments: updated } });
                          }}
                          className="w-4 h-4"
                        />
                        <div className="flex-1">
                          <p className="text-sm font-medium">{doc.name}</p>
                          <p className="text-xs text-slate-500">{doc.description}</p>
                        </div>
                        <span className={`text-xs px-2 py-0.5 rounded ${doc.required ? 'bg-red-100 text-red-700' : 'bg-slate-100 text-slate-500'}`}>
                          {doc.required ? 'Required' : 'Optional'}
                        </span>
                      </div>
                    ))}
                  </div>
                  <button className="mt-4 text-sm text-accent hover:underline">+ Add Document</button>
                </div>
              )}

              {activeMasterTab === 'swapstation' && (
                <div>
                  <h4 className="font-medium text-slate-700 mb-3">Swap Station Documents</h4>
                  <div className="space-y-2">
                    {settings.masterData.swapStationDocuments.map((doc, i) => (
                      <div key={doc.id} className="flex items-center gap-3 p-3 border border-slate-200 rounded-lg">
                        <input
                          type="checkbox"
                          checked={doc.required}
                          onChange={(e) => {
                            const updated = [...settings.masterData.swapStationDocuments];
                            updated[i].required = e.target.checked;
                            setSettings({ ...settings, masterData: { ...settings.masterData, swapStationDocuments: updated } });
                          }}
                          className="w-4 h-4"
                        />
                        <div className="flex-1">
                          <p className="text-sm font-medium">{doc.name}</p>
                          <p className="text-xs text-slate-500">{doc.description}</p>
                        </div>
                        <span className={`text-xs px-2 py-0.5 rounded ${doc.required ? 'bg-red-100 text-red-700' : 'bg-slate-100 text-slate-500'}`}>
                          {doc.required ? 'Required' : 'Optional'}
                        </span>
                      </div>
                    ))}
                  </div>
                  <button className="mt-4 text-sm text-accent hover:underline">+ Add Document</button>
                </div>
              )}

              {activeMasterTab === 'rental' && (
                <div className="space-y-6">
                  {settings.masterData.rentalDocuments.map((rental, ri) => (
                    <div key={rental.type} className="border border-slate-200 rounded-lg p-4">
                      <div className="flex items-center justify-between mb-3">
                        <h4 className="font-medium text-slate-700">{rental.name}</h4>
                        <span className="text-xs px-2 py-1 bg-blue-100 text-blue-700 rounded">{rental.documents.length} docs</span>
                      </div>
                      <div className="space-y-2">
                        {rental.documents.map((doc, di) => (
                          <div key={doc.id} className="flex items-center gap-3 p-2 bg-slate-50 rounded-lg">
                            <input
                              type="checkbox"
                              checked={doc.required}
                              onChange={(e) => {
                                const updated = [...settings.masterData.rentalDocuments];
                                updated[ri].documents[di].required = e.target.checked;
                                setSettings({ ...settings, masterData: { ...settings.masterData, rentalDocuments: updated } });
                              }}
                              className="w-4 h-4"
                            />
                            <div className="flex-1">
                              <p className="text-sm">{doc.name}</p>
                              <p className="text-xs text-slate-500">{doc.description}</p>
                            </div>
                            <span className={`text-xs px-2 py-0.5 rounded ${doc.required ? 'bg-red-100 text-red-700' : 'bg-slate-200 text-slate-600'}`}>
                              {doc.required ? 'Required' : 'Optional'}
                            </span>
                          </div>
                        ))}
                      </div>
                    </div>
                  ))}
                </div>
              )}

              {activeMasterTab === 'plans' && (
                <div>
                  <h4 className="font-medium text-slate-700 mb-3">Subscription Plans</h4>
                  <div className="grid lg:grid-cols-2 gap-4">
                    {settings.masterData.subscriptionPlans.map((plan, i) => (
                      <div key={i} className="p-4 border border-slate-200 rounded-lg">
                        <div className="flex justify-between items-center">
                          <span className="font-medium">{plan.name}</span>
                          <span className="text-lg font-bold text-accent">৳{plan.price}</span>
                        </div>
                        <p className="text-sm text-slate-500">{plan.duration} days</p>
                        <div className="mt-2 flex flex-wrap gap-1">
                          {plan.features.map((f, j) => (
                            <span key={j} className="text-xs px-2 py-0.5 bg-slate-100 rounded">{f}</span>
                          ))}
                        </div>
                      </div>
                    ))}
                  </div>
                </div>
              )}
            </div>
          )}

          {activeTab === 'rental' && (
            <div className="p-6 space-y-6">
              <h3 className="text-lg font-semibold text-slate-800">Rental Policy</h3>
              
              <div className="grid lg:grid-cols-2 gap-4">
                <div>
                  <label className="text-sm text-slate-600">Minimum Age</label>
                  <input
                    type="number"
                    value={settings.rentalPolicy.minAge}
                    onChange={(e) => setSettings({ ...settings, rentalPolicy: { ...settings.rentalPolicy, minAge: parseInt(e.target.value) } })}
                    className="w-full px-3 py-2 border border-slate-200 rounded-lg text-sm mt-1"
                  />
                </div>
                <div>
                  <label className="text-sm text-slate-600">Security Deposit (৳)</label>
                  <input
                    type="number"
                    value={settings.rentalPolicy.deposit}
                    onChange={(e) => setSettings({ ...settings, rentalPolicy: { ...settings.rentalPolicy, deposit: parseInt(e.target.value) } })}
                    className="w-full px-3 py-2 border border-slate-200 rounded-lg text-sm mt-1"
                  />
                </div>
                <div>
                  <label className="text-sm text-slate-600">Late Fee per Hour (৳)</label>
                  <input
                    type="number"
                    value={settings.rentalPolicy.lateFeePerHour}
                    onChange={(e) => setSettings({ ...settings, rentalPolicy: { ...settings.rentalPolicy, lateFeePerHour: parseInt(e.target.value) } })}
                    className="w-full px-3 py-2 border border-slate-200 rounded-lg text-sm mt-1"
                  />
                </div>
                <div>
                  <label className="text-sm text-slate-600">Cancellation Fee (৳)</label>
                  <input
                    type="number"
                    value={settings.rentalPolicy.cancellationFee}
                    onChange={(e) => setSettings({ ...settings, rentalPolicy: { ...settings.rentalPolicy, cancellationFee: parseInt(e.target.value) } })}
                    className="w-full px-3 py-2 border border-slate-200 rounded-lg text-sm mt-1"
                  />
                </div>
              </div>

              <div>
                <div className="flex items-center gap-2">
                  <input
                    type="checkbox"
                    checked={settings.rentalPolicy.requireLicense}
                    onChange={(e) => setSettings({ ...settings, rentalPolicy: { ...settings.rentalPolicy, requireLicense: e.target.checked } })}
                    className="w-4 h-4"
                  />
                  <label className="text-sm text-slate-600">Require Driving License</label>
                </div>
              </div>

              <div>
                <h4 className="font-medium text-slate-700 mb-3">Damage Penalties</h4>
                <div className="space-y-2">
                  {settings.rentalPolicy.damagePenalty.map((penalty, i) => (
                    <div key={i} className="flex items-center gap-3 p-2 border border-slate-200 rounded-lg">
                      <span className="w-32 text-sm">{penalty.level}</span>
                      <span className="text-sm font-medium">৳{penalty.amount}</span>
                    </div>
                  ))}
                </div>
              </div>

              <div>
                <h4 className="font-medium text-slate-700 mb-3">Rental Rules</h4>
                <div className="space-y-2">
                  {settings.rentalPolicy.rules.map((rule, i) => (
                    <div key={i} className="flex items-center gap-2 p-2 bg-slate-50 rounded-lg">
                      <span className="text-sm">{rule}</span>
                    </div>
                  ))}
                </div>
              </div>
            </div>
          )}
        </div>
      </div>
    </div>
  );
}