'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, Plus, X, DollarSign, Zap, Users, Check, Pencil, Trash2 } from 'lucide-react';
import RichTextEditor from '@/components/RichTextEditor';

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 }[];
    riderDocuments: { id: string; name: string; required: boolean; description: string }[];
    subscriptionPlans: { name: string; price: number; duration: number; features: string[] }[];
    rentalPlans: { id: string; name: string; type: string; description: string; price: number; duration: number }[];
    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; buyingPrice: number; sellingPrice: number }[];
  serviceCenters: { id: string; name: string; address: string; phone: string; rating: number }[];
  companyPolicy: {
    investor: { title: string; description: string }[];
    merchant: { title: string; description: string }[];
    swapStation: { title: string; description: string }[];
    rentalTypes: {
      single: { title: string; description: string }[];
      shared: { title: string; description: string }[];
      renttoown: { title: string; description: string }[];
    };
  };
  rentalPolicy: {
    minAge: number;
    requireLicense: boolean;
    deposit: number;
    lateFeePerHour: number;
    cancellationFee: number;
    damagePenalty: { level: string; amount: number }[];
    rules: string[];
  };
  plans: {
    singleRent: {
      tier: 'Economy' | 'Standard' | 'Premium';
      name: string;
      contractMonths: number[];
      dailyRent: number;
      deposit: number;
      weeklySubscription: number;
      monthlySubscription: number;
      ficoSharePercent: number;
      description: string;
    }[];
    rentToOwn: {
      tier: 'Economy' | 'Standard' | 'Premium';
      name: string;
      contractMonths: number[];
      dailyRent: number;
      deposit: number;
      weeklySubscription: number;
      monthlySubscription: number;
      durationMonths: number;
      evPrice: number;
      totalPayment: number;
      profit: number;
      ficoRentSharePercent: number;
      ficoProfitSharePercent: number;
      description: string;
    }[];
    shareEv: {
      tier: 'Economy' | 'Standard' | 'Premium';
      name: string;
      contractMonths: number[];
      dailyRentEach: number;
      totalDailyRent: number;
      depositEach: number;
      totalDeposit: number;
      weeklySubscriptionEach: number;
      totalWeeklySubscription: number;
      monthlySubscriptionEach: number;
      totalMonthlySubscription: number;
      ficoSharePercent: number;
      description: string;
    }[];
    investment: {
      id: string;
      tier: string;
      name: string;
      minInvestment: number;
      maxInvestment: number;
      monthlyReturnPercent: number;
      durationMonths: number;
      profitSharePercent: number;
      lockInMonths: number;
      totalReturnPercent: number;
      earlyExitPenalty: number;
      startDate: string;
      endDate: string;
      targetAmount: number;
      status: string;
      description: string;
    }[];
    swapStation: {
      id: string;
      name: string;
      batteryCount: number;
      swapPrice: number;
      monthlySubscription: number;
      dailySubscription: number;
      minBatteries: number;
      maxBatteries: number;
      profitSharePercent: number;
      status: string;
      description: string;
    }[];
    riderRequest: {
      id: string;
      tier: string;
      name: string;
      minRiders: number;
      maxRiders: number;
      monthlySubscription: number;
      dailySubscription: number;
      deposit: number;
      commissionPercent: number;
      dailyRideTarget: number;
      weeklyHoliday: number;
      status: string;
      description: 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 },
    ],
    riderDocuments: [
      { id: 'rider_nid_front', name: 'NID (Front)', required: true, description: 'National ID card front side' },
      { id: 'rider_nid_back', name: 'NID (Back)', required: true, description: 'National ID card back side' },
      { id: 'rider_license', name: 'Driving License', required: true, description: 'Valid driving license' },
      { id: 'rider_photo', name: 'Profile Photo', required: true, description: 'Recent passport size photo' },
      { id: 'rider_bank_card', name: 'Bank Account Card', required: false, description: 'Bank account card/cheque' },
      { id: 'rider_wallet', name: 'Mobile Wallet Info', required: false, description: 'bKash/Rocket account details' },
    ],
    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'] },
    ],
    rentalPlans: [
      { id: 'single_rent', name: 'Single Rent', type: 'single', description: 'Single person rental plan', price: 500, duration: 1 },
      { id: 'weekly_rent', name: 'Weekly Rent', type: 'weekly', description: '7 days rental plan', price: 3000, duration: 7 },
      { id: 'monthly_rent', name: 'Monthly Rent', type: 'monthly', description: '30 days rental plan', price: 10000, duration: 30 },
      { id: 'rent_to_own', name: 'Rent to Own', type: 'rent-to-own', description: 'Own after X months', price: 15000, duration: 365 },
      { id: 'share_ev', name: 'Share EV', type: 'shared', description: 'Shared bike', price: 2500, duration: 30 },
    ],
    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', buyingPrice: 12000, sellingPrice: 15000 },
    { id: 'PRT-002', name: 'Battery 48V', buyingPrice: 9000, sellingPrice: 12000 },
    { id: 'PRT-003', name: 'Front Tire', buyingPrice: 1800, sellingPrice: 2500 },
    { id: 'PRT-004', name: 'Rear Tire', buyingPrice: 1800, sellingPrice: 2500 },
    { id: 'PRT-005', name: 'Brake Pad', buyingPrice: 500, sellingPrice: 800 },
    { id: 'PRT-006', name: 'Mirror', buyingPrice: 200, sellingPrice: 350 },
    { id: 'PRT-007', name: 'Controller', buyingPrice: 3000, sellingPrice: 4500 },
    { id: 'PRT-008', name: 'Motor', buyingPrice: 7000, sellingPrice: 10000 },
    { id: 'PRT-009', name: 'Charger', buyingPrice: 1200, sellingPrice: 2000 },
    { id: 'PRT-010', name: 'Display Meter', buyingPrice: 800, sellingPrice: 1200 },
    { id: 'PRT-011', name: 'Throttle', buyingPrice: 500, sellingPrice: 800 },
    { id: 'PRT-012', name: 'Brake Cable', buyingPrice: 150, sellingPrice: 250 },
    { id: 'PRT-013', name: 'Chain', buyingPrice: 400, sellingPrice: 600 },
    { id: 'PRT-014', name: 'Sprocket', buyingPrice: 300, sellingPrice: 450 },
    { id: 'PRT-015', name: 'Foot Peg', buyingPrice: 180, sellingPrice: 300 },
  ],
  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 },
  ],
  companyPolicy: {
    investor: [
      { title: 'Investor Policy', description: '<h2>Investor Guidelines</h2><p>Welcome to our investor program. This document outlines the terms and conditions for all investors participating in our EV fleet sharing initiative.</p><h3>Key Requirements</h3><ul><li>All investors must complete KYC verification</li><li>Minimum investment amount: ৳100,000</li><li>Monthly returns are calculated based on fleet utilization</li></ul><p><strong>Note:</strong> Past performance does not guarantee future results. Please read all terms carefully before investing.</p>' },
      { title: 'Investor Risk Policy', description: '<h2>Risk Disclosure</h2><p>All investments carry risk. Past performance does not guarantee future results.</p><h3>Risk Factors</h3><ul><li>Market fluctuations</li><li>Operational risks</li><li>Regulatory changes</li></ul>' },
      { title: 'Investor Returns Policy', description: '<h2>Returns</h2><p>Returns depend on fleet performance and utilization.</p><h3>Return Calculation</h3><ul><li>Monthly returns: 2-5%</li><li>Quarterly settlements</li><li>Annual statements</li></ul>' }
    ],
    merchant: [
      { title: 'Merchant Policy', description: '<h2>Merchant Terms</h2><p>Thank you for joining our merchant network. These guidelines ensure smooth operations.</p><h3>Operational Requirements</h3><ul><li>Maintain minimum inventory levels</li><li>Provide excellent customer service</li><li>Accept all payment methods</li></ul>' },
      { title: 'Merchant SLA Policy', description: '<h2>Service Level Agreement</h2><p>Orders must be processed within 24 hours.</p><h3>Response Time</h3><ul><li>Order confirmation: Within 2 hours</li><li>Delivery: Within 24 hours</li><li>Support: Within 4 hours</li></ul>' },
      { title: 'Merchant Commission Policy', description: '<h2>Commission</h2><p>Merchants earn 15% commission per order.</p><h3>Commission Structure</h3><ul><li>Standard orders: 15%</li><li>Bulk orders: 18%</li><li>Premium merchants: 20%</li></ul>' }
    ],
    swapStation: [
      { title: 'Swap Station Policy', description: '<h2>Swap Guidelines</h2><p>Follow safety protocols when handling batteries.</p><h3>General Guidelines</h3><ul><li>Wear protective gloves</li><li>Inspect batteries before swapping</li><li>Keep area clean</li></ul>' },
      { title: 'Battery Safety Policy', description: '<h2>Battery Handling</h2><p>Use gloves and inspect batteries before and after swapping.</p><h3>Safety Measures</h3><ul><li>Check for physical damage</li><li>Verify charge level</li><li>Report malfunctions</li></ul>' },
      { title: 'Maintenance Policy', description: '<h2>Maintenance</h2><p>Keep stations clean and operational at all times.</p><h3>Daily Tasks</h3><ul><li>Clean charging pads</li><li>Check cable conditions</li><li>Update system software</li></ul>' }
    ],
    rentalTypes: {
      single: [
        { title: 'Rental (Single)', description: '<h2>Single Rental</h2><p>Perfect for individual riders who need a reliable vehicle for daily commute or delivery work.</p><h3>Plan Features</h3><ul><li>Daily, weekly, and monthly options</li><li>Comprehensive insurance included</li><li>24/7 roadside assistance</li></ul>' },
        { title: 'Single Rental Pricing', description: '<h2>Pricing</h2><p>Starts from ৳400/day with ৳5,000 deposit.</p><h3>Rates</h3><ul><li>Daily: ৳400</li><li>Weekly: ৳2,800</li><li>Monthly: ৳12,000</li></ul>' },
        { title: 'Single Rental Benefits', description: '<h2>Benefits</h2><p>Includes maintenance, insurance, and support.</p><h3>Included</h3><ul><li>Free maintenance</li><li>Full insurance coverage</li><li>24/7 customer support</li></ul>' }
      ],
      shared: [
        { title: 'Rental (2 Person Shared)', description: '<h2>Shared Plan</h2><p>Two riders share cost and responsibilities.</p><h3>Plan Features</h3><ul><li>Split costs between two riders</li><li>Both users must be verified</li><li>Shared liability coverage</li></ul>' },
        { title: 'Shared Plan Benefits', description: '<h2>Benefits</h2><p>Split payment and flexible usage.</p><h3>Advantages</h3><ul><li>50% cost savings</li><li>Flexible driver switching</li><li>Shared deposit</li></ul>' },
        { title: 'Shared Pricing', description: '<h2>Pricing</h2><p>৳600/day total (৳300 each).</p><h3>Rates</h3><ul><li>Daily: ৳600 (৳300 each)</li><li>Weekly: ৳4,200 (৳2,100 each)</li><li>Monthly: ৳16,800 (৳8,400 each)</li></ul>' }
      ],
      renttoown: [
        { title: 'Rent-to-Own', description: '<h2>Ownership Plan</h2><p>Own vehicle after completing payment tenure.</p><h3>Program Benefits</h3><ul><li>50% payments go toward purchase</li><li>Option to buyout anytime</li><li>Full ownership after 36 months</li></ul>' },
        { title: 'Eligibility', description: '<h2>Eligibility</h2><p>Requires good payment history.</p><h3>Requirements</h3><ul><li>Credit check applies</li><li>Stable income proof</li><li>Minimum 6 months tenure</li></ul>' },
        { title: 'Ownership Benefits', description: '<h2>Benefits</h2><p>50% of payments go toward vehicle purchase.</p><h3>Advantages</h3><ul><li>Transferable to family</li><li>No hidden costs</li><li>Full warranty included</li></ul>' }
      ]
    },
  },
  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',
    ]
  },
  plans: {
    singleRent: [
      {
        tier: 'Premium',
        name: 'Single Rent - Premium',
        contractMonths: [1, 3, 6, 12],
        dailyRent: 400,
        deposit: 25000,
        weeklySubscription: 2800,
        monthlySubscription: 12000,
        ficoSharePercent: 50,
        description: 'Premium single person rental plan with extra benefits',
      },
      {
        tier: 'Standard',
        name: 'Single Rent - Standard',
        contractMonths: [1, 3, 6, 12],
        dailyRent: 300,
        deposit: 20000,
        weeklySubscription: 2100,
        monthlySubscription: 9000,
        ficoSharePercent: 45,
        description: 'Standard single person rental plan',
      },
      {
        tier: 'Economy',
        name: 'Single Rent - Economy',
        contractMonths: [1, 3, 6, 12],
        dailyRent: 250,
        deposit: 15000,
        weeklySubscription: 1750,
        monthlySubscription: 7500,
        ficoSharePercent: 40,
        description: 'Economy single person rental plan',
      }
    ],
    rentToOwn: [
      {
        tier: 'Premium',
        name: 'Rent to Own - Premium',
        contractMonths: [12, 18, 24, 36],
        dailyRent: 350,
        deposit: 25000,
        weeklySubscription: 2450,
        monthlySubscription: 10500,
        durationMonths: 18,
        evPrice: 150000,
        totalPayment: 170000,
        profit: 20000,
        ficoRentSharePercent: 50,
        ficoProfitSharePercent: 45,
        description: 'Premium rent to own plan with high-end EV',
      },
      {
        tier: 'Standard',
        name: 'Rent to Own - Standard',
        contractMonths: [12, 18, 24, 36],
        dailyRent: 250,
        deposit: 18000,
        weeklySubscription: 1750,
        monthlySubscription: 7000,
        durationMonths: 18,
        evPrice: 120000,
        totalPayment: 135000,
        profit: 15000,
        ficoRentSharePercent: 45,
        ficoProfitSharePercent: 45,
        description: 'Standard rent to own plan',
      },
      {
        tier: 'Economy',
        name: 'Rent to Own - Economy',
        contractMonths: [12, 18, 24, 36],
        dailyRent: 200,
        deposit: 15000,
        weeklySubscription: 1400,
        monthlySubscription: 6000,
        durationMonths: 18,
        evPrice: 100000,
        totalPayment: 115000,
        profit: 15000,
        ficoRentSharePercent: 40,
        ficoProfitSharePercent: 40,
        description: 'Economy rent to own plan',
      }
    ],
    shareEv: [
      {
        tier: 'Premium',
        name: 'Share an EV - Premium',
        contractMonths: [1, 3, 6, 12],
        dailyRentEach: 300,
        totalDailyRent: 600,
        depositEach: 20000,
        totalDeposit: 40000,
        weeklySubscriptionEach: 2100,
        totalWeeklySubscription: 4200,
        monthlySubscriptionEach: 8400,
        totalMonthlySubscription: 16800,
        ficoSharePercent: 50,
        description: 'Premium shared EV with premium bikes',
      },
      {
        tier: 'Standard',
        name: 'Share an EV - Standard',
        contractMonths: [1, 3, 6, 12],
        dailyRentEach: 200,
        totalDailyRent: 400,
        depositEach: 15000,
        totalDeposit: 30000,
        weeklySubscriptionEach: 1400,
        totalWeeklySubscription: 2800,
        monthlySubscriptionEach: 5600,
        totalMonthlySubscription: 11200,
        ficoSharePercent: 45,
        description: 'Standard shared EV plan',
      },
      {
        tier: 'Economy',
        name: 'Share an EV - Economy',
        contractMonths: [1, 3, 6, 12],
        dailyRentEach: 150,
        totalDailyRent: 300,
        depositEach: 12000,
        totalDeposit: 24000,
        weeklySubscriptionEach: 1050,
        totalWeeklySubscription: 2100,
        monthlySubscriptionEach: 4200,
        totalMonthlySubscription: 8400,
        ficoSharePercent: 40,
        description: 'Economy shared EV plan',
      }
    ],
    investment: [
      {
        id: 'inv_demo_1',
        name: '1 Bike Plan',
        tier: 'Economy',
        minInvestment: 50000,
        maxInvestment: 100000,
        monthlyReturnPercent: 2,
        durationMonths: 12,
        profitSharePercent: 50,
        lockInMonths: 3,
        totalReturnPercent: 24,
        earlyExitPenalty: 10,
        startDate: '2026-01-01',
        endDate: '2026-12-31',
        targetAmount: 1000000,
        status: 'active',
        description: 'Investment plan for 1 bike - perfect for small investors',
      },
      {
        id: 'inv_demo_2',
        name: '5 Bike Plan',
        tier: 'Standard',
        minInvestment: 150000,
        maxInvestment: 500000,
        monthlyReturnPercent: 2.5,
        durationMonths: 24,
        profitSharePercent: 50,
        lockInMonths: 6,
        totalReturnPercent: 60,
        earlyExitPenalty: 10,
        startDate: '2026-01-01',
        endDate: '2026-12-31',
        targetAmount: 5000000,
        status: 'active',
        description: 'Investment plan for 5 bikes - medium scale investment',
      }
    ],
    swapStation: [
      {
        id: 'ss_1',
        name: 'Basic Swap Station',
        batteryCount: 10,
        swapPrice: 50,
        monthlySubscription: 500,
        dailySubscription: 20,
        minBatteries: 1,
        maxBatteries: 5,
        profitSharePercent: 50,
        status: 'active',
        description: 'Basic swap station for small operators',
      },
      {
        id: 'ss_2',
        name: 'Premium Swap Station',
        batteryCount: 50,
        swapPrice: 45,
        monthlySubscription: 2000,
        dailySubscription: 80,
        minBatteries: 10,
        maxBatteries: 30,
        profitSharePercent: 55,
        status: 'active',
        description: 'Premium swap station for large operators',
      }
    ],
    riderRequest: [
      {
        id: 'rider_1',
        tier: 'Premium',
        name: 'Premium Rider Plan',
        minRiders: 10,
        maxRiders: 50,
        monthlySubscription: 3000,
        dailySubscription: 150,
        deposit: 5000,
        commissionPercent: 70,
        dailyRideTarget: 15,
        weeklyHoliday: 1,
        status: 'active',
        description: 'Premium rider plan for high volume operators',
      },
      {
        id: 'rider_2',
        tier: 'Standard',
        name: 'Standard Rider Plan',
        minRiders: 5,
        maxRiders: 20,
        monthlySubscription: 1500,
        dailySubscription: 80,
        deposit: 3000,
        commissionPercent: 60,
        dailyRideTarget: 10,
        weeklyHoliday: 1,
        status: 'active',
        description: 'Standard rider plan for medium operators',
      },
      {
        id: 'rider_3',
        tier: 'Economy',
        name: 'Economy Rider Plan',
        minRiders: 1,
        maxRiders: 10,
        monthlySubscription: 500,
        dailySubscription: 30,
        deposit: 1000,
        commissionPercent: 50,
        dailyRideTarget: 5,
        weeklyHoliday: 0,
        status: 'active',
        description: 'Economy rider plan for small operators',
      }
    ],
  },
};

export default function CompanySettingsPage() {
  const [settings, setSettings] = useState<CompanySettings>(initialSettings);
  const [activeTab, setActiveTab] = useState<'general' | 'branding' | 'social' | 'integration' | 'landing' | 'kyc' | 'parts' | 'companyPolicy' | 'plans' | 'investment' | 'swapstation' | 'riderrequest'>('general');
  const [activeMasterTab, setActiveMasterTab] = useState<'investor' | 'merchant' | 'swapstation' | 'rentalType'>('investor');
  const [activeRentalTypeTab, setActiveRentalTypeTab] = useState<'single' | 'shared' | 'renttoown'>('single');
  const [saved, setSaved] = useState(false);
  const [activePlanTab, setActivePlanTab] = useState<'singleRent' | 'rentToOwn' | 'shareEv'>('singleRent');
  const [addDocType, setAddDocType] = useState<'investor' | 'merchant' | 'swapstation' | 'rental' | null>(null);
  const [newDocName, setNewDocName] = useState('');
  const [newDocDesc, setNewDocDesc] = useState('');
  const [activeInvestTab, setActiveInvestTab] = useState(0);
  const [editingPolicy, setEditingPolicy] = useState<{ tab: string; index: number } | null>(null);
  const [editPolicyName, setEditPolicyName] = useState('');
  const [editPolicyDesc, setEditPolicyDesc] = useState('');
  const [editPolicyDescHtml, setEditPolicyDescHtml] = useState('');
  const [showAddPolicy, setShowAddPolicy] = useState(false);
  const [newPolicyName, setNewPolicyName] = useState('');
  const [newPolicyDesc, setNewPolicyDesc] = useState('');
  const [addInvestPlan, setAddInvestPlan] = useState(false);
  const [newInvestName, setNewInvestName] = useState('');
  const [newInvestTier, setNewInvestTier] = useState('Standard');
  const [newInvestStatus, setNewInvestStatus] = useState('active');
  const [newInvestTarget, setNewInvestTarget] = useState(1000000);
  const [newInvestStart, setNewInvestStart] = useState('2026-01-01');
  const [newInvestEnd, setNewInvestEnd] = useState('2026-12-31');
  const [newInvestMin, setNewInvestMin] = useState(10000);
  const [newInvestMax, setNewInvestMax] = useState(100000);
  const [newInvestMonthly, setNewInvestMonthly] = useState(2);
  const [newInvestDuration, setNewInvestDuration] = useState(12);
  const [newInvestLock, setNewInvestLock] = useState(3);
  const [newInvestTotal, setNewInvestTotal] = useState(24);
  const [newInvestPenalty, setNewInvestPenalty] = useState(10);
  const [newInvestDesc, setNewInvestDesc] = useState('');

  const createInvestPlan = () => {
    if (newInvestName.trim() && typeof window !== 'undefined') {
      const ficoShare = settings.plans.singleRent[0]?.ficoSharePercent || 50;
      const newPlan = {
        id: 'inv_' + Date.now(),
        name: newInvestName,
        tier: newInvestTier,
        minInvestment: newInvestMin,
        maxInvestment: newInvestMax,
        monthlyReturnPercent: newInvestMonthly,
        durationMonths: newInvestDuration,
        profitSharePercent: ficoShare,
        lockInMonths: newInvestLock,
        totalReturnPercent: newInvestTotal,
        earlyExitPenalty: newInvestPenalty,
        startDate: newInvestStart,
        endDate: newInvestEnd,
        targetAmount: newInvestTarget,
        status: newInvestStatus,
        description: newInvestDesc
      };
      const updatedPlans = [...settings.plans.investment, newPlan];
      setSettings({ ...settings, plans: { ...settings.plans, investment: updatedPlans } });
      setActiveInvestTab(updatedPlans.length - 1);
      setAddInvestPlan(false);
      setNewInvestName('');
    }
  };

  const [activeSwapTab, setActiveSwapTab] = useState(0);
  const [addSwapStationPlan, setAddSwapStationPlan] = useState(false);
  const [newSwapName, setNewSwapName] = useState('');
  const [newSwapStatus, setNewSwapStatus] = useState('active');
  const [newSwapBatteryCount, setNewSwapBatteryCount] = useState(10);
  const [newSwapPrice, setNewSwapPrice] = useState(50);
  const [newSwapMonthly, setNewSwapMonthly] = useState(500);
  const [newSwapDaily, setNewSwapDaily] = useState(20);
  const [newSwapMin, setNewSwapMin] = useState(1);
  const [newSwapMax, setNewSwapMax] = useState(5);
  const [newSwapProfit, setNewSwapProfit] = useState(50);
  const [newSwapDesc, setNewSwapDesc] = useState('');

  const createSwapStationPlan = () => {
    if (newSwapName.trim() && typeof window !== 'undefined') {
      const newPlan = {
        id: 'ss_' + Date.now(),
        name: newSwapName,
        batteryCount: newSwapBatteryCount,
        swapPrice: newSwapPrice,
        monthlySubscription: newSwapMonthly,
        dailySubscription: newSwapDaily,
        minBatteries: newSwapMin,
        maxBatteries: newSwapMax,
        profitSharePercent: newSwapProfit,
        status: newSwapStatus,
        description: newSwapDesc
      };
      const updatedPlans = [...settings.plans.swapStation, newPlan];
      setSettings({ ...settings, plans: { ...settings.plans, swapStation: updatedPlans } });
      setActiveSwapTab(updatedPlans.length - 1);
      setAddSwapStationPlan(false);
      setNewSwapName('');
    }
  };
  const [activeRiderTab, setActiveRiderTab] = useState(0);
  const [addRiderPlan, setAddRiderPlan] = useState(false);
  const [newRiderName, setNewRiderName] = useState('');
  const [newRiderTier, setNewRiderTier] = useState('Standard');
  const [newRiderStatus, setNewRiderStatus] = useState('active');
  const [newRiderMin, setNewRiderMin] = useState(1);
  const [newRiderMax, setNewRiderMax] = useState(10);
  const [newRiderMonthly, setNewRiderMonthly] = useState(500);
  const [newRiderDaily, setNewRiderDaily] = useState(30);
  const [newRiderDeposit, setNewRiderDeposit] = useState(1000);
  const [newRiderCommission, setNewRiderCommission] = useState(50);
  const [newRiderTarget, setNewRiderTarget] = useState(5);
  const [newRiderHoliday, setNewRiderHoliday] = useState(0);
  const [newRiderDesc, setNewRiderDesc] = useState('');
  const createRiderPlan = () => {
    if (newRiderName.trim() && typeof window !== 'undefined') {
      const newPlan = {
        id: 'rider_' + Date.now(),
        name: newRiderName,
        tier: newRiderTier,
        minRiders: newRiderMin,
        maxRiders: newRiderMax,
        monthlySubscription: newRiderMonthly,
        dailySubscription: newRiderDaily,
        deposit: newRiderDeposit,
        commissionPercent: newRiderCommission,
        dailyRideTarget: newRiderTarget,
        weeklyHoliday: newRiderHoliday,
        status: newRiderStatus,
        description: newRiderDesc
      };
      const updatedPlans = [...settings.plans.riderRequest, newPlan];
      setSettings({ ...settings, plans: { ...settings.plans, riderRequest: updatedPlans } });
      setActiveRiderTab(updatedPlans.length - 1);
      setAddRiderPlan(false);
      setNewRiderName('');
    }
  };
  const handleSave = () => {
    setSaved(true);
    setTimeout(() => setSaved(false), 2000);
  };

  const addPolicyRule = (tab: 'investor' | 'merchant' | 'swapstation') => {
    if (!newPolicyName.trim()) return;
    const newRule = { title: newPolicyName, description: newPolicyDesc || '<p></p>' };
    if (tab === 'investor') {
      setSettings({ ...settings, companyPolicy: { ...settings.companyPolicy, investor: [...settings.companyPolicy.investor, newRule] } });
    } else if (tab === 'merchant') {
      setSettings({ ...settings, companyPolicy: { ...settings.companyPolicy, merchant: [...settings.companyPolicy.merchant, newRule] } });
    } else if (tab === 'swapstation') {
      setSettings({ ...settings, companyPolicy: { ...settings.companyPolicy, swapStation: [...settings.companyPolicy.swapStation, newRule] } });
    }
    setNewPolicyName('');
    setNewPolicyDesc('');
    setShowAddPolicy(false);
  };

  const deletePolicyRule = (tab: 'investor' | 'merchant' | 'swapstation', index: number) => {
    if (tab === 'investor') {
      const newRules = settings.companyPolicy.investor.filter((_, i) => i !== index);
      setSettings({ ...settings, companyPolicy: { ...settings.companyPolicy, investor: newRules } });
    } else if (tab === 'merchant') {
      const newRules = settings.companyPolicy.merchant.filter((_, i) => i !== index);
      setSettings({ ...settings, companyPolicy: { ...settings.companyPolicy, merchant: newRules } });
    } else if (tab === 'swapstation') {
      const newRules = settings.companyPolicy.swapStation.filter((_, i) => i !== index);
      setSettings({ ...settings, companyPolicy: { ...settings.companyPolicy, swapStation: newRules } });
    }
  };

  const updatePolicyRule = (tab: 'investor' | 'merchant' | 'swapstation', index: number) => {
    const newDesc = editPolicyDescHtml || editPolicyDesc;
    if (tab === 'investor') {
      const newRules = [...settings.companyPolicy.investor];
      newRules[index] = { title: editPolicyName, description: newDesc };
      setSettings({ ...settings, companyPolicy: { ...settings.companyPolicy, investor: newRules } });
    } else if (tab === 'merchant') {
      const newRules = [...settings.companyPolicy.merchant];
      newRules[index] = { title: editPolicyName, description: newDesc };
      setSettings({ ...settings, companyPolicy: { ...settings.companyPolicy, merchant: newRules } });
    } else if (tab === 'swapstation') {
      const newRules = [...settings.companyPolicy.swapStation];
      newRules[index] = { title: editPolicyName, description: newDesc };
      setSettings({ ...settings, companyPolicy: { ...settings.companyPolicy, swapStation: newRules } });
    }
    setEditingPolicy(null);
  };

  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: 'companyPolicy', label: "Company's Policy", icon: FileCheck },
    { id: 'kyc', label: 'KYC Documents', icon: Package },

    { id: 'plans', label: 'Plan Selection', icon: Package },
    { id: 'investment', label: 'Investment Plan', icon: DollarSign },
    { id: 'swapstation', label: 'Swap Station Plan (P3)', icon: Zap },
    { id: 'riderrequest', label: 'Rider Request Plan (P2)', icon: Users },
    { id: 'parts', label: 'EV Parts', icon: Package },

  ];

  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 === 'kyc' && (
            <div className="p-6 space-y-6">
              <h3 className="text-lg font-semibold text-slate-800">KYC Documents</h3>

              <div className="flex flex-wrap gap-2 border-b border-slate-200 pb-2">
                {[
                  { id: 'investor', label: 'Investor' },
                  { id: 'merchant', label: 'Merchant' },
                  { id: 'swapstation', label: 'Swap Station' },
                  { id: 'rentalType', label: 'Rental Types' },
                ].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 === '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
                    onClick={() => setAddDocType('investor')}
                    className="mt-4 text-sm text-accent hover:underline"
                  >
                    + Add Document
                  </button>
                  {addDocType === 'investor' && (
                    <div className="mt-3 p-3 bg-slate-50 rounded-lg border border-slate-200">
                      <input
                        type="text"
                        placeholder="Document name"
                        value={newDocName}
                        onChange={(e) => setNewDocName(e.target.value)}
                        className="w-full px-3 py-2 border border-slate-200 rounded-lg text-sm mb-2"
                      />
                      <input
                        type="text"
                        placeholder="Description"
                        value={newDocDesc}
                        onChange={(e) => setNewDocDesc(e.target.value)}
                        className="w-full px-3 py-2 border border-slate-200 rounded-lg text-sm mb-2"
                      />
                      <div className="flex gap-2">
                        <button
                          onClick={() => {
                            if (newDocName.trim()) {
                              const updated = [...settings.masterData.investorDocuments, {
                                id: `inv_${Date.now()}`,
                                name: newDocName,
                                required: false,
                                description: newDocDesc || ''
                              }];
                              setSettings({ ...settings, masterData: { ...settings.masterData, investorDocuments: updated } });
                              setNewDocName('');
                              setNewDocDesc('');
                              setAddDocType(null);
                            }
                          }}
                          className="px-3 py-1.5 bg-accent text-white text-sm rounded-lg"
                        >
                          Add
                        </button>
                        <button
                          onClick={() => {
                            setAddDocType(null);
                            setNewDocName('');
                            setNewDocDesc('');
                          }}
                          className="px-3 py-1.5 border border-slate-200 text-slate-600 text-sm rounded-lg"
                        >
                          Cancel
                        </button>
                      </div>
                    </div>
                  )}
                </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
                    onClick={() => setAddDocType('merchant')}
                    className="mt-4 text-sm text-accent hover:underline"
                  >
                    + Add Document
                  </button>
                  {addDocType === 'merchant' && (
                    <div className="mt-3 p-3 bg-slate-50 rounded-lg border border-slate-200">
                      <input
                        type="text"
                        placeholder="Document name"
                        value={newDocName}
                        onChange={(e) => setNewDocName(e.target.value)}
                        className="w-full px-3 py-2 border border-slate-200 rounded-lg text-sm mb-2"
                      />
                      <input
                        type="text"
                        placeholder="Description"
                        value={newDocDesc}
                        onChange={(e) => setNewDocDesc(e.target.value)}
                        className="w-full px-3 py-2 border border-slate-200 rounded-lg text-sm mb-2"
                      />
                      <div className="flex gap-2">
                        <button
                          onClick={() => {
                            if (newDocName.trim()) {
                              const updated = [...settings.masterData.merchantDocuments, {
                                id: `mer_${Date.now()}`,
                                name: newDocName,
                                required: false,
                                description: newDocDesc || ''
                              }];
                              setSettings({ ...settings, masterData: { ...settings.masterData, merchantDocuments: updated } });
                              setNewDocName('');
                              setNewDocDesc('');
                              setAddDocType(null);
                            }
                          }}
                          className="px-3 py-1.5 bg-accent text-white text-sm rounded-lg"
                        >
                          Add
                        </button>
                        <button
                          onClick={() => {
                            setAddDocType(null);
                            setNewDocName('');
                            setNewDocDesc('');
                          }}
                          className="px-3 py-1.5 border border-slate-200 text-slate-600 text-sm rounded-lg"
                        >
                          Cancel
                        </button>
                      </div>
                    </div>
                  )}
                </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
                    onClick={() => setAddDocType('swapstation')}
                    className="mt-4 text-sm text-accent hover:underline"
                  >
                    + Add Document
                  </button>
                  {addDocType === 'swapstation' && (
                    <div className="mt-3 p-3 bg-slate-50 rounded-lg border border-slate-200">
                      <input
                        type="text"
                        placeholder="Document name"
                        value={newDocName}
                        onChange={(e) => setNewDocName(e.target.value)}
                        className="w-full px-3 py-2 border border-slate-200 rounded-lg text-sm mb-2"
                      />
                      <input
                        type="text"
                        placeholder="Description"
                        value={newDocDesc}
                        onChange={(e) => setNewDocDesc(e.target.value)}
                        className="w-full px-3 py-2 border border-slate-200 rounded-lg text-sm mb-2"
                      />
                      <div className="flex gap-2">
                        <button
                          onClick={() => {
                            if (newDocName.trim()) {
                              const updated = [...settings.masterData.swapStationDocuments, {
                                id: `ss_${Date.now()}`,
                                name: newDocName,
                                required: false,
                                description: newDocDesc || ''
                              }];
                              setSettings({ ...settings, masterData: { ...settings.masterData, swapStationDocuments: updated } });
                              setNewDocName('');
                              setNewDocDesc('');
                              setAddDocType(null);
                            }
                          }}
                          className="px-3 py-1.5 bg-accent text-white text-sm rounded-lg"
                        >
                          Add
                        </button>
                        <button
                          onClick={() => {
                            setAddDocType(null);
                            setNewDocName('');
                            setNewDocDesc('');
                          }}
                          className="px-3 py-1.5 border border-slate-200 text-slate-600 text-sm rounded-lg"
                        >
                          Cancel
                        </button>
                      </div>
                    </div>
                  )}
                </div>
              )}

              {activeMasterTab === 'rentalType' && (
                <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>
                      <button
                        onClick={() => setAddDocType('rental')}
                        className="mt-3 text-sm text-accent hover:underline"
                      >
                        + Add Document
                      </button>
                      {addDocType === 'rental' && (
                        <div className="mt-3 p-3 bg-slate-50 rounded-lg border border-slate-200">
                          <input
                            type="text"
                            placeholder="Document name"
                            value={newDocName}
                            onChange={(e) => setNewDocName(e.target.value)}
                            className="w-full px-3 py-2 border border-slate-200 rounded-lg text-sm mb-2"
                          />
                          <input
                            type="text"
                            placeholder="Description"
                            value={newDocDesc}
                            onChange={(e) => setNewDocDesc(e.target.value)}
                            className="w-full px-3 py-2 border border-slate-200 rounded-lg text-sm mb-2"
                          />
                          <div className="flex gap-2">
                            <button
                              onClick={() => {
                                if (newDocName.trim()) {
                                  const updated = [...settings.masterData.rentalDocuments];
                                  updated.forEach((rental) => {
                                    rental.documents.push({
                                      id: `rent_${Date.now()}`,
                                      name: newDocName,
                                      required: false,
                                      description: newDocDesc || ''
                                    });
                                  });
                                  setSettings({ ...settings, masterData: { ...settings.masterData, rentalDocuments: updated } });
                                  setNewDocName('');
                                  setNewDocDesc('');
                                  setAddDocType(null);
                                }
                              }}
                              className="px-3 py-1.5 bg-accent text-white text-sm rounded-lg"
                            >
                              Add to All
                            </button>
                            <button
                              onClick={() => {
                                setAddDocType(null);
                                setNewDocName('');
                                setNewDocDesc('');
                              }}
                              className="px-3 py-1.5 border border-slate-200 text-slate-600 text-sm rounded-lg"
                            >
                              Cancel
                            </button>
                          </div>
                        </div>
                      )}
                    </div>
                  ))}
                </div>
              )}
            </div>
          )}

          {activeTab === 'parts' && (
            <div className="p-6 space-y-6">
              <div className="flex items-center justify-between">
                <h3 className="text-lg font-semibold text-slate-800">EV Parts</h3>
                <button onClick={() => setShowAddPolicy(true)} className="text-xs text-blue-600 hover:text-blue-700 flex items-center gap-1">
                  <Plus className="w-3 h-3" /> Add Part
                </button>
              </div>

              {showAddPolicy && activeTab === 'parts' && (
                <div className="p-3 bg-white rounded-lg border border-blue-200">
                  <input type="text" value={newPolicyName} onChange={(e) => setNewPolicyName(e.target.value)} className="w-full px-2 py-1.5 border border-slate-200 rounded text-sm mb-2" placeholder="Part Name" />
                  <div className="grid grid-cols-2 gap-2 mb-2">
                    <input type="number" value={newPolicyDesc} onChange={(e) => setNewPolicyDesc(e.target.value)} className="px-2 py-1.5 border border-slate-200 rounded text-sm" placeholder="Buying Price" />
                    <input type="number" value={editPolicyDescHtml} onChange={(e) => setEditPolicyDescHtml(e.target.value)} className="px-2 py-1.5 border border-slate-200 rounded text-sm" placeholder="Selling Price" />
                  </div>
                  <div className="flex gap-2">
                    <button onClick={() => {
                      if (!newPolicyName.trim()) return;
                      const newId = 'PRT-' + String(settings.parts.length + 1).padStart(3, '0');
                      setSettings({ ...settings, parts: [...settings.parts, { id: newId, name: newPolicyName, buyingPrice: Number(newPolicyDesc), sellingPrice: Number(editPolicyDescHtml) }] });
                      setNewPolicyName('');
                      setNewPolicyDesc('');
                      setEditPolicyDescHtml('');
                      setShowAddPolicy(false);
                    }} className="px-3 py-1.5 bg-blue-600 text-white rounded text-sm">Add</button>
                    <button onClick={() => { setNewPolicyName(''); setNewPolicyDesc(''); setEditPolicyDescHtml(''); setShowAddPolicy(false); }} className="px-3 py-1.5 bg-slate-200 text-slate-600 rounded text-sm">Cancel</button>
                  </div>
                </div>
              )}

              <div className="space-y-2">
                {settings.parts.map((part, i) => (
                  <div key={part.id} className="p-3 bg-slate-50 rounded-lg border border-slate-200">
                    {editingPolicy?.tab === 'parts' && editingPolicy?.index === i ? (
                      <div className="space-y-2">
                        <input type="text" value={editPolicyName} onChange={(e) => setEditPolicyName(e.target.value)} className="w-full px-2 py-1.5 border border-slate-200 rounded text-sm" placeholder="Part Name" />
                        <div className="grid grid-cols-2 gap-2">
                          <input type="number" value={editPolicyDesc} onChange={(e) => setEditPolicyDesc(e.target.value)} className="px-2 py-1.5 border border-slate-200 rounded text-sm" placeholder="Buying Price" />
                          <input type="number" value={newPolicyName} onChange={(e) => setNewPolicyName(e.target.value)} className="px-2 py-1.5 border border-slate-200 rounded text-sm" placeholder="Selling Price" />
                        </div>
                        <div className="flex gap-2">
                          <button onClick={() => {
                            const updated = [...settings.parts];
                            updated[i] = { ...part, name: editPolicyName, buyingPrice: Number(editPolicyDesc), sellingPrice: Number(newPolicyName) };
                            setSettings({ ...settings, parts: updated });
                            setEditingPolicy(null);
                            setEditPolicyName('');
                            setEditPolicyDesc('');
                            setNewPolicyName('');
                          }} className="px-2 py-1 bg-blue-600 text-white rounded text-xs">Save</button>
                          <button onClick={() => { setEditingPolicy(null); setEditPolicyName(''); setEditPolicyDesc(''); setNewPolicyName(''); }} className="px-2 py-1 bg-slate-200 text-slate-600 rounded text-xs">Cancel</button>
                        </div>
                      </div>
                    ) : (
                      <div className="flex items-center justify-between">
                        <div className="flex-1">
                          <div className="flex items-center gap-2">
                            <span className="text-sm font-medium text-slate-700">{part.name}</span>
                            <span className="text-xs text-slate-400">({part.id})</span>
                          </div>
                          <div className="flex items-center gap-4 mt-1">
                            <span className="text-xs text-slate-500">Buying: <span className="text-green-600">৳{part.buyingPrice}</span></span>
                            <span className="text-xs text-slate-500">Selling: <span className="text-amber-600">৳{part.sellingPrice}</span></span>
                          </div>
                        </div>
                        <div className="flex items-center gap-1 ml-2">
                          <button onClick={() => { setEditingPolicy({ tab: 'parts', index: i }); setEditPolicyName(part.name); setEditPolicyDesc(String(part.buyingPrice)); setNewPolicyName(String(part.sellingPrice)); }} className="p-1 text-slate-400 hover:text-blue-600">
                            <Pencil className="w-3.5 h-3.5" />
                          </button>
                          <button onClick={() => {
                            const updated = settings.parts.filter((_, idx) => idx !== i);
                            setSettings({ ...settings, parts: updated });
                          }} className="p-1 text-slate-400 hover:text-red-600">
                            <Trash2 className="w-3.5 h-3.5" />
                          </button>
                        </div>
                      </div>
                    )}
                  </div>
                ))}
              </div>
            </div>
          )}

          {activeTab === 'companyPolicy' && (
            <div className="p-6 space-y-6">
              <h3 className="text-lg font-semibold text-slate-800">Company's Policy</h3>

              <div className="flex gap-2 border-b border-slate-200">
                <button onClick={() => setActiveMasterTab('investor')} className={`px-4 py-2 text-sm font-medium border-b-2 -mb-px ${activeMasterTab === 'investor' ? 'border-blue-500 text-blue-600' : 'border-transparent text-slate-500 hover:text-slate-700'}`}>Investor</button>
                <button onClick={() => setActiveMasterTab('merchant')} className={`px-4 py-2 text-sm font-medium border-b-2 -mb-px ${activeMasterTab === 'merchant' ? 'border-blue-500 text-blue-600' : 'border-transparent text-slate-500 hover:text-slate-700'}`}>Merchant</button>
                <button onClick={() => setActiveMasterTab('swapstation')} className={`px-4 py-2 text-sm font-medium border-b-2 -mb-px ${activeMasterTab === 'swapstation' ? 'border-blue-500 text-blue-600' : 'border-transparent text-slate-500 hover:text-slate-700'}`}>Swap Station</button>
                <button onClick={() => setActiveMasterTab('rentalType')} className={`px-4 py-2 text-sm font-medium border-b-2 -mb-px ${activeMasterTab === 'rentalType' ? 'border-blue-500 text-blue-600' : 'border-transparent text-slate-500 hover:text-slate-700'}`}>Rental Types</button>
              </div>

              {activeMasterTab === 'investor' && (
                <div className="space-y-4">
                  <div className="flex items-center justify-between mb-2">
                    <label className="text-sm text-slate-600 font-medium">Policy List</label>
                    <button onClick={() => setShowAddPolicy(true)} className="text-xs text-blue-600 hover:text-blue-700 flex items-center gap-1">
                      <Plus className="w-3 h-3" /> Add Policy
                    </button>
                  </div>
                  {showAddPolicy && (
                    <div className="p-3 bg-white rounded-lg border border-blue-200">
                      <input type="text" value={newPolicyName} onChange={(e) => setNewPolicyName(e.target.value)} className="w-full px-2 py-1.5 border border-slate-200 rounded text-sm mb-2" placeholder="Policy Title" />
                      <RichTextEditor value={newPolicyDesc} onChange={(val) => setNewPolicyDesc(val)} placeholder="Policy Description..." minHeight={100} />
                      <div className="flex gap-2 mt-2">
                        <button onClick={() => {
                          if (!newPolicyName.trim()) return;
                          setSettings({ ...settings, companyPolicy: { ...settings.companyPolicy, investor: [...settings.companyPolicy.investor, { title: newPolicyName, description: newPolicyDesc }] } });
                          setNewPolicyName('');
                          setNewPolicyDesc('');
                          setShowAddPolicy(false);
                        }} className="px-2 py-1 bg-blue-600 text-white rounded text-xs">Add</button>
                        <button onClick={() => { setShowAddPolicy(false); setNewPolicyName(''); setNewPolicyDesc(''); }} className="px-2 py-1 bg-slate-200 text-slate-600 rounded text-xs">Cancel</button>
                      </div>
                    </div>
                  )}
                  <div className="space-y-2">
                    {(settings.companyPolicy?.investor || []).map((policy, i) => (
                      <div key={i} className="p-3 bg-slate-50 rounded-lg border border-slate-200">
                        {editingPolicy?.tab === 'investor' && editingPolicy?.index === i ? (
                          <div className="space-y-2">
                            <input type="text" value={editPolicyName} onChange={(e) => setEditPolicyName(e.target.value)} className="w-full px-2 py-1.5 border border-slate-200 rounded text-sm" placeholder="Policy Title" />
                            <RichTextEditor value={editPolicyDescHtml} onChange={(val) => setEditPolicyDescHtml(val)} placeholder="Policy Description..." minHeight={100} />
                            <div className="flex gap-2">
                              <button onClick={() => {
                                const updated = [...settings.companyPolicy.investor];
                                updated[i] = { title: editPolicyName, description: editPolicyDescHtml };
                                setSettings({ ...settings, companyPolicy: { ...settings.companyPolicy, investor: updated } });
                                setEditingPolicy(null);
                                setEditPolicyDescHtml('');
                              }} className="px-2 py-1 bg-blue-600 text-white rounded text-xs">Save</button>
                              <button onClick={() => { setEditingPolicy(null); setEditPolicyDescHtml(''); }} className="px-2 py-1 bg-slate-200 text-slate-600 rounded text-xs">Cancel</button>
                            </div>
                          </div>
                        ) : (
                          <div className="flex items-start justify-between">
                            <div className="flex-1">
                              <div className="flex items-center gap-2">
                                <span className="text-sm font-medium text-slate-700">{policy.title}</span>
                              </div>
                              <div className="text-xs text-slate-500 mt-1 prose prose-sm max-w-none" dangerouslySetInnerHTML={{ __html: policy.description }} />
                            </div>
                            <div className="flex items-center gap-1 ml-2">
                              <button onClick={() => { setEditingPolicy({ tab: 'investor', index: i }); setEditPolicyName(policy.title); setEditPolicyDescHtml(policy.description); }} className="p-1 text-slate-400 hover:text-blue-600">
                                <Pencil className="w-3.5 h-3.5" />
                              </button>
                              <button onClick={() => {
                                const updated = settings.companyPolicy.investor.filter((_, idx) => idx !== i);
                                setSettings({ ...settings, companyPolicy: { ...settings.companyPolicy, investor: updated } });
                              }} className="p-1 text-slate-400 hover:text-red-600">
                                <Trash2 className="w-3.5 h-3.5" />
                              </button>
                            </div>
                          </div>
                        )}
                      </div>
                    ))}
                  </div>
                </div>
              )}

              {activeMasterTab === 'merchant' && (
                <div className="space-y-4">
                  <div className="flex items-center justify-between mb-2">
                    <label className="text-sm text-slate-600 font-medium">Policy List</label>
                    <button onClick={() => setShowAddPolicy(true)} className="text-xs text-blue-600 hover:text-blue-700 flex items-center gap-1">
                      <Plus className="w-3 h-3" /> Add Policy
                    </button>
                  </div>
                  {showAddPolicy && (
                    <div className="p-3 bg-white rounded-lg border border-blue-200">
                      <input type="text" value={newPolicyName} onChange={(e) => setNewPolicyName(e.target.value)} className="w-full px-2 py-1.5 border border-slate-200 rounded text-sm mb-2" placeholder="Policy Title" />
                      <RichTextEditor value={newPolicyDesc} onChange={(val) => setNewPolicyDesc(val)} placeholder="Policy Description..." minHeight={100} />
                      <div className="flex gap-2 mt-2">
                        <button onClick={() => {
                          if (!newPolicyName.trim()) return;
                          setSettings({ ...settings, companyPolicy: { ...settings.companyPolicy, merchant: [...settings.companyPolicy.merchant, { title: newPolicyName, description: newPolicyDesc }] } });
                          setNewPolicyName('');
                          setNewPolicyDesc('');
                          setShowAddPolicy(false);
                        }} className="px-2 py-1 bg-blue-600 text-white rounded text-xs">Add</button>
                        <button onClick={() => { setShowAddPolicy(false); setNewPolicyName(''); setNewPolicyDesc(''); }} className="px-2 py-1 bg-slate-200 text-slate-600 rounded text-xs">Cancel</button>
                      </div>
                    </div>
                  )}
                  <div className="space-y-2">
                    {(settings.companyPolicy?.merchant || []).map((policy, i) => (
                      <div key={i} className="p-3 bg-slate-50 rounded-lg border border-slate-200">
                        {editingPolicy?.tab === 'merchant' && editingPolicy?.index === i ? (
                          <div className="space-y-2">
                            <input type="text" value={editPolicyName} onChange={(e) => setEditPolicyName(e.target.value)} className="w-full px-2 py-1.5 border border-slate-200 rounded text-sm" placeholder="Policy Title" />
                            <RichTextEditor value={editPolicyDescHtml} onChange={(val) => setEditPolicyDescHtml(val)} placeholder="Policy Description..." minHeight={100} />
                            <div className="flex gap-2">
                              <button onClick={() => {
                                const updated = [...settings.companyPolicy.merchant];
                                updated[i] = { title: editPolicyName, description: editPolicyDescHtml };
                                setSettings({ ...settings, companyPolicy: { ...settings.companyPolicy, merchant: updated } });
                                setEditingPolicy(null);
                                setEditPolicyDescHtml('');
                              }} className="px-2 py-1 bg-blue-600 text-white rounded text-xs">Save</button>
                              <button onClick={() => { setEditingPolicy(null); setEditPolicyDescHtml(''); }} className="px-2 py-1 bg-slate-200 text-slate-600 rounded text-xs">Cancel</button>
                            </div>
                          </div>
                        ) : (
                          <div className="flex items-start justify-between">
                            <div className="flex-1">
                              <div className="flex items-center gap-2">
                                <span className="text-sm font-medium text-slate-700">{policy.title}</span>
                              </div>
                              <div className="text-xs text-slate-500 mt-1 prose prose-sm max-w-none" dangerouslySetInnerHTML={{ __html: policy.description }} />
                            </div>
                            <div className="flex items-center gap-1 ml-2">
                              <button onClick={() => { setEditingPolicy({ tab: 'merchant', index: i }); setEditPolicyName(policy.title); setEditPolicyDescHtml(policy.description); }} className="p-1 text-slate-400 hover:text-blue-600">
                                <Pencil className="w-3.5 h-3.5" />
                              </button>
                              <button onClick={() => {
                                const updated = settings.companyPolicy.merchant.filter((_, idx) => idx !== i);
                                setSettings({ ...settings, companyPolicy: { ...settings.companyPolicy, merchant: updated } });
                              }} className="p-1 text-slate-400 hover:text-red-600">
                                <Trash2 className="w-3.5 h-3.5" />
                              </button>
                            </div>
                          </div>
                        )}
                      </div>
                    ))}
                  </div>
                </div>
              )}

              {activeMasterTab === 'swapstation' && (
                <div className="space-y-4">
                  <div className="flex items-center justify-between mb-2">
                    <label className="text-sm text-slate-600 font-medium">Policy List</label>
                    <button onClick={() => setShowAddPolicy(true)} className="text-xs text-blue-600 hover:text-blue-700 flex items-center gap-1">
                      <Plus className="w-3 h-3" /> Add Policy
                    </button>
                  </div>
                  {showAddPolicy && (
                    <div className="p-3 bg-white rounded-lg border border-blue-200">
                      <input type="text" value={newPolicyName} onChange={(e) => setNewPolicyName(e.target.value)} className="w-full px-2 py-1.5 border border-slate-200 rounded text-sm mb-2" placeholder="Policy Title" />
                      <RichTextEditor value={newPolicyDesc} onChange={(val) => setNewPolicyDesc(val)} placeholder="Policy Description..." minHeight={100} />
                      <div className="flex gap-2 mt-2">
                        <button onClick={() => {
                          if (!newPolicyName.trim()) return;
                          setSettings({ ...settings, companyPolicy: { ...settings.companyPolicy, swapStation: [...settings.companyPolicy.swapStation, { title: newPolicyName, description: newPolicyDesc }] } });
                          setNewPolicyName('');
                          setNewPolicyDesc('');
                          setShowAddPolicy(false);
                        }} className="px-2 py-1 bg-blue-600 text-white rounded text-xs">Add</button>
                        <button onClick={() => { setShowAddPolicy(false); setNewPolicyName(''); setNewPolicyDesc(''); }} className="px-2 py-1 bg-slate-200 text-slate-600 rounded text-xs">Cancel</button>
                      </div>
                    </div>
                  )}
                  <div className="space-y-2">
                    {(settings.companyPolicy?.swapStation || []).map((policy, i) => (
                      <div key={i} className="p-3 bg-slate-50 rounded-lg border border-slate-200">
                        {editingPolicy?.tab === 'swapstation' && editingPolicy?.index === i ? (
                          <div className="space-y-2">
                            <input type="text" value={editPolicyName} onChange={(e) => setEditPolicyName(e.target.value)} className="w-full px-2 py-1.5 border border-slate-200 rounded text-sm" placeholder="Policy Title" />
                            <RichTextEditor value={editPolicyDescHtml} onChange={(val) => setEditPolicyDescHtml(val)} placeholder="Policy Description..." minHeight={100} />
                            <div className="flex gap-2">
                              <button onClick={() => {
                                const updated = [...settings.companyPolicy.swapStation];
                                updated[i] = { title: editPolicyName, description: editPolicyDescHtml };
                                setSettings({ ...settings, companyPolicy: { ...settings.companyPolicy, swapStation: updated } });
                                setEditingPolicy(null);
                                setEditPolicyDescHtml('');
                              }} className="px-2 py-1 bg-blue-600 text-white rounded text-xs">Save</button>
                              <button onClick={() => { setEditingPolicy(null); setEditPolicyDescHtml(''); }} className="px-2 py-1 bg-slate-200 text-slate-600 rounded text-xs">Cancel</button>
                            </div>
                          </div>
                        ) : (
                          <div className="flex items-start justify-between">
                            <div className="flex-1">
                              <div className="flex items-center gap-2">
                                <span className="text-sm font-medium text-slate-700">{policy.title}</span>
                              </div>
                              <div className="text-xs text-slate-500 mt-1 prose prose-sm max-w-none" dangerouslySetInnerHTML={{ __html: policy.description }} />
                            </div>
                            <div className="flex items-center gap-1 ml-2">
                              <button onClick={() => { setEditingPolicy({ tab: 'swapstation', index: i }); setEditPolicyName(policy.title); setEditPolicyDescHtml(policy.description); }} className="p-1 text-slate-400 hover:text-blue-600">
                                <Pencil className="w-3.5 h-3.5" />
                              </button>
                              <button onClick={() => {
                                const updated = settings.companyPolicy.swapStation.filter((_, idx) => idx !== i);
                                setSettings({ ...settings, companyPolicy: { ...settings.companyPolicy, swapStation: updated } });
                              }} className="p-1 text-slate-400 hover:text-red-600">
                                <Trash2 className="w-3.5 h-3.5" />
                              </button>
                            </div>
                          </div>
                        )}
                      </div>
                    ))}
                  </div>
                </div>
              )}

              {activeMasterTab === 'rentalType' && (
                <div className="space-y-4">
                  <div className="flex gap-2 border-b border-slate-200">
                    <button onClick={() => setActiveRentalTypeTab('single')} className={`px-4 py-2 text-sm font-medium border-b-2 -mb-px ${activeRentalTypeTab === 'single' ? 'border-blue-500 text-blue-600' : 'border-transparent text-slate-500 hover:text-slate-700'}`}>Rental (Single)</button>
                    <button onClick={() => setActiveRentalTypeTab('shared')} className={`px-4 py-2 text-sm font-medium border-b-2 -mb-px ${activeRentalTypeTab === 'shared' ? 'border-blue-500 text-blue-600' : 'border-transparent text-slate-500 hover:text-slate-700'}`}>Rental (2 Person Shared)</button>
                    <button onClick={() => setActiveRentalTypeTab('renttoown')} className={`px-4 py-2 text-sm font-medium border-b-2 -mb-px ${activeRentalTypeTab === 'renttoown' ? 'border-blue-500 text-blue-600' : 'border-transparent text-slate-500 hover:text-slate-700'}`}>Rent-to-Own</button>
                  </div>

                  <div className="flex items-center justify-between mb-2">
                    <label className="text-sm text-slate-600 font-medium">Policy List</label>
                    <button onClick={() => setShowAddPolicy(true)} className="text-xs text-blue-600 hover:text-blue-700 flex items-center gap-1">
                      <Plus className="w-3 h-3" /> Add Policy
                    </button>
                  </div>
                  {showAddPolicy && (
                    <div className="p-3 bg-white rounded-lg border border-blue-200">
                      <input type="text" value={newPolicyName} onChange={(e) => setNewPolicyName(e.target.value)} className="w-full px-2 py-1.5 border border-slate-200 rounded text-sm mb-2" placeholder="Policy Title" />
                      <RichTextEditor value={newPolicyDesc} onChange={(val) => setNewPolicyDesc(val)} placeholder="Policy Description..." minHeight={100} />
                      <div className="flex gap-2 mt-2">
                        <button onClick={() => {
                          if (!newPolicyName.trim()) return;
                          const updated = { ...settings.companyPolicy.rentalTypes };
                          updated[activeRentalTypeTab] = [...updated[activeRentalTypeTab], { title: newPolicyName, description: newPolicyDesc }];
                          setSettings({ ...settings, companyPolicy: { ...settings.companyPolicy, rentalTypes: updated } });
                          setNewPolicyName('');
                          setNewPolicyDesc('');
                          setShowAddPolicy(false);
                        }} className="px-2 py-1 bg-blue-600 text-white rounded text-xs">Add</button>
                        <button onClick={() => { setShowAddPolicy(false); setNewPolicyName(''); setNewPolicyDesc(''); }} className="px-2 py-1 bg-slate-200 text-slate-600 rounded text-xs">Cancel</button>
                      </div>
                    </div>
                  )}
                  <div className="space-y-2">
                    {(settings.companyPolicy?.rentalTypes[activeRentalTypeTab] || []).map((policy, i) => (
                      <div key={i} className="p-3 bg-slate-50 rounded-lg border border-slate-200">
                        {editingPolicy?.tab === 'rentalType' && editingPolicy?.index === i ? (
                          <div className="space-y-2">
                            <input type="text" value={editPolicyName} onChange={(e) => setEditPolicyName(e.target.value)} className="w-full px-2 py-1.5 border border-slate-200 rounded text-sm" placeholder="Policy Title" />
                            <RichTextEditor value={editPolicyDescHtml} onChange={(val) => setEditPolicyDescHtml(val)} placeholder="Policy Description..." minHeight={100} />
                            <div className="flex gap-2">
                              <button onClick={() => {
                                const updated = { ...settings.companyPolicy.rentalTypes };
                                updated[activeRentalTypeTab][i] = { title: editPolicyName, description: editPolicyDescHtml };
                                setSettings({ ...settings, companyPolicy: { ...settings.companyPolicy, rentalTypes: updated } });
                                setEditingPolicy(null);
                                setEditPolicyDescHtml('');
                              }} className="px-2 py-1 bg-blue-600 text-white rounded text-xs">Save</button>
                              <button onClick={() => { setEditingPolicy(null); setEditPolicyDescHtml(''); }} className="px-2 py-1 bg-slate-200 text-slate-600 rounded text-xs">Cancel</button>
                            </div>
                          </div>
                        ) : (
                          <div className="flex items-start justify-between">
                            <div className="flex-1">
                              <div className="flex items-center gap-2">
                                <span className="text-sm font-medium text-slate-700">{policy.title}</span>
                              </div>
                              <div className="text-xs text-slate-500 mt-1 prose prose-sm max-w-none" dangerouslySetInnerHTML={{ __html: policy.description }} />
                            </div>
                            <div className="flex items-center gap-1 ml-2">
                              <button onClick={() => { setEditingPolicy({ tab: 'rentalType', index: i }); setEditPolicyName(policy.title); setEditPolicyDescHtml(policy.description); }} className="p-1 text-slate-400 hover:text-blue-600">
                                <Pencil className="w-3.5 h-3.5" />
                              </button>
                              <button onClick={() => {
                                const updated = { ...settings.companyPolicy.rentalTypes };
                                updated[activeRentalTypeTab] = updated[activeRentalTypeTab].filter((_, idx) => idx !== i);
                                setSettings({ ...settings, companyPolicy: { ...settings.companyPolicy, rentalTypes: updated } });
                              }} className="p-1 text-slate-400 hover:text-red-600">
                                <Trash2 className="w-3.5 h-3.5" />
                              </button>
                            </div>
                          </div>
                        )}
                      </div>
                    ))}
                  </div>
                </div>
              )}
            </div>
          )}

          {activeTab === 'plans' && (
            <div className="p-6 space-y-6">
              <div className="flex items-center justify-between">
                <h3 className="text-lg font-semibold text-slate-800">Plan Selection</h3>
              </div>

              <div className="flex gap-2 border-b border-slate-200">
                <button onClick={() => setActivePlanTab('singleRent')} className={`px-4 py-2 text-sm font-medium border-b-2 -mb-px ${activePlanTab === 'singleRent' ? 'border-blue-500 text-blue-600' : 'border-transparent text-slate-500 hover:text-slate-700'}`}>Single Rent</button>
                <button onClick={() => setActivePlanTab('rentToOwn')} className={`px-4 py-2 text-sm font-medium border-b-2 -mb-px ${activePlanTab === 'rentToOwn' ? 'border-purple-500 text-purple-600' : 'border-transparent text-slate-500 hover:text-slate-700'}`}>Rent to Own</button>
                <button onClick={() => setActivePlanTab('shareEv')} className={`px-4 py-2 text-sm font-medium border-b-2 -mb-px ${activePlanTab === 'shareEv' ? 'border-green-500 text-green-600' : 'border-transparent text-slate-500 hover:text-slate-700'}`}>Share an EV</button>
              </div>

              {activePlanTab === 'singleRent' && (
                <div className="space-y-6">
                  {settings.plans.singleRent.map((plan, idx) => (
                    <div key={idx} className="bg-white rounded-xl border border-slate-200 overflow-hidden">
                      <div className="bg-blue-50 px-4 py-3 border-b border-blue-100 flex items-center justify-between">
                        <div>
                          <h4 className="font-semibold text-blue-800">SINGLE RENT - {plan.tier} - ৳{plan.dailyRent}/day</h4>
                          <textarea value={plan.description} onChange={(e) => { const updated = [...settings.plans.singleRent]; updated[idx].description = e.target.value; setSettings({ ...settings, plans: { ...settings.plans, singleRent: updated } }); }} className="w-full bg-transparent text-sm text-blue-600 mt-1 border-0 resize-none p-0 focus:ring-0" rows={1} placeholder="Plan description..." />
                        </div>
                        <button onClick={handleSave} className="px-3 py-1.5 bg-blue-600 text-white rounded-lg text-xs font-medium flex items-center gap-1">
                          <Save className="w-3 h-3" /> Save
                        </button>
                      </div>
                      <div className="p-4 space-y-4">
                        <div className="grid lg:grid-cols-3 gap-4">
                          <div>
                            <label className="text-sm text-slate-600">Daily Rent (৳)</label>
                            <input type="number" value={plan.dailyRent} onChange={(e) => { const updated = [...settings.plans.singleRent]; updated[idx].dailyRent = parseInt(e.target.value); setSettings({ ...settings, plans: { ...settings.plans, singleRent: updated } }); }} 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">Weekly Subscription (৳)</label>
                            <input type="number" value={plan.weeklySubscription} onChange={(e) => { const updated = [...settings.plans.singleRent]; updated[idx].weeklySubscription = parseInt(e.target.value); setSettings({ ...settings, plans: { ...settings.plans, singleRent: updated } }); }} 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">Monthly Subscription (৳)</label>
                            <input type="number" value={plan.monthlySubscription} onChange={(e) => { const updated = [...settings.plans.singleRent]; updated[idx].monthlySubscription = parseInt(e.target.value); setSettings({ ...settings, plans: { ...settings.plans, singleRent: updated } }); }} 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">Deposit (৳)</label>
                            <input type="number" value={plan.deposit} onChange={(e) => { const updated = [...settings.plans.singleRent]; updated[idx].deposit = parseInt(e.target.value); setSettings({ ...settings, plans: { ...settings.plans, singleRent: updated } }); }} 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">FICO Share (%)</label>
                            <input type="number" value={plan.ficoSharePercent} onChange={(e) => { const updated = [...settings.plans.singleRent]; updated[idx].ficoSharePercent = parseInt(e.target.value); setSettings({ ...settings, plans: { ...settings.plans, singleRent: updated } }); }} 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">JAIBEN Keep (%)</label>
                            <input type="number" value={100 - plan.ficoSharePercent} disabled className="w-full px-3 py-2 border border-slate-200 rounded-lg text-sm mt-1 bg-slate-100" />
                          </div>
                        </div>
                        <div className="p-3 bg-slate-50 rounded-lg">
                          <div className="flex items-center justify-between text-sm">
                            <span className="text-slate-600">FICO + JAIBEN =</span>
                            <span className={`font-semibold ${plan.ficoSharePercent + (100 - plan.ficoSharePercent) === 100 ? 'text-green-600' : 'text-red-600'}`}>{plan.ficoSharePercent + (100 - plan.ficoSharePercent)}% (FICO: {plan.ficoSharePercent}% + JAIBEN: {100 - plan.ficoSharePercent}%)</span>
                          </div>
                        </div>
                        <div className="bg-slate-50 rounded-lg p-3">
                          <label className="text-sm font-semibold text-slate-700 block mb-2">Contract Duration (Months)</label>
                          <div className="flex flex-wrap gap-2">
                            {plan.contractMonths.map(month => (
                              <button
                                key={month}
                                onClick={() => {
                                  const updated = [...settings.plans.singleRent];
                                  updated[idx].contractMonths = updated[idx].contractMonths.filter(m => m !== month);
                                  setSettings({ ...settings, plans: { ...settings.plans, singleRent: updated } });
                                }}
                                className="px-3 py-1.5 rounded-lg text-xs font-medium bg-blue-600 text-white hover:bg-red-500 transition-all flex items-center gap-1"
                              >
                                {month} {month === 1 ? 'Month' : 'Months'}
                                <span className="ml-1 font-bold">×</span>
                              </button>
                            ))}
                            <div className="flex items-center gap-1">
                              <input
                                type="number"
                                min="1"
                                placeholder="Add"
                                className="w-20 px-2 py-1.5 border border-slate-200 rounded-lg text-xs"
                                onKeyDown={(e) => {
                                  if (e.key === 'Enter') {
                                    const val = parseInt((e.target as HTMLInputElement).value);
                                    if (val > 0 && !plan.contractMonths.includes(val)) {
                                      const updated = [...settings.plans.singleRent];
                                      updated[idx].contractMonths = [...updated[idx].contractMonths, val].sort((a, b) => a - b);
                                      setSettings({ ...settings, plans: { ...settings.plans, singleRent: updated } });
                                      (e.target as HTMLInputElement).value = '';
                                    }
                                  }
                                }}
                              />
                              <button
                                onClick={(e) => {
                                  const input = (e.currentTarget.previousElementSibling as HTMLInputElement);
                                  const val = parseInt(input.value);
                                  if (val > 0 && !plan.contractMonths.includes(val)) {
                                    const updated = [...settings.plans.singleRent];
                                    updated[idx].contractMonths = [...updated[idx].contractMonths, val].sort((a, b) => a - b);
                                    setSettings({ ...settings, plans: { ...settings.plans, singleRent: updated } });
                                    input.value = '';
                                  }
                                }}
                                className="px-2 py-1.5 bg-blue-600 text-white rounded-lg text-xs hover:bg-blue-700"
                              >
                                +
                              </button>
                            </div>
                          </div>
                          {plan.contractMonths.length === 0 && (
                            <p className="text-xs text-slate-400 mt-2">No contract months selected.</p>
                          )}
                        </div>
                        <div>
                          <label className="text-sm text-slate-600">Description</label>
                          <textarea value={plan.description} onChange={(e) => { const updated = [...settings.plans.singleRent]; updated[idx].description = e.target.value; setSettings({ ...settings, plans: { ...settings.plans, singleRent: updated } }); }} className="w-full px-3 py-2 border border-slate-200 rounded-lg text-sm mt-1" rows={2} />
                        </div>
                      </div>
                    </div>
                  ))}
                </div>
              )}

              {activePlanTab === 'rentToOwn' && (
                <div className="space-y-6">
                  {settings.plans.rentToOwn.map((plan, idx) => (
                    <div key={idx} className="bg-white rounded-xl border border-slate-200 overflow-hidden">
                      <div className="bg-purple-50 px-4 py-3 border-b border-purple-100 flex items-center justify-between">
                        <div>
                          <h4 className="font-semibold text-purple-800">RENT TO OWN - {plan.tier} - ৳{plan.dailyRent}/day</h4>
                          <textarea value={plan.description} onChange={(e) => { const updated = [...settings.plans.rentToOwn]; updated[idx].description = e.target.value; setSettings({ ...settings, plans: { ...settings.plans, rentToOwn: updated } }); }} className="w-full bg-transparent text-sm text-purple-600 mt-1 border-0 resize-none p-0 focus:ring-0" rows={1} placeholder="Plan description..." />
                        </div>
                        <button onClick={handleSave} className="px-3 py-1.5 bg-purple-600 text-white rounded-lg text-xs font-medium flex items-center gap-1">
                          <Save className="w-3 h-3" /> Save
                        </button>
                      </div>
                      <div className="p-4 space-y-4">
                        <div className="grid lg:grid-cols-3 gap-4">
                          <div>
                            <label className="text-sm text-slate-600">Daily Rent (৳)</label>
                            <input type="number" value={plan.dailyRent} onChange={(e) => { const updated = [...settings.plans.rentToOwn]; updated[idx].dailyRent = parseInt(e.target.value); setSettings({ ...settings, plans: { ...settings.plans, rentToOwn: updated } }); }} 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">Weekly Subscription (৳)</label>
                            <input type="number" value={plan.weeklySubscription} onChange={(e) => { const updated = [...settings.plans.rentToOwn]; updated[idx].weeklySubscription = parseInt(e.target.value); setSettings({ ...settings, plans: { ...settings.plans, rentToOwn: updated } }); }} 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">Monthly Subscription (৳)</label>
                            <input type="number" value={plan.monthlySubscription} onChange={(e) => { const updated = [...settings.plans.rentToOwn]; updated[idx].monthlySubscription = parseInt(e.target.value); setSettings({ ...settings, plans: { ...settings.plans, rentToOwn: updated } }); }} 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">Deposit (৳)</label>
                            <input type="number" value={plan.deposit} onChange={(e) => { const updated = [...settings.plans.rentToOwn]; updated[idx].deposit = parseInt(e.target.value); setSettings({ ...settings, plans: { ...settings.plans, rentToOwn: updated } }); }} 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">Duration (Months)</label>
                            <input type="number" value={plan.durationMonths} onChange={(e) => { const updated = [...settings.plans.rentToOwn]; updated[idx].durationMonths = parseInt(e.target.value); setSettings({ ...settings, plans: { ...settings.plans, rentToOwn: updated } }); }} 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">EV Price (৳)</label>
                            <input type="number" value={plan.evPrice} onChange={(e) => { const updated = [...settings.plans.rentToOwn]; updated[idx].evPrice = parseInt(e.target.value); setSettings({ ...settings, plans: { ...settings.plans, rentToOwn: updated } }); }} 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">Total Payment (৳)</label>
                            <input type="number" value={plan.totalPayment} onChange={(e) => { const updated = [...settings.plans.rentToOwn]; updated[idx].totalPayment = parseInt(e.target.value); setSettings({ ...settings, plans: { ...settings.plans, rentToOwn: updated } }); }} 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">Profit (৳)</label>
                            <input type="number" value={plan.profit} onChange={(e) => { const updated = [...settings.plans.rentToOwn]; updated[idx].profit = parseInt(e.target.value); setSettings({ ...settings, plans: { ...settings.plans, rentToOwn: updated } }); }} 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">FICO Rent Share (%)</label>
                            <input type="number" value={plan.ficoRentSharePercent} onChange={(e) => { const updated = [...settings.plans.rentToOwn]; updated[idx].ficoRentSharePercent = parseInt(e.target.value); setSettings({ ...settings, plans: { ...settings.plans, rentToOwn: updated } }); }} 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">FICO Profit Share (%)</label>
                            <input type="number" value={plan.ficoProfitSharePercent} onChange={(e) => { const updated = [...settings.plans.rentToOwn]; updated[idx].ficoProfitSharePercent = parseInt(e.target.value); setSettings({ ...settings, plans: { ...settings.plans, rentToOwn: updated } }); }} 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">JAIBEN Keep (%)</label>
                            <input type="number" value={100 - plan.ficoRentSharePercent - plan.ficoProfitSharePercent} disabled className="w-full px-3 py-2 border border-slate-200 rounded-lg text-sm mt-1 bg-slate-100" />
                          </div>
                        </div>
                        <div className="p-3 bg-slate-50 rounded-lg">
                          <div className="flex items-center justify-between text-sm">
                            <span className="text-slate-600">FICO + JAIBEN =</span>
                            <span className={`font-semibold ${plan.ficoRentSharePercent + plan.ficoProfitSharePercent + (100 - plan.ficoRentSharePercent - plan.ficoProfitSharePercent) === 100 ? 'text-green-600' : 'text-red-600'}`}>{plan.ficoRentSharePercent + plan.ficoProfitSharePercent + (100 - plan.ficoRentSharePercent - plan.ficoProfitSharePercent)}% (FICO Rent: {plan.ficoRentSharePercent}% + FICO Profit: {plan.ficoProfitSharePercent}% + JAIBEN: {100 - plan.ficoRentSharePercent - plan.ficoProfitSharePercent}%)</span>
                          </div>
                        </div>
                        <div className="bg-slate-50 rounded-lg p-3">
                          <label className="text-sm font-semibold text-slate-700 block mb-2">Contract Duration (Months)</label>
                          <div className="flex flex-wrap gap-2">
                            {plan.contractMonths.map(month => (
                              <button
                                key={month}
                                onClick={() => {
                                  const updated = [...settings.plans.rentToOwn];
                                  updated[idx].contractMonths = updated[idx].contractMonths.filter(m => m !== month);
                                  setSettings({ ...settings, plans: { ...settings.plans, rentToOwn: updated } });
                                }}
                                className="px-3 py-1.5 rounded-lg text-xs font-medium bg-purple-600 text-white hover:bg-red-500 transition-all flex items-center gap-1"
                              >
                                {month} Months
                                <span className="ml-1 font-bold">×</span>
                              </button>
                            ))}
                            <div className="flex items-center gap-1">
                              <input
                                type="number"
                                min="1"
                                placeholder="Add"
                                className="w-20 px-2 py-1.5 border border-slate-200 rounded-lg text-xs"
                                onKeyDown={(e) => {
                                  if (e.key === 'Enter') {
                                    const val = parseInt((e.target as HTMLInputElement).value);
                                    if (val > 0 && !plan.contractMonths.includes(val)) {
                                      const updated = [...settings.plans.rentToOwn];
                                      updated[idx].contractMonths = [...updated[idx].contractMonths, val].sort((a, b) => a - b);
                                      setSettings({ ...settings, plans: { ...settings.plans, rentToOwn: updated } });
                                      (e.target as HTMLInputElement).value = '';
                                    }
                                  }
                                }}
                              />
                              <button
                                onClick={(e) => {
                                  const input = (e.currentTarget.previousElementSibling as HTMLInputElement);
                                  const val = parseInt(input.value);
                                  if (val > 0 && !plan.contractMonths.includes(val)) {
                                    const updated = [...settings.plans.rentToOwn];
                                    updated[idx].contractMonths = [...updated[idx].contractMonths, val].sort((a, b) => a - b);
                                    setSettings({ ...settings, plans: { ...settings.plans, rentToOwn: updated } });
                                    input.value = '';
                                  }
                                }}
                                className="px-2 py-1.5 bg-purple-600 text-white rounded-lg text-xs hover:bg-purple-700"
                              >
                                +
                              </button>
                            </div>
                          </div>
                          {plan.contractMonths.length === 0 && (
                            <p className="text-xs text-slate-400 mt-2">No contract months selected.</p>
                          )}
                        </div>
                        <div>
                          <label className="text-sm text-slate-600">Description</label>
                          <textarea value={plan.description} onChange={(e) => { const updated = [...settings.plans.rentToOwn]; updated[idx].description = e.target.value; setSettings({ ...settings, plans: { ...settings.plans, rentToOwn: updated } }); }} className="w-full px-3 py-2 border border-slate-200 rounded-lg text-sm mt-1" rows={2} />
                        </div>
                      </div>
                    </div>
                  ))}
                </div>
              )}

              {activePlanTab === 'shareEv' && (
                <div className="space-y-6">
                  {settings.plans.shareEv.map((plan, idx) => (
                    <div key={idx} className="bg-white rounded-xl border border-slate-200 overflow-hidden">
                      <div className="bg-green-50 px-4 py-3 border-b border-green-100 flex items-center justify-between">
                        <div>
                          <h4 className="font-semibold text-green-800">SHARE AN EV - {plan.tier} - ৳{plan.dailyRentEach}/day each (Total: ৳{plan.totalDailyRent})</h4>
                          <textarea value={plan.description} onChange={(e) => { const updated = [...settings.plans.shareEv]; updated[idx].description = e.target.value; setSettings({ ...settings, plans: { ...settings.plans, shareEv: updated } }); }} className="w-full bg-transparent text-sm text-green-600 mt-1 border-0 resize-none p-0 focus:ring-0" rows={1} placeholder="Plan description..." />
                        </div>
                        <button onClick={handleSave} className="px-3 py-1.5 bg-green-600 text-white rounded-lg text-xs font-medium flex items-center gap-1">
                          <Save className="w-3 h-3" /> Save
                        </button>
                      </div>
                      <div className="p-4 space-y-4">
                        <div className="grid lg:grid-cols-3 gap-4">
                          <div>
                            <label className="text-sm text-slate-600">Daily Rent Each (৳)</label>
                            <input type="number" value={plan.dailyRentEach} onChange={(e) => { const updated = [...settings.plans.shareEv]; updated[idx].dailyRentEach = parseInt(e.target.value); setSettings({ ...settings, plans: { ...settings.plans, shareEv: updated } }); }} 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">Total Daily Rent (৳)</label>
                            <input type="number" value={plan.totalDailyRent} onChange={(e) => { const updated = [...settings.plans.shareEv]; updated[idx].totalDailyRent = parseInt(e.target.value); setSettings({ ...settings, plans: { ...settings.plans, shareEv: updated } }); }} 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">Weekly Subscription Each (৳)</label>
                            <input type="number" value={plan.weeklySubscriptionEach} onChange={(e) => { const updated = [...settings.plans.shareEv]; updated[idx].weeklySubscriptionEach = parseInt(e.target.value); setSettings({ ...settings, plans: { ...settings.plans, shareEv: updated } }); }} 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">Total Weekly Subscription (৳)</label>
                            <input type="number" value={plan.totalWeeklySubscription} onChange={(e) => { const updated = [...settings.plans.shareEv]; updated[idx].totalWeeklySubscription = parseInt(e.target.value); setSettings({ ...settings, plans: { ...settings.plans, shareEv: updated } }); }} 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">Monthly Subscription Each (৳)</label>
                            <input type="number" value={plan.monthlySubscriptionEach} onChange={(e) => { const updated = [...settings.plans.shareEv]; updated[idx].monthlySubscriptionEach = parseInt(e.target.value); setSettings({ ...settings, plans: { ...settings.plans, shareEv: updated } }); }} 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">Total Monthly Subscription (৳)</label>
                            <input type="number" value={plan.totalMonthlySubscription} onChange={(e) => { const updated = [...settings.plans.shareEv]; updated[idx].totalMonthlySubscription = parseInt(e.target.value); setSettings({ ...settings, plans: { ...settings.plans, shareEv: updated } }); }} 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">Deposit Each (৳)</label>
                            <input type="number" value={plan.depositEach} onChange={(e) => { const updated = [...settings.plans.shareEv]; updated[idx].depositEach = parseInt(e.target.value); setSettings({ ...settings, plans: { ...settings.plans, shareEv: updated } }); }} 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">Total Deposit (৳)</label>
                            <input type="number" value={plan.totalDeposit} onChange={(e) => { const updated = [...settings.plans.shareEv]; updated[idx].totalDeposit = parseInt(e.target.value); setSettings({ ...settings, plans: { ...settings.plans, shareEv: updated } }); }} 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">FICO Share (%)</label>
                            <input type="number" value={plan.ficoSharePercent} onChange={(e) => { const updated = [...settings.plans.shareEv]; updated[idx].ficoSharePercent = parseInt(e.target.value); setSettings({ ...settings, plans: { ...settings.plans, shareEv: updated } }); }} 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">JAIBEN Keep (%)</label>
                            <input type="number" value={100 - plan.ficoSharePercent} disabled className="w-full px-3 py-2 border border-slate-200 rounded-lg text-sm mt-1 bg-slate-100" />
                          </div>
                        </div>
                        <div className="p-3 bg-slate-50 rounded-lg">
                          <div className="flex items-center justify-between text-sm">
                            <span className="text-slate-600">FICO + JAIBEN =</span>
                            <span className={`font-semibold ${plan.ficoSharePercent + (100 - plan.ficoSharePercent) === 100 ? 'text-green-600' : 'text-red-600'}`}>{plan.ficoSharePercent + (100 - plan.ficoSharePercent)}% (FICO: {plan.ficoSharePercent}% + JAIBEN: {100 - plan.ficoSharePercent}%)</span>
                          </div>
                        </div>
                        <div className="bg-slate-50 rounded-lg p-3">
                          <label className="text-sm font-semibold text-slate-700 block mb-2">Contract Duration (Months)</label>
                          <div className="flex flex-wrap gap-2">
                            {plan.contractMonths.map(month => (
                              <button
                                key={month}
                                onClick={() => {
                                  const updated = [...settings.plans.shareEv];
                                  updated[idx].contractMonths = updated[idx].contractMonths.filter(m => m !== month);
                                  setSettings({ ...settings, plans: { ...settings.plans, shareEv: updated } });
                                }}
                                className="px-3 py-1.5 rounded-lg text-xs font-medium bg-green-600 text-white hover:bg-red-500 transition-all flex items-center gap-1"
                              >
                                {month} {month === 1 ? 'Month' : 'Months'}
                                <span className="ml-1 font-bold">×</span>
                              </button>
                            ))}
                            <div className="flex items-center gap-1">
                              <input
                                type="number"
                                min="1"
                                placeholder="Add"
                                className="w-20 px-2 py-1.5 border border-slate-200 rounded-lg text-xs"
                                onKeyDown={(e) => {
                                  if (e.key === 'Enter') {
                                    const val = parseInt((e.target as HTMLInputElement).value);
                                    if (val > 0 && !plan.contractMonths.includes(val)) {
                                      const updated = [...settings.plans.shareEv];
                                      updated[idx].contractMonths = [...updated[idx].contractMonths, val].sort((a, b) => a - b);
                                      setSettings({ ...settings, plans: { ...settings.plans, shareEv: updated } });
                                      (e.target as HTMLInputElement).value = '';
                                    }
                                  }
                                }}
                              />
                              <button
                                onClick={(e) => {
                                  const input = (e.currentTarget.previousElementSibling as HTMLInputElement);
                                  const val = parseInt(input.value);
                                  if (val > 0 && !plan.contractMonths.includes(val)) {
                                    const updated = [...settings.plans.shareEv];
                                    updated[idx].contractMonths = [...updated[idx].contractMonths, val].sort((a, b) => a - b);
                                    setSettings({ ...settings, plans: { ...settings.plans, shareEv: updated } });
                                    input.value = '';
                                  }
                                }}
                                className="px-2 py-1.5 bg-green-600 text-white rounded-lg text-xs hover:bg-green-700"
                              >
                                +
                              </button>
                            </div>
                          </div>
                          {plan.contractMonths.length === 0 && (
                            <p className="text-xs text-slate-400 mt-2">No contract months selected.</p>
                          )}
                        </div>
                        <div>
                          <label className="text-sm text-slate-600">Description</label>
                          <textarea value={plan.description} onChange={(e) => { const updated = [...settings.plans.shareEv]; updated[idx].description = e.target.value; setSettings({ ...settings, plans: { ...settings.plans, shareEv: updated } }); }} className="w-full px-3 py-2 border border-slate-200 rounded-lg text-sm mt-1" rows={2} />
                        </div>
                      </div>
                    </div>
                  ))}
                </div>
              )}
            </div>
          )
          }

          {
            (activeTab as string) === 'investment' && (
              <div className="p-6 space-y-6">
                <div className="flex items-center justify-between">
                  <h3 className="text-lg font-semibold text-slate-800">Investment Plans</h3>
                </div>

                <div className="flex items-center justify-between bg-amber-50 border border-amber-200 rounded-xl p-4">
                  <div>
                    <h4 className="font-semibold text-amber-800">Investment Plans ({settings.plans.investment.length})</h4>
                    <p className="text-sm text-amber-600">Manage investment plans for investors</p>
                  </div>
                  <button onClick={() => { setAddInvestPlan(true); setNewInvestName(''); }} className="px-4 py-2 bg-amber-600 text-white rounded-lg text-sm font-medium flex items-center gap-2">
                    <Plus className="w-4 h-4" /> New Plan
                  </button>
                </div>

                {addInvestPlan && (
                  <div className="bg-white rounded-xl border border-amber-300 overflow-hidden">
                    <div className="bg-amber-100 px-4 py-3 border-b border-amber-200 flex items-center justify-between">
                      <div>
                        <h4 className="font-semibold text-amber-800">New Investment Plan</h4>
                        <p className="text-sm text-amber-600 mt-1">Fill in the details below</p>
                      </div>
                      <button onClick={() => setAddInvestPlan(false)} className="text-amber-600 hover:text-amber-800">
                        <X className="w-5 h-5" />
                      </button>
                    </div>
                    <div className="p-4">
                      <div className="grid lg:grid-cols-3 gap-4">
                        <div>
                          <label className="text-sm text-slate-600">Plan Name</label>
                          <input type="text" value={newInvestName} onChange={(e) => setNewInvestName(e.target.value)} placeholder="e.g., 1 Bike Plan" 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">Status</label>
                          <select value={newInvestStatus} onChange={(e) => setNewInvestStatus(e.target.value)} className="w-full px-3 py-2 border border-slate-200 rounded-lg text-sm mt-1">
                            <option value="active">Active</option>
                            <option value="paused">Paused</option>
                            <option value="closed">Closed</option>
                          </select>
                        </div>
                        <div>
                          <label className="text-sm text-slate-600">Target Amount (৳)</label>
                          <input type="number" value={newInvestTarget} onChange={(e) => setNewInvestTarget(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">Start Date</label>
                          <input type="date" value={newInvestStart} onChange={(e) => setNewInvestStart(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">End Date</label>
                          <input type="date" value={newInvestEnd} onChange={(e) => setNewInvestEnd(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">Min Investment (৳)</label>
                          <input type="number" value={newInvestMin} onChange={(e) => setNewInvestMin(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">Max Investment (৳)</label>
                          <input type="number" value={newInvestMax} onChange={(e) => setNewInvestMax(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">Monthly Return (%)</label>
                          <input type="number" step="0.1" value={newInvestMonthly} onChange={(e) => setNewInvestMonthly(parseFloat(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">Duration (Months)</label>
                          <input type="number" value={newInvestDuration} onChange={(e) => setNewInvestDuration(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">Lock-in Period (Months)</label>
                          <input type="number" value={newInvestLock} onChange={(e) => setNewInvestLock(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">Total Return (%)</label>
                          <input type="number" step="0.1" value={newInvestTotal} onChange={(e) => setNewInvestTotal(parseFloat(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">Early Exit Penalty (%)</label>
                          <input type="number" value={newInvestPenalty} onChange={(e) => setNewInvestPenalty(parseInt(e.target.value))} className="w-full px-3 py-2 border border-slate-200 rounded-lg text-sm mt-1" />
                        </div>
                      </div>
                      <div className="mt-4 p-3 bg-slate-50 rounded-lg">
                        <div className="flex items-center justify-between text-sm">
                          <span className="text-slate-600">Profit from Plan Selection (FICO Share):</span>
                          <span className="font-semibold text-green-600">{settings.plans.singleRent[0]?.ficoSharePercent || 50}%</span>
                        </div>
                      </div>
                      <div className="mt-4">
                        <label className="text-sm text-slate-600">Description</label>
                        <textarea value={newInvestDesc} onChange={(e) => setNewInvestDesc(e.target.value)} placeholder="Enter plan description" className="w-full px-3 py-2 border border-slate-200 rounded-lg text-sm mt-1" rows={2} />
                      </div>
                      <button onClick={createInvestPlan} className="mt-4 px-4 py-2 bg-amber-600 text-white rounded-lg text-sm font-medium">Create Plan</button>
                    </div>
                  </div>
                )}

                <div className="flex gap-2 border-b border-slate-200">
                  {settings.plans.investment.map((plan, idx) => (
                    <button key={idx} onClick={() => setActiveInvestTab(idx)} className={`px-4 py-2 text-sm font-medium border-b-2 -mb-px ${activeInvestTab === idx ? 'border-amber-500 text-amber-600' : 'border-transparent text-slate-500 hover:text-slate-700'}`}> {plan.name}</button>
                  ))}
                </div>

                {settings.plans.investment.length > 0 && settings.plans.investment.map((plan, idx) => idx === activeInvestTab && (
                  <div key={idx} className="bg-white rounded-xl border border-slate-200 overflow-hidden">
                    <div className="bg-amber-50 px-4 py-3 border-b border-amber-100 flex items-center justify-between">
                      <div>
                        <h4 className="font-semibold text-amber-800">{plan.name} - {plan.monthlyReturnPercent}% per month</h4>
                        <p className="text-sm text-amber-600 mt-1">{plan.description}</p>
                      </div>
                      <span className={`px-2 py-1 rounded-full text-xs font-medium ${plan.status === 'active' ? 'bg-green-100 text-green-700' : 'bg-red-100 text-red-700'}`}>{plan.status}</span>
                    </div>
                    <div className="p-4">
                      <div className="grid lg:grid-cols-3 gap-4">
                        <div>
                          <label className="text-sm text-slate-600">Plan Name</label>
                          <input type="text" value={plan.name} onChange={(e) => { const updated = [...settings.plans.investment]; updated[idx].name = e.target.value; setSettings({ ...settings, plans: { ...settings.plans, investment: updated } }); }} 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">Status</label>
                          <select value={plan.status} onChange={(e) => { const updated = [...settings.plans.investment]; updated[idx].status = e.target.value; setSettings({ ...settings, plans: { ...settings.plans, investment: updated } }); }} className="w-full px-3 py-2 border border-slate-200 rounded-lg text-sm mt-1">
                            <option value="active">Active</option>
                            <option value="paused">Paused</option>
                            <option value="closed">Closed</option>
                          </select>
                        </div>
                        <div>
                          <label className="text-sm text-slate-600">Target Amount (৳)</label>
                          <input type="number" value={plan.targetAmount} onChange={(e) => { const updated = [...settings.plans.investment]; updated[idx].targetAmount = parseInt(e.target.value); setSettings({ ...settings, plans: { ...settings.plans, investment: updated } }); }} 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">Start Date</label>
                          <input type="date" value={plan.startDate} onChange={(e) => { const updated = [...settings.plans.investment]; updated[idx].startDate = e.target.value; setSettings({ ...settings, plans: { ...settings.plans, investment: updated } }); }} 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">End Date</label>
                          <input type="date" value={plan.endDate} onChange={(e) => { const updated = [...settings.plans.investment]; updated[idx].endDate = e.target.value; setSettings({ ...settings, plans: { ...settings.plans, investment: updated } }); }} 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">Min Investment (৳)</label>
                          <input type="number" value={plan.minInvestment} onChange={(e) => { const updated = [...settings.plans.investment]; updated[idx].minInvestment = parseInt(e.target.value); setSettings({ ...settings, plans: { ...settings.plans, investment: updated } }); }} 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">Max Investment (৳)</label>
                          <input type="number" value={plan.maxInvestment} onChange={(e) => { const updated = [...settings.plans.investment]; updated[idx].maxInvestment = parseInt(e.target.value); setSettings({ ...settings, plans: { ...settings.plans, investment: updated } }); }} 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">Monthly Return (%)</label>
                          <input type="number" step="0.1" value={plan.monthlyReturnPercent} onChange={(e) => { const updated = [...settings.plans.investment]; updated[idx].monthlyReturnPercent = parseFloat(e.target.value); setSettings({ ...settings, plans: { ...settings.plans, investment: updated } }); }} 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">Duration (Months)</label>
                          <input type="number" value={plan.durationMonths} onChange={(e) => { const updated = [...settings.plans.investment]; updated[idx].durationMonths = parseInt(e.target.value); setSettings({ ...settings, plans: { ...settings.plans, investment: updated } }); }} 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">Lock-in Period (Months)</label>
                          <input type="number" value={plan.lockInMonths} onChange={(e) => { const updated = [...settings.plans.investment]; updated[idx].lockInMonths = parseInt(e.target.value); setSettings({ ...settings, plans: { ...settings.plans, investment: updated } }); }} 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">Total Return (%)</label>
                          <input type="number" step="0.1" value={plan.totalReturnPercent} onChange={(e) => { const updated = [...settings.plans.investment]; updated[idx].totalReturnPercent = parseFloat(e.target.value); setSettings({ ...settings, plans: { ...settings.plans, investment: updated } }); }} 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">Early Exit Penalty (%)</label>
                          <input type="number" value={plan.earlyExitPenalty} onChange={(e) => { const updated = [...settings.plans.investment]; updated[idx].earlyExitPenalty = parseInt(e.target.value); setSettings({ ...settings, plans: { ...settings.plans, investment: updated } }); }} className="w-full px-3 py-2 border border-slate-200 rounded-lg text-sm mt-1" />
                        </div>
                      </div>
                      <div className="mt-4 p-3 bg-slate-50 rounded-lg">
                        <div className="flex items-center justify-between text-sm">
                          <span className="text-slate-600">Profit from Plan Selection (FICO Share):</span>
                          <span className="font-semibold text-green-600">{settings.plans.singleRent[0]?.ficoSharePercent || 50}%</span>
                        </div>
                      </div>
                      <div className="mt-4">
                        <label className="text-sm text-slate-600">Description</label>
                        <textarea value={plan.description} onChange={(e) => { const updated = [...settings.plans.investment]; updated[idx].description = e.target.value; setSettings({ ...settings, plans: { ...settings.plans, investment: updated } }); }} className="w-full px-3 py-2 border border-slate-200 rounded-lg text-sm mt-1" rows={2} />
                      </div>
                      <div className="mt-4 flex justify-end">
                        <button onClick={handleSave} className="px-4 py-2 bg-amber-600 text-white rounded-lg text-sm font-medium flex items-center gap-2">
                          <Save className="w-4 h-4" /> Save Changes
                        </button>
                      </div>
                    </div>
                  </div>
                ))}
              </div>
            )
          }

          {
            (activeTab as string) === 'swapstation' && (
              <div className="p-6 space-y-6">
                <div className="flex items-center justify-between">
                  <h3 className="text-lg font-semibold text-slate-800">Swap Station Plans</h3>
                </div>

                <div className="flex items-center justify-between bg-blue-50 border border-blue-200 rounded-xl p-4">
                  <div>
                    <h4 className="font-semibold text-blue-800">Swap Station Plans ({settings.plans.swapStation.length})</h4>
                    <p className="text-sm text-blue-600">Manage swap station plans for operators</p>
                  </div>
                  <button onClick={() => { setAddSwapStationPlan(true); setNewSwapName(''); }} className="px-4 py-2 bg-blue-600 text-white rounded-lg text-sm font-medium flex items-center gap-2">
                    <Plus className="w-4 h-4" /> New Plan
                  </button>
                </div>

                {addSwapStationPlan && (
                  <div className="bg-white rounded-xl border border-blue-300 overflow-hidden">
                    <div className="bg-blue-100 px-4 py-3 border-b border-blue-200 flex items-center justify-between">
                      <div>
                        <h4 className="font-semibold text-blue-800">New Swap Station Plan</h4>
                        <p className="text-sm text-blue-600 mt-1">Fill in the details below</p>
                      </div>
                      <button onClick={() => setAddSwapStationPlan(false)} className="text-blue-600 hover:text-blue-800">
                        <X className="w-5 h-5" />
                      </button>
                    </div>
                    <div className="p-4">
                      <div className="grid lg:grid-cols-3 gap-4">
                        <div>
                          <label className="text-sm text-slate-600">Plan Name</label>
                          <input type="text" value={newSwapName} onChange={(e) => setNewSwapName(e.target.value)} placeholder="e.g., Standard Station" 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">Status</label>
                          <select value={newSwapStatus} onChange={(e) => setNewSwapStatus(e.target.value)} className="w-full px-3 py-2 border border-slate-200 rounded-lg text-sm mt-1">
                            <option value="active">Active</option>
                            <option value="paused">Paused</option>
                            <option value="closed">Closed</option>
                          </select>
                        </div>
                        <div>
                          <label className="text-sm text-slate-600">Battery Count</label>
                          <input type="number" value={newSwapBatteryCount} onChange={(e) => setNewSwapBatteryCount(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">Swap Price (৳)</label>
                          <input type="number" value={newSwapPrice} onChange={(e) => setNewSwapPrice(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">Monthly Subscription (৳)</label>
                          <input type="number" value={newSwapMonthly} onChange={(e) => setNewSwapMonthly(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">Daily Subscription (৳)</label>
                          <input type="number" value={newSwapDaily} onChange={(e) => setNewSwapDaily(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">Min Batteries</label>
                          <input type="number" value={newSwapMin} onChange={(e) => setNewSwapMin(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">Max Batteries</label>
                          <input type="number" value={newSwapMax} onChange={(e) => setNewSwapMax(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">Profit Share (%)</label>
                          <input type="number" value={newSwapProfit} onChange={(e) => setNewSwapProfit(parseInt(e.target.value))} className="w-full px-3 py-2 border border-slate-200 rounded-lg text-sm mt-1" />
                        </div>
                      </div>
                      <div className="mt-4">
                        <label className="text-sm text-slate-600">Description</label>
                        <textarea value={newSwapDesc} onChange={(e) => setNewSwapDesc(e.target.value)} placeholder="Enter plan description" className="w-full px-3 py-2 border border-slate-200 rounded-lg text-sm mt-1" rows={2} />
                      </div>
                      <button onClick={createSwapStationPlan} className="mt-4 px-4 py-2 bg-blue-600 text-white rounded-lg text-sm font-medium">Create Plan</button>
                    </div>
                  </div>
                )}

                <div className="flex gap-2 border-b border-slate-200">
                  {settings.plans.swapStation.map((plan, idx) => (
                    <button key={idx} onClick={() => setActiveSwapTab(idx)} className={`px-4 py-2 text-sm font-medium border-b-2 -mb-px ${activeSwapTab === idx ? 'border-blue-500 text-blue-600' : 'border-transparent text-slate-500 hover:text-slate-700'}`}> {plan.name}</button>
                  ))}
                </div>

                {settings.plans.swapStation.length > 0 && settings.plans.swapStation.map((plan, idx) => idx === activeSwapTab && (
                  <div key={idx} className="bg-white rounded-xl border border-slate-200 overflow-hidden">
                    <div className="bg-blue-50 px-4 py-3 border-b border-blue-100 flex items-center justify-between">
                      <div>
                        <h4 className="font-semibold text-blue-800">{plan.name}</h4>
                        <p className="text-sm text-blue-600 mt-1">{plan.description}</p>
                      </div>
                      <span className={`px-2 py-1 rounded-full text-xs font-medium ${plan.status === 'active' ? 'bg-green-100 text-green-700' : 'bg-red-100 text-red-700'}`}>{plan.status}</span>
                    </div>
                    <div className="p-4">
                      <div className="grid lg:grid-cols-3 gap-4">
                        <div>
                          <label className="text-sm text-slate-600">Plan Name</label>
                          <input type="text" value={plan.name} onChange={(e) => { const updated = [...settings.plans.swapStation]; updated[idx].name = e.target.value; setSettings({ ...settings, plans: { ...settings.plans, swapStation: updated } }); }} 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">Status</label>
                          <select value={plan.status} onChange={(e) => { const updated = [...settings.plans.swapStation]; updated[idx].status = e.target.value; setSettings({ ...settings, plans: { ...settings.plans, swapStation: updated } }); }} className="w-full px-3 py-2 border border-slate-200 rounded-lg text-sm mt-1">
                            <option value="active">Active</option>
                            <option value="paused">Paused</option>
                            <option value="closed">Closed</option>
                          </select>
                        </div>
                        <div>
                          <label className="text-sm text-slate-600">Battery Count</label>
                          <input type="number" value={plan.batteryCount} onChange={(e) => { const updated = [...settings.plans.swapStation]; updated[idx].batteryCount = parseInt(e.target.value); setSettings({ ...settings, plans: { ...settings.plans, swapStation: updated } }); }} 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">Swap Price (৳)</label>
                          <input type="number" value={plan.swapPrice} onChange={(e) => { const updated = [...settings.plans.swapStation]; updated[idx].swapPrice = parseInt(e.target.value); setSettings({ ...settings, plans: { ...settings.plans, swapStation: updated } }); }} 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">Monthly Subscription (৳)</label>
                          <input type="number" value={plan.monthlySubscription} onChange={(e) => { const updated = [...settings.plans.swapStation]; updated[idx].monthlySubscription = parseInt(e.target.value); setSettings({ ...settings, plans: { ...settings.plans, swapStation: updated } }); }} 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">Daily Subscription (৳)</label>
                          <input type="number" value={plan.dailySubscription} onChange={(e) => { const updated = [...settings.plans.swapStation]; updated[idx].dailySubscription = parseInt(e.target.value); setSettings({ ...settings, plans: { ...settings.plans, swapStation: updated } }); }} 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">Min Batteries</label>
                          <input type="number" value={plan.minBatteries} onChange={(e) => { const updated = [...settings.plans.swapStation]; updated[idx].minBatteries = parseInt(e.target.value); setSettings({ ...settings, plans: { ...settings.plans, swapStation: updated } }); }} 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">Max Batteries</label>
                          <input type="number" value={plan.maxBatteries} onChange={(e) => { const updated = [...settings.plans.swapStation]; updated[idx].maxBatteries = parseInt(e.target.value); setSettings({ ...settings, plans: { ...settings.plans, swapStation: updated } }); }} 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">Profit Share (%)</label>
                          <input type="number" value={plan.profitSharePercent} onChange={(e) => { const updated = [...settings.plans.swapStation]; updated[idx].profitSharePercent = parseInt(e.target.value); setSettings({ ...settings, plans: { ...settings.plans, swapStation: updated } }); }} className="w-full px-3 py-2 border border-slate-200 rounded-lg text-sm mt-1" />
                        </div>
                      </div>
                      <div className="mt-4">
                        <label className="text-sm text-slate-600">Description</label>
                        <textarea value={plan.description} onChange={(e) => { const updated = [...settings.plans.swapStation]; updated[idx].description = e.target.value; setSettings({ ...settings, plans: { ...settings.plans, swapStation: updated } }); }} className="w-full px-3 py-2 border border-slate-200 rounded-lg text-sm mt-1" rows={2} />
                      </div>
                      <div className="mt-4 flex justify-end">
                        <button onClick={handleSave} className="px-4 py-2 bg-blue-600 text-white rounded-lg text-sm font-medium flex items-center gap-2">
                          <Save className="w-4 h-4" /> Save Changes
                        </button>
                      </div>
                    </div>
                  </div>
                ))}
              </div>
            )
          }

          {
            (activeTab as string) === 'riderrequest' && (
              <div className="p-6 space-y-6">
                <div className="flex items-center justify-between">
                  <h3 className="text-lg font-semibold text-slate-800">Rider Request Plans</h3>
                </div>

                <div className="flex items-center justify-between bg-rose-50 border border-rose-200 rounded-xl p-4">
                  <div>
                    <h4 className="font-semibold text-rose-800">Rider Request Plans ({settings.plans.riderRequest.length})</h4>
                    <p className="text-sm text-rose-600">Manage rider request plans for operators</p>
                  </div>
                  <button onClick={() => { setAddRiderPlan(true); setNewRiderName(''); }} className="px-4 py-2 bg-rose-600 text-white rounded-lg text-sm font-medium flex items-center gap-2">
                    <Plus className="w-4 h-4" /> New Plan
                  </button>
                </div>

                {addRiderPlan && (
                  <div className="bg-white rounded-xl border border-rose-300 overflow-hidden">
                    <div className="bg-rose-100 px-4 py-3 border-b border-rose-200 flex items-center justify-between">
                      <div>
                        <h4 className="font-semibold text-rose-800">New Rider Request Plan</h4>
                        <p className="text-sm text-rose-600 mt-1">Fill in the details below</p>
                      </div>
                      <button onClick={() => setAddRiderPlan(false)} className="text-rose-600 hover:text-rose-800">
                        <X className="w-5 h-5" />
                      </button>
                    </div>
                    <div className="p-4">
                      <div className="grid lg:grid-cols-3 gap-4">
                        <div>
                          <label className="text-sm text-slate-600">Plan Name</label>
                          <input type="text" value={newRiderName} onChange={(e) => setNewRiderName(e.target.value)} placeholder="e.g., Premium Rider Plan" 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">Tier</label>
                          <select value={newRiderTier} onChange={(e) => setNewRiderTier(e.target.value)} className="w-full px-3 py-2 border border-slate-200 rounded-lg text-sm mt-1">
                            <option value="Premium">Premium</option>
                            <option value="Standard">Standard</option>
                            <option value="Economy">Economy</option>
                          </select>
                        </div>
                        <div>
                          <label className="text-sm text-slate-600">Status</label>
                          <select value={newRiderStatus} onChange={(e) => setNewRiderStatus(e.target.value)} className="w-full px-3 py-2 border border-slate-200 rounded-lg text-sm mt-1">
                            <option value="active">Active</option>
                            <option value="paused">Paused</option>
                            <option value="closed">Closed</option>
                          </select>
                        </div>
                        <div>
                          <label className="text-sm text-slate-600">Min Riders</label>
                          <input type="number" value={newRiderMin} onChange={(e) => setNewRiderMin(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">Max Riders</label>
                          <input type="number" value={newRiderMax} onChange={(e) => setNewRiderMax(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">Monthly Subscription (৳)</label>
                          <input type="number" value={newRiderMonthly} onChange={(e) => setNewRiderMonthly(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">Daily Subscription (৳)</label>
                          <input type="number" value={newRiderDaily} onChange={(e) => setNewRiderDaily(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">Deposit (৳)</label>
                          <input type="number" value={newRiderDeposit} onChange={(e) => setNewRiderDeposit(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">Commission (%)</label>
                          <input type="number" value={newRiderCommission} onChange={(e) => setNewRiderCommission(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">Daily Ride Target</label>
                          <input type="number" value={newRiderTarget} onChange={(e) => setNewRiderTarget(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">Weekly Holiday</label>
                          <input type="number" value={newRiderHoliday} onChange={(e) => setNewRiderHoliday(parseInt(e.target.value))} className="w-full px-3 py-2 border border-slate-200 rounded-lg text-sm mt-1" />
                        </div>
                      </div>
                      <div className="mt-4">
                        <label className="text-sm text-slate-600">Description</label>
                        <textarea value={newRiderDesc} onChange={(e) => setNewRiderDesc(e.target.value)} placeholder="Enter plan description" className="w-full px-3 py-2 border border-slate-200 rounded-lg text-sm mt-1" rows={2} />
                      </div>
                      <button onClick={createRiderPlan} className="mt-4 px-4 py-2 bg-rose-600 text-white rounded-lg text-sm font-medium">Create Plan</button>
                    </div>
                  </div>
                )}

                <div className="flex gap-2 border-b border-slate-200">
                  {settings.plans.riderRequest.map((plan, idx) => (
                    <button key={idx} onClick={() => setActiveRiderTab(idx)} className={`px-4 py-2 text-sm font-medium border-b-2 -mb-px ${activeRiderTab === idx ? 'border-rose-500 text-rose-600' : 'border-transparent text-slate-500 hover:text-slate-700'}`}>{idx + 1}. {plan.name}</button>
                  ))}
                </div>

                {settings.plans.riderRequest.length > 0 && settings.plans.riderRequest.map((plan, idx) => idx === activeRiderTab && (
                  <div key={idx} className="bg-white rounded-xl border border-slate-200 overflow-hidden">
                    <div className="bg-rose-50 px-4 py-3 border-b border-rose-100 flex items-center justify-between">
                      <div>
                        <h4 className="font-semibold text-rose-800">{plan.name} - {plan.tier}</h4>
                        <p className="text-sm text-rose-600 mt-1">{plan.description}</p>
                      </div>
                      <span className={`px-2 py-1 rounded-full text-xs font-medium ${plan.status === 'active' ? 'bg-green-100 text-green-700' : 'bg-red-100 text-red-700'}`}>{plan.status}</span>
                    </div>
                    <div className="p-4">
                      <div className="grid lg:grid-cols-3 gap-4">
                        <div>
                          <label className="text-sm text-slate-600">Plan Name</label>
                          <input type="text" value={plan.name} onChange={(e) => { const updated = [...settings.plans.riderRequest]; updated[idx].name = e.target.value; setSettings({ ...settings, plans: { ...settings.plans, riderRequest: updated } }); }} 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">Tier</label>
                          <select value={plan.tier} onChange={(e) => { const updated = [...settings.plans.riderRequest]; updated[idx].tier = e.target.value; setSettings({ ...settings, plans: { ...settings.plans, riderRequest: updated } }); }} className="w-full px-3 py-2 border border-slate-200 rounded-lg text-sm mt-1">
                            <option value="Premium">Premium</option>
                            <option value="Standard">Standard</option>
                            <option value="Economy">Economy</option>
                          </select>
                        </div>
                        <div>
                          <label className="text-sm text-slate-600">Status</label>
                          <select value={plan.status} onChange={(e) => { const updated = [...settings.plans.riderRequest]; updated[idx].status = e.target.value; setSettings({ ...settings, plans: { ...settings.plans, riderRequest: updated } }); }} className="w-full px-3 py-2 border border-slate-200 rounded-lg text-sm mt-1">
                            <option value="active">Active</option>
                            <option value="paused">Paused</option>
                            <option value="closed">Closed</option>
                          </select>
                        </div>
                        <div>
                          <label className="text-sm text-slate-600">Min Riders</label>
                          <input type="number" value={plan.minRiders} onChange={(e) => { const updated = [...settings.plans.riderRequest]; updated[idx].minRiders = parseInt(e.target.value); setSettings({ ...settings, plans: { ...settings.plans, riderRequest: updated } }); }} 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">Max Riders</label>
                          <input type="number" value={plan.maxRiders} onChange={(e) => { const updated = [...settings.plans.riderRequest]; updated[idx].maxRiders = parseInt(e.target.value); setSettings({ ...settings, plans: { ...settings.plans, riderRequest: updated } }); }} 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">Monthly Subscription (৳)</label>
                          <input type="number" value={plan.monthlySubscription} onChange={(e) => { const updated = [...settings.plans.riderRequest]; updated[idx].monthlySubscription = parseInt(e.target.value); setSettings({ ...settings, plans: { ...settings.plans, riderRequest: updated } }); }} 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">Daily Subscription (৳)</label>
                          <input type="number" value={plan.dailySubscription} onChange={(e) => { const updated = [...settings.plans.riderRequest]; updated[idx].dailySubscription = parseInt(e.target.value); setSettings({ ...settings, plans: { ...settings.plans, riderRequest: updated } }); }} 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">Deposit (৳)</label>
                          <input type="number" value={plan.deposit} onChange={(e) => { const updated = [...settings.plans.riderRequest]; updated[idx].deposit = parseInt(e.target.value); setSettings({ ...settings, plans: { ...settings.plans, riderRequest: updated } }); }} 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">Commission (%)</label>
                          <input type="number" value={plan.commissionPercent} onChange={(e) => { const updated = [...settings.plans.riderRequest]; updated[idx].commissionPercent = parseInt(e.target.value); setSettings({ ...settings, plans: { ...settings.plans, riderRequest: updated } }); }} 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">Daily Ride Target</label>
                          <input type="number" value={plan.dailyRideTarget} onChange={(e) => { const updated = [...settings.plans.riderRequest]; updated[idx].dailyRideTarget = parseInt(e.target.value); setSettings({ ...settings, plans: { ...settings.plans, riderRequest: updated } }); }} 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">Weekly Holiday</label>
                          <input type="number" value={plan.weeklyHoliday} onChange={(e) => { const updated = [...settings.plans.riderRequest]; updated[idx].weeklyHoliday = parseInt(e.target.value); setSettings({ ...settings, plans: { ...settings.plans, riderRequest: updated } }); }} className="w-full px-3 py-2 border border-slate-200 rounded-lg text-sm mt-1" />
                        </div>
                      </div>
                      <div className="mt-4">
                        <label className="text-sm text-slate-600">Description</label>
                        <textarea value={plan.description} onChange={(e) => { const updated = [...settings.plans.riderRequest]; updated[idx].description = e.target.value; setSettings({ ...settings, plans: { ...settings.plans, riderRequest: updated } }); }} className="w-full px-3 py-2 border border-slate-200 rounded-lg text-sm mt-1" rows={2} />
                      </div>
                      <div className="mt-4 flex justify-end">
                        <button onClick={handleSave} className="px-4 py-2 bg-rose-600 text-white rounded-lg text-sm font-medium flex items-center gap-2">
                          <Save className="w-4 h-4" /> Save Changes
                        </button>
                      </div>
                    </div>
                  </div>
                ))}
              </div>
            )
          }
        </div >
      </div >


    </div >
  );
}