'use client';

import { CompanySettings } from '../page';

interface KycSettingsProps {
  settings: CompanySettings;
  setSettings: React.Dispatch<React.SetStateAction<CompanySettings>>;
  activeMasterTab: 'investor' | 'merchant' | 'swapstation' | 'rentalType';
  setActiveMasterTab: (tab: 'investor' | 'merchant' | 'swapstation' | 'rentalType') => void;
  addDocType: 'investor' | 'merchant' | 'swapstation' | 'rental' | null;
  setAddDocType: (type: 'investor' | 'merchant' | 'swapstation' | 'rental' | null) => void;
  newDocName: string;
  setNewDocName: (name: string) => void;
  newDocDesc: string;
  setNewDocDesc: (desc: string) => void;
}

export default function KycSettings({
  settings,
  setSettings,
  activeMasterTab,
  setActiveMasterTab,
  addDocType,
  setAddDocType,
  newDocName,
  setNewDocName,
  newDocDesc,
  setNewDocDesc,
}: KycSettingsProps) {
  return (
    <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>
  );
}
