'use client';

import { Plus, Pencil, Trash2 } from 'lucide-react';
import RichTextEditor from '@/components/RichTextEditor';
import { CompanySettings } from '../page';

interface CompanyPolicySettingsProps {
  settings: CompanySettings;
  setSettings: React.Dispatch<React.SetStateAction<CompanySettings>>;
  activeMasterTab: 'investor' | 'merchant' | 'swapstation' | 'rentalType';
  setActiveMasterTab: (tab: 'investor' | 'merchant' | 'swapstation' | 'rentalType') => void;
  activeRentalTypeTab: 'single' | 'shared' | 'renttoown';
  setActiveRentalTypeTab: (tab: 'single' | 'shared' | 'renttoown') => void;
  editingPolicy: { tab: string; index: number } | null;
  setEditingPolicy: (policy: { tab: string; index: number } | null) => void;
  editPolicyName: string;
  setEditPolicyName: (name: string) => void;
  editPolicyDesc: string;
  setEditPolicyDesc: (desc: string) => void;
  editPolicyDescHtml: string;
  setEditPolicyDescHtml: (desc: string) => void;
  editPolicyShowApp: boolean;
  setEditPolicyShowApp: (v: boolean) => void;
  editPolicyShowWeb: boolean;
  setEditPolicyShowWeb: (v: boolean) => void;
  showAddPolicy: boolean;
  setShowAddPolicy: (show: boolean) => void;
  newPolicyName: string;
  setNewPolicyName: (name: string) => void;
  newPolicyDesc: string;
  setNewPolicyDesc: (desc: string) => void;
  newPolicyShowApp: boolean;
  setNewPolicyShowApp: (v: boolean) => void;
  newPolicyShowWeb: boolean;
  setNewPolicyShowWeb: (v: boolean) => void;
}

export default function CompanyPolicySettings({
  settings,
  setSettings,
  activeMasterTab,
  setActiveMasterTab,
  activeRentalTypeTab,
  setActiveRentalTypeTab,
  editingPolicy,
  setEditingPolicy,
  editPolicyName,
  setEditPolicyName,
  editPolicyDesc,
  setEditPolicyDesc,
editPolicyDescHtml,
  setEditPolicyDescHtml,
  editPolicyShowApp,
  setEditPolicyShowApp,
  editPolicyShowWeb,
  setEditPolicyShowWeb,
showAddPolicy,
  setShowAddPolicy,
  newPolicyName,
  setNewPolicyName,
  newPolicyDesc,
  setNewPolicyDesc,
  newPolicyShowApp,
  setNewPolicyShowApp,
  newPolicyShowWeb,
  setNewPolicyShowWeb,
}: CompanyPolicySettingsProps) {
  return (
    <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 space-y-3">
              <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" placeholder="Policy Title" />
              <RichTextEditor value={newPolicyDesc} onChange={(val) => setNewPolicyDesc(val)} placeholder="Policy Description..." minHeight={100} />
              <div className="flex items-center gap-6">
                <div className="flex items-center gap-2">
                  <button type="button" onClick={() => setNewPolicyShowApp(!newPolicyShowApp)} className={`relative inline-flex h-6 w-11 items-center rounded-full transition-colors ${newPolicyShowApp ? 'bg-blue-600' : 'bg-slate-300'}`}>
                    <span className={`inline-block h-4 w-4 transform rounded-full bg-white transition-transform ${newPolicyShowApp ? 'translate-x-6' : 'translate-x-1'}`} />
                  </button>
                  <span className="text-xs font-medium text-slate-600">Show on App</span>
                </div>
                <div className="flex items-center gap-2">
                  <button type="button" onClick={() => setNewPolicyShowWeb(!newPolicyShowWeb)} className={`relative inline-flex h-6 w-11 items-center rounded-full transition-colors ${newPolicyShowWeb ? 'bg-blue-600' : 'bg-slate-300'}`}>
                    <span className={`inline-block h-4 w-4 transform rounded-full bg-white transition-transform ${newPolicyShowWeb ? 'translate-x-6' : 'translate-x-1'}`} />
                  </button>
                  <span className="text-xs font-medium text-slate-600">Show on Web</span>
                </div>
              </div>
              <div className="flex gap-2">
                <button onClick={() => {
                  if (!newPolicyName.trim()) return;
                  const newPolicy = { title: newPolicyName, description: newPolicyDesc, showApp: newPolicyShowApp, showWeb: newPolicyShowWeb };
                  setSettings({ ...settings, companyPolicy: { ...settings.companyPolicy, investor: [...settings.companyPolicy.investor, newPolicy as typeof settings.companyPolicy.investor[number]] } });
                  setNewPolicyName('');
                  setNewPolicyDesc('');
                  setNewPolicyShowApp(true);
                  setNewPolicyShowWeb(true);
                  setShowAddPolicy(false);
                }} className="px-2 py-1 bg-blue-600 text-white rounded text-xs">Add</button>
                <button onClick={() => { setShowAddPolicy(false); setNewPolicyName(''); setNewPolicyDesc(''); setNewPolicyShowApp(true); setNewPolicyShowWeb(true); }} 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 items-center gap-6">
                      <div className="flex items-center gap-2">
                        <button type="button" onClick={() => setEditPolicyShowApp(!editPolicyShowApp)} className={`relative inline-flex h-6 w-11 items-center rounded-full transition-colors ${editPolicyShowApp ? 'bg-blue-600' : 'bg-slate-300'}`}>
                          <span className={`inline-block h-4 w-4 transform rounded-full bg-white transition-transform ${editPolicyShowApp ? 'translate-x-6' : 'translate-x-1'}`} />
                        </button>
                        <span className="text-xs font-medium text-slate-600">Show on App</span>
                      </div>
                      <div className="flex items-center gap-2">
                        <button type="button" onClick={() => setEditPolicyShowWeb(!editPolicyShowWeb)} className={`relative inline-flex h-6 w-11 items-center rounded-full transition-colors ${editPolicyShowWeb ? 'bg-blue-600' : 'bg-slate-300'}`}>
                          <span className={`inline-block h-4 w-4 transform rounded-full bg-white transition-transform ${editPolicyShowWeb ? 'translate-x-6' : 'translate-x-1'}`} />
                        </button>
                        <span className="text-xs font-medium text-slate-600">Show on Web</span>
                      </div>
                    </div>
                    <div className="flex gap-2">
                      <button onClick={() => {
                        const updated = [...settings.companyPolicy.investor];
                        updated[i] = { title: editPolicyName, description: editPolicyDescHtml, showApp: editPolicyShowApp, showWeb: editPolicyShowWeb };
                        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 mb-1">
                        <span className="text-sm font-medium text-slate-700">{policy.title}</span>
                        {(policy as { showApp?: boolean; showWeb?: boolean }).showApp && (
                          <span className="px-1.5 py-0.5 text-[10px] font-bold bg-blue-100 text-blue-600 rounded">App</span>
                        )}
                        {(policy as { showApp?: boolean; showWeb?: boolean }).showWeb && (
                          <span className="px-1.5 py-0.5 text-[10px] font-bold bg-green-100 text-green-600 rounded">Web</span>
                        )}
                      </div>
                      <div className="text-xs text-slate-500 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); setEditPolicyShowApp((policy as { showApp?: boolean }).showApp ?? true); setEditPolicyShowWeb((policy as { showWeb?: boolean }).showWeb ?? true); }} 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 space-y-3">
              <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" placeholder="Policy Title" />
              <RichTextEditor value={newPolicyDesc} onChange={(val) => setNewPolicyDesc(val)} placeholder="Policy Description..." minHeight={100} />
              <div className="flex items-center gap-6">
                <div className="flex items-center gap-2">
                  <button type="button" onClick={() => setNewPolicyShowApp(!newPolicyShowApp)} className={`relative inline-flex h-6 w-11 items-center rounded-full transition-colors ${newPolicyShowApp ? 'bg-blue-600' : 'bg-slate-300'}`}>
                    <span className={`inline-block h-4 w-4 transform rounded-full bg-white transition-transform ${newPolicyShowApp ? 'translate-x-6' : 'translate-x-1'}`} />
                  </button>
                  <span className="text-xs font-medium text-slate-600">Show on App</span>
                </div>
                <div className="flex items-center gap-2">
                  <button type="button" onClick={() => setNewPolicyShowWeb(!newPolicyShowWeb)} className={`relative inline-flex h-6 w-11 items-center rounded-full transition-colors ${newPolicyShowWeb ? 'bg-blue-600' : 'bg-slate-300'}`}>
                    <span className={`inline-block h-4 w-4 transform rounded-full bg-white transition-transform ${newPolicyShowWeb ? 'translate-x-6' : 'translate-x-1'}`} />
                  </button>
                  <span className="text-xs font-medium text-slate-600">Show on Web</span>
                </div>
              </div>
              <div className="flex gap-2">
                <button onClick={() => {
                  if (!newPolicyName.trim()) return;
                  const newPolicy = { title: newPolicyName, description: newPolicyDesc, showApp: newPolicyShowApp, showWeb: newPolicyShowWeb };
                  setSettings({ ...settings, companyPolicy: { ...settings.companyPolicy, merchant: [...settings.companyPolicy.merchant, newPolicy as typeof settings.companyPolicy.merchant[number]] } });
                  setNewPolicyName('');
                  setNewPolicyDesc('');
                  setNewPolicyShowApp(true);
                  setNewPolicyShowWeb(true);
                  setShowAddPolicy(false);
                }} className="px-2 py-1 bg-blue-600 text-white rounded text-xs">Add</button>
                <button onClick={() => { setShowAddPolicy(false); setNewPolicyName(''); setNewPolicyDesc(''); setNewPolicyShowApp(true); setNewPolicyShowWeb(true); }} 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 items-center gap-6">
                      <div className="flex items-center gap-2">
                        <button type="button" onClick={() => setEditPolicyShowApp(!editPolicyShowApp)} className={`relative inline-flex h-6 w-11 items-center rounded-full transition-colors ${editPolicyShowApp ? 'bg-blue-600' : 'bg-slate-300'}`}>
                          <span className={`inline-block h-4 w-4 transform rounded-full bg-white transition-transform ${editPolicyShowApp ? 'translate-x-6' : 'translate-x-1'}`} />
                        </button>
                        <span className="text-xs font-medium text-slate-600">Show on App</span>
                      </div>
                      <div className="flex items-center gap-2">
                        <button type="button" onClick={() => setEditPolicyShowWeb(!editPolicyShowWeb)} className={`relative inline-flex h-6 w-11 items-center rounded-full transition-colors ${editPolicyShowWeb ? 'bg-blue-600' : 'bg-slate-300'}`}>
                          <span className={`inline-block h-4 w-4 transform rounded-full bg-white transition-transform ${editPolicyShowWeb ? 'translate-x-6' : 'translate-x-1'}`} />
                        </button>
                        <span className="text-xs font-medium text-slate-600">Show on Web</span>
                      </div>
                    </div>
                    <div className="flex gap-2">
                      <button onClick={() => {
                        const updated = [...settings.companyPolicy.merchant];
                        updated[i] = { title: editPolicyName, description: editPolicyDescHtml, showApp: editPolicyShowApp, showWeb: editPolicyShowWeb };
                        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 mb-1">
                        <span className="text-sm font-medium text-slate-700">{policy.title}</span>
                        {(policy as { showApp?: boolean; showWeb?: boolean }).showApp && (
                          <span className="px-1.5 py-0.5 text-[10px] font-bold bg-blue-100 text-blue-600 rounded">App</span>
                        )}
                        {(policy as { showApp?: boolean; showWeb?: boolean }).showWeb && (
                          <span className="px-1.5 py-0.5 text-[10px] font-bold bg-green-100 text-green-600 rounded">Web</span>
                        )}
                      </div>
                      <div className="text-xs text-slate-500 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); setEditPolicyShowApp((policy as { showApp?: boolean }).showApp ?? true); setEditPolicyShowWeb((policy as { showWeb?: boolean }).showWeb ?? true); }} 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 space-y-3">
              <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" placeholder="Policy Title" />
              <RichTextEditor value={newPolicyDesc} onChange={(val) => setNewPolicyDesc(val)} placeholder="Policy Description..." minHeight={100} />
              <div className="flex items-center gap-6">
                <div className="flex items-center gap-2">
                  <button type="button" onClick={() => setNewPolicyShowApp(!newPolicyShowApp)} className={`relative inline-flex h-6 w-11 items-center rounded-full transition-colors ${newPolicyShowApp ? 'bg-blue-600' : 'bg-slate-300'}`}>
                    <span className={`inline-block h-4 w-4 transform rounded-full bg-white transition-transform ${newPolicyShowApp ? 'translate-x-6' : 'translate-x-1'}`} />
                  </button>
                  <span className="text-xs font-medium text-slate-600">Show on App</span>
                </div>
                <div className="flex items-center gap-2">
                  <button type="button" onClick={() => setNewPolicyShowWeb(!newPolicyShowWeb)} className={`relative inline-flex h-6 w-11 items-center rounded-full transition-colors ${newPolicyShowWeb ? 'bg-blue-600' : 'bg-slate-300'}`}>
                    <span className={`inline-block h-4 w-4 transform rounded-full bg-white transition-transform ${newPolicyShowWeb ? 'translate-x-6' : 'translate-x-1'}`} />
                  </button>
                  <span className="text-xs font-medium text-slate-600">Show on Web</span>
                </div>
              </div>
              <div className="flex gap-2">
                <button onClick={() => {
                  if (!newPolicyName.trim()) return;
                  const newPolicy = { title: newPolicyName, description: newPolicyDesc, showApp: newPolicyShowApp, showWeb: newPolicyShowWeb };
                  setSettings({ ...settings, companyPolicy: { ...settings.companyPolicy, swapStation: [...settings.companyPolicy.swapStation, newPolicy as typeof settings.companyPolicy.swapStation[number]] } });
                  setNewPolicyName('');
                  setNewPolicyDesc('');
                  setNewPolicyShowApp(true);
                  setNewPolicyShowWeb(true);
                  setShowAddPolicy(false);
                }} className="px-2 py-1 bg-blue-600 text-white rounded text-xs">Add</button>
                <button onClick={() => { setShowAddPolicy(false); setNewPolicyName(''); setNewPolicyDesc(''); setNewPolicyShowApp(true); setNewPolicyShowWeb(true); }} 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 items-center gap-6">
                      <div className="flex items-center gap-2">
                        <button type="button" onClick={() => setEditPolicyShowApp(!editPolicyShowApp)} className={`relative inline-flex h-6 w-11 items-center rounded-full transition-colors ${editPolicyShowApp ? 'bg-blue-600' : 'bg-slate-300'}`}>
                          <span className={`inline-block h-4 w-4 transform rounded-full bg-white transition-transform ${editPolicyShowApp ? 'translate-x-6' : 'translate-x-1'}`} />
                        </button>
                        <span className="text-xs font-medium text-slate-600">Show on App</span>
                      </div>
                      <div className="flex items-center gap-2">
                        <button type="button" onClick={() => setEditPolicyShowWeb(!editPolicyShowWeb)} className={`relative inline-flex h-6 w-11 items-center rounded-full transition-colors ${editPolicyShowWeb ? 'bg-blue-600' : 'bg-slate-300'}`}>
                          <span className={`inline-block h-4 w-4 transform rounded-full bg-white transition-transform ${editPolicyShowWeb ? 'translate-x-6' : 'translate-x-1'}`} />
                        </button>
                        <span className="text-xs font-medium text-slate-600">Show on Web</span>
                      </div>
                    </div>
                    <div className="flex gap-2">
                      <button onClick={() => {
                        const updated = [...settings.companyPolicy.swapStation];
                        updated[i] = { title: editPolicyName, description: editPolicyDescHtml, showApp: editPolicyShowApp, showWeb: editPolicyShowWeb };
                        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 mb-1">
                        <span className="text-sm font-medium text-slate-700">{policy.title}</span>
                        {(policy as { showApp?: boolean; showWeb?: boolean }).showApp && (
                          <span className="px-1.5 py-0.5 text-[10px] font-bold bg-blue-100 text-blue-600 rounded">App</span>
                        )}
                        {(policy as { showApp?: boolean; showWeb?: boolean }).showWeb && (
                          <span className="px-1.5 py-0.5 text-[10px] font-bold bg-green-100 text-green-600 rounded">Web</span>
                        )}
                      </div>
                      <div className="text-xs text-slate-500 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); setEditPolicyShowApp((policy as { showApp?: boolean }).showApp ?? true); setEditPolicyShowWeb((policy as { showWeb?: boolean }).showWeb ?? true); }} 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 space-y-3">
              <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" placeholder="Policy Title" />
              <RichTextEditor value={newPolicyDesc} onChange={(val) => setNewPolicyDesc(val)} placeholder="Policy Description..." minHeight={100} />
              <div className="flex items-center gap-6">
                <div className="flex items-center gap-2">
                  <button type="button" onClick={() => setNewPolicyShowApp(!newPolicyShowApp)} className={`relative inline-flex h-6 w-11 items-center rounded-full transition-colors ${newPolicyShowApp ? 'bg-blue-600' : 'bg-slate-300'}`}>
                    <span className={`inline-block h-4 w-4 transform rounded-full bg-white transition-transform ${newPolicyShowApp ? 'translate-x-6' : 'translate-x-1'}`} />
                  </button>
                  <span className="text-xs font-medium text-slate-600">Show on App</span>
                </div>
                <div className="flex items-center gap-2">
                  <button type="button" onClick={() => setNewPolicyShowWeb(!newPolicyShowWeb)} className={`relative inline-flex h-6 w-11 items-center rounded-full transition-colors ${newPolicyShowWeb ? 'bg-blue-600' : 'bg-slate-300'}`}>
                    <span className={`inline-block h-4 w-4 transform rounded-full bg-white transition-transform ${newPolicyShowWeb ? 'translate-x-6' : 'translate-x-1'}`} />
                  </button>
                  <span className="text-xs font-medium text-slate-600">Show on Web</span>
                </div>
              </div>
              <div className="flex gap-2">
                <button onClick={() => {
                  if (!newPolicyName.trim()) return;
                  const updated = { ...settings.companyPolicy.rentalTypes };
                  updated[activeRentalTypeTab] = [...updated[activeRentalTypeTab], { title: newPolicyName, description: newPolicyDesc, showApp: newPolicyShowApp, showWeb: newPolicyShowWeb }];
                  setSettings({ ...settings, companyPolicy: { ...settings.companyPolicy, rentalTypes: updated } });
                  setNewPolicyName('');
                  setNewPolicyDesc('');
                  setNewPolicyShowApp(true);
                  setNewPolicyShowWeb(true);
                  setShowAddPolicy(false);
                }} className="px-2 py-1 bg-blue-600 text-white rounded text-xs">Add</button>
                <button onClick={() => { setShowAddPolicy(false); setNewPolicyName(''); setNewPolicyDesc(''); setNewPolicyShowApp(true); setNewPolicyShowWeb(true); }} 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 items-center gap-6">
                      <div className="flex items-center gap-2">
                        <button type="button" onClick={() => setEditPolicyShowApp(!editPolicyShowApp)} className={`relative inline-flex h-6 w-11 items-center rounded-full transition-colors ${editPolicyShowApp ? 'bg-blue-600' : 'bg-slate-300'}`}>
                          <span className={`inline-block h-4 w-4 transform rounded-full bg-white transition-transform ${editPolicyShowApp ? 'translate-x-6' : 'translate-x-1'}`} />
                        </button>
                        <span className="text-xs font-medium text-slate-600">Show on App</span>
                      </div>
                      <div className="flex items-center gap-2">
                        <button type="button" onClick={() => setEditPolicyShowWeb(!editPolicyShowWeb)} className={`relative inline-flex h-6 w-11 items-center rounded-full transition-colors ${editPolicyShowWeb ? 'bg-blue-600' : 'bg-slate-300'}`}>
                          <span className={`inline-block h-4 w-4 transform rounded-full bg-white transition-transform ${editPolicyShowWeb ? 'translate-x-6' : 'translate-x-1'}`} />
                        </button>
                        <span className="text-xs font-medium text-slate-600">Show on Web</span>
                      </div>
                    </div>
                    <div className="flex gap-2">
                      <button onClick={() => {
                        const updated = { ...settings.companyPolicy.rentalTypes };
                        updated[activeRentalTypeTab][i] = { title: editPolicyName, description: editPolicyDescHtml, showApp: editPolicyShowApp, showWeb: editPolicyShowWeb };
                        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 mb-1">
                        <span className="text-sm font-medium text-slate-700">{policy.title}</span>
                        {(policy as { showApp?: boolean; showWeb?: boolean }).showApp && (
                          <span className="px-1.5 py-0.5 text-[10px] font-bold bg-blue-100 text-blue-600 rounded">App</span>
                        )}
                        {(policy as { showApp?: boolean; showWeb?: boolean }).showWeb && (
                          <span className="px-1.5 py-0.5 text-[10px] font-bold bg-green-100 text-green-600 rounded">Web</span>
                        )}
                      </div>
                      <div className="text-xs text-slate-500 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); setEditPolicyShowApp((policy as { showApp?: boolean }).showApp ?? true); setEditPolicyShowWeb((policy as { showWeb?: boolean }).showWeb ?? true); }} 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>
  );
}
