JML/src/app/admin/settings/components/PlanSelection.tsx

'use client';

import { useState } from 'react';
import { Plus, Save, Trash2, X, Pencil, Check } from 'lucide-react';
import { CompanySettings } from '../page';

const EV_MODELS = ['Etron ET50', 'Yadea DT3', 'AIMA Lightning', 'AIMA EM5', 'Yadea G5', 'TVS iQube', 'Bajaj Chetak', 'Hero Photon', 'Okinawa Praise', 'Ampere Magnus', 'Benling Aura', 'Lectrix LXS', 'Revolt RV400'];

interface PlanSelectionProps {
  settings: CompanySettings;
  setSettings: React.Dispatch<React.SetStateAction<CompanySettings>>;
  activePlanTab: 'singleRent' | 'rentToOwn' | 'shareEv';
  setActivePlanTab: (tab: 'singleRent' | 'rentToOwn' | 'shareEv') => void;
  handleSave: () => void;
  addNewPlan: (type: 'singleRent' | 'rentToOwn' | 'shareEv') => void;
  isDirty: boolean;
}

export default function PlanSelection({
  settings,
  setSettings,
  activePlanTab,
  setActivePlanTab,
  handleSave,
  addNewPlan,
  isDirty,
}: PlanSelectionProps) {
  const [deleteModal, setDeleteModal] = useState<{ type: 'singleRent' | 'rentToOwn' | 'shareEv' | null; idx: number | null }>({ type: null, idx: null });
  const [editingPlanId, setEditingPlanId] = useState<string | null>(null);
  const [openDropdown, setOpenDropdown] = useState<string | null>(null);

  const isAnyEditing = editingPlanId !== null;
  const colorMap: Record<string, string> = {
    singleRent: 'blue',
    rentToOwn: 'purple',
    shareEv: 'green',
  };
  const color = colorMap[activePlanTab] || 'blue';

  const handleDeletePlan = () => {
    if (deleteModal.type !== null && deleteModal.idx !== null) {
      const updated = settings.plans[deleteModal.type].filter((_, i) => i !== deleteModal.idx);
      setSettings({ ...settings, plans: { ...settings.plans, [deleteModal.type]: updated } });
      setDeleteModal({ type: null, idx: null });
    }
  };

  const renderPlanCard = (plan: CompanySettings['plans']['singleRent'][number] | CompanySettings['plans']['rentToOwn'][number] | CompanySettings['plans']['shareEv'][number], idx: number, type: 'singleRent' | 'rentToOwn' | 'shareEv') => {
    const isEditing = editingPlanId === plan.id;
    const isColor = color;
    const accent = {
      blue: { bg: 'bg-blue-600', bgLight: 'bg-blue-50', border: 'border-blue-100', text: 'text-blue-600', textDark: 'text-blue-800', textLight: 'text-blue-100', placeholder: 'placeholder-blue-400' },
      purple: { bg: 'bg-purple-600', bgLight: 'bg-purple-50', border: 'border-purple-100', text: 'text-purple-600', textDark: 'text-purple-800', textLight: 'text-purple-100', placeholder: 'placeholder-purple-400' },
      green: { bg: 'bg-green-600', bgLight: 'bg-green-50', border: 'border-green-100', text: 'text-green-600', textDark: 'text-green-800', textLight: 'text-green-100', placeholder: 'placeholder-green-400' },
    }[isColor]!;

    const inputClass = `w-full px-3 py-2 border border-slate-200 rounded-lg text-sm transition-all ${isEditing ? 'bg-white focus:border-blue-500 focus:ring-2 focus:ring-blue-500/20 outline-none' : 'bg-slate-50 text-slate-500 cursor-not-allowed'}`;

    const updatePlan = (field: string, value: unknown) => {
      const arr = [...(settings.plans[type] as unknown as Record<string, unknown>[])];
      arr[idx] = { ...arr[idx], [field]: value };
      setSettings({ ...settings, plans: { ...settings.plans, [type]: arr } });
    };

    const toggleEvModel = (model: string) => {
      const current = plan.evModels as string[];
      const updated = current.includes(model) ? current.filter(m => m !== model) : [...current, model];
      updatePlan('evModels', updated);
    };

    const isShareEv = type === 'shareEv';
    const isRentToOwn = type === 'rentToOwn';
    const depositLabel = isShareEv ? 'Deposit Each (৳)' : 'Deposit (৳)';
    const planAny = plan as Record<string, unknown>;
    const depositValue = isShareEv ? (planAny.depositEach as number) : (planAny.deposit as number);
    const dailyRentLabel = isShareEv ? 'Daily Rent Each (৳)' : 'Daily Rent (৳)';
    const dailyRentField = isShareEv ? (planAny.dailyRentEach as number) : (planAny.dailyRent as number);

    const closeAllDropdowns = () => setOpenDropdown(null);

    return (
      <div key={plan.id} className={`bg-white rounded-xl border overflow-hidden transition-all ${isEditing ? `border-${isColor}-300 shadow-lg shadow-${isColor}-500/5 ring-1 ring-${isColor}-100` : 'border-slate-200 shadow-sm'}`}>
        <div className={`${accent.bgLight} ${accent.border} px-4 py-3 border-b flex items-center justify-between`}>
          <div className="flex-1 min-w-0">
            <h4 className={`font-semibold ${accent.textDark} truncate`}>{plan.name || 'Untitled Plan'} — ৳{dailyRentField}/day</h4>
            <textarea
              disabled={!isEditing}
              value={plan.description}
              onChange={(e) => updatePlan('description', e.target.value)}
              className={`w-full bg-transparent text-sm ${accent.text} mt-1 border-0 resize-none p-0 focus:ring-0 leading-snug`}
              rows={1}
              placeholder="Plan description..."
            />
          </div>
          <div className="flex items-center gap-1.5 ml-3 flex-shrink-0">
            {!isEditing ? (
              <button
                onClick={() => setEditingPlanId(plan.id)}
                className={`p-2 ${accent.bgLight} ${accent.text} rounded-lg hover:${accent.bg}/10 transition-all`}
                title="Edit"
              >
                <Pencil className="w-4 h-4" />
              </button>
            ) : (
              <>
                <button
                  onClick={() => { handleSave(); setEditingPlanId(null); }}
                  disabled={!isDirty}
                  className={`px-3 py-1.5 ${accent.bg} text-white rounded-lg text-xs font-medium flex items-center gap-1 hover:${accent.bg}/90 transition-all ${!isDirty ? 'opacity-50 cursor-not-allowed' : ''}`}
                  title={isDirty ? 'Save changes' : 'No changes to save'}
                >
                  <Save className="w-3.5 h-3.5" /> Save
                </button>
                <button
                  onClick={() => setEditingPlanId(null)}
                  className="px-3 py-1.5 bg-slate-100 text-slate-600 rounded-lg text-xs font-medium hover:bg-slate-200 transition-all"
                >
                  Done
                </button>
              </>
            )}
            <button
              onClick={() => setDeleteModal({ type, idx })}
              className={`p-2 ${accent.bgLight} text-red-500 rounded-lg hover:bg-red-50 transition-all`}
              title="Delete"
            >
              <Trash2 className="w-4 h-4" />
            </button>
          </div>
        </div>

        <div className="p-5 space-y-5">
          <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
            <div>
              <label className="text-xs font-semibold text-slate-500 uppercase tracking-wide mb-2 block">Plan Condition</label>
              <input
                type="text"
                disabled={!isEditing}
                value={plan.name}
                onChange={(e) => updatePlan('name', e.target.value)}
                className={inputClass}
                placeholder="Plan Condition"
              />
            </div>

            <div>
              <label className="text-xs font-semibold text-slate-500 uppercase tracking-wide mb-2 block">EV Model Numbers</label>
              <div className="relative">
                <button
                  type="button"
                  disabled={!isEditing}
                  onClick={() => {
                    if (isEditing) {
                      closeAllDropdowns();
                      setOpenDropdown(openDropdown === `ev-${plan.id}` ? null : `ev-${plan.id}`);
                    }
                  }}
                  className={`${inputClass} text-left flex items-center justify-between ${isEditing ? 'cursor-pointer' : 'cursor-default'}`}
                >
                  <span className={plan.evModels.length > 0 ? 'text-slate-800 truncate' : 'text-slate-400'}>
                    {plan.evModels.length > 0 ? `${plan.evModels.length} selected` : 'Select EV Models...'}
                  </span>
                  <svg className={`w-4 h-4 text-slate-400 flex-shrink-0 ml-1 ${isEditing ? '' : 'hidden'}`} fill="none" stroke="currentColor" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 9l-7 7-7-7" /></svg>
                </button>
                {isEditing && openDropdown === `ev-${plan.id}` && (
                  <div className="absolute z-50 w-full mt-1 bg-white border border-slate-200 rounded-lg shadow-lg max-h-60 overflow-y-auto">
                    {EV_MODELS.map(model => (
                      <label key={model} className="flex items-center gap-2 px-3 py-2 hover:bg-slate-50 cursor-pointer text-sm">
                        <input
                          type="checkbox"
                          checked={plan.evModels.includes(model)}
                          onChange={() => toggleEvModel(model)}
                          className="rounded border-slate-300 text-blue-600"
                        />
                        <span className="text-slate-700">{model}</span>
                      </label>
                    ))}
                  </div>
                )}
              </div>
              {plan.evModels.length > 0 && (
                <div className="flex flex-wrap gap-1.5 mt-2">
                  {plan.evModels.map(model => (
                    <span key={model} className={`inline-flex items-center gap-1 px-2 py-0.5 rounded-full text-[11px] font-medium ${accent.bgLight} ${accent.text} border ${accent.border}`}>
                      {model}
                      {isEditing && (
                        <button onClick={() => toggleEvModel(model)} className="hover:opacity-70 ml-0.5">
                          <X className="w-2.5 h-2.5" />
                        </button>
                      )}
                    </span>
                  ))}
                </div>
              )}
            </div>

            <div>
              <label className="text-xs font-semibold text-slate-500 uppercase tracking-wide mb-2 block">{depositLabel}</label>
              <input
                type="number"
                disabled={!isEditing}
                value={depositValue}
                onChange={(e) => updatePlan(isShareEv ? 'depositEach' : 'deposit', parseInt(e.target.value) || 0)}
                className={inputClass}
              />
            </div>
          </div>

          {['dailyRent', 'weeklySubscription', 'monthlySubscription'].map((section) => {
            const labelMap: Record<string, string> = {
              dailyRent: isShareEv ? 'Daily Rent (Each)' : 'Daily Rent',
              weeklySubscription: isShareEv ? 'Weekly Subscription (Each)' : 'Weekly Subscription',
              monthlySubscription: isShareEv ? 'Monthly Subscription (Each)' : 'Monthly Subscription',
            };
            const baseField = isShareEv && section === 'dailyRent' ? 'dailyRentEach' : section === 'weeklySubscription' && isShareEv ? 'weeklySubscriptionEach' : section === 'monthlySubscription' && isShareEv ? 'monthlySubscriptionEach' : section;
            const baseVal = plan[baseField as keyof typeof plan] as number;

            return (
              <div key={section} className="bg-slate-50 rounded-xl p-4 space-y-3">
                <label className="text-xs font-semibold text-slate-500 uppercase tracking-wide">{labelMap[section]}</label>
                <div className="grid grid-cols-4 gap-3">
                  <div>
                    <label className="text-xs text-slate-500">Base (৳)</label>
                    <input type="number" disabled={!isEditing} value={baseVal} onChange={(e) => updatePlan(baseField, parseInt(e.target.value) || 0)} className={inputClass} />
                  </div>
                  {[1, 2, 3].map(n => {
                    const pField = `${section.replace('Subscription', '')}Penalty${n}` as keyof typeof plan;
                    const penaltyVal = plan[pField] as number;
                    const labelMap2: Record<string, string> = { daily: 'Day', weekly: 'Day', monthly: 'Day' };
                    const prefix = section === 'dailyRent' ? 'daily' : section === 'weeklySubscription' ? 'weekly' : 'monthly';
                    const pFieldMap: Record<string, string> = { daily: `dailyRentPenalty${n}`, weekly: `weeklyPenalty${n}`, monthly: `monthlyPenalty${n}` };
                    return (
                      <div key={n}>
                        <label className="text-xs text-slate-500">{labelMap2[prefix]} {n} {n === 3 ? '+ Lock' : ''} (৳)</label>
                        <input type="number" disabled={!isEditing} value={penaltyVal} onChange={(e) => updatePlan(pFieldMap[prefix], parseInt(e.target.value) || 0)} className={inputClass} />
                      </div>
                    );
                  })}
                </div>
              </div>
            );
          })}

          <div className="bg-slate-50 rounded-lg p-3">
            <label className="text-xs font-semibold text-slate-500 uppercase tracking-wide block mb-2">Contract Duration (Months)</label>
            <div className="flex flex-wrap gap-2">
              {plan.contractMonths.map(month => (
                <div key={month} className={`px-3 py-1.5 rounded-lg text-xs font-medium flex items-center gap-1.5 transition-all ${isEditing ? `${accent.bg} text-white` : 'bg-slate-200 text-slate-600'}`}>
                  {month} {month === 1 ? 'Month' : 'Months'}
                  {isEditing && (
                    <button onClick={() => updatePlan('contractMonths', plan.contractMonths.filter(m => m !== month))} className="hover:opacity-70">
                      <X className="w-3 h-3" />
                    </button>
                  )}
                </div>
              ))}
              {isEditing && (
                <div className="flex items-center gap-1">
                  <input
                    type="number"
                    min="1"
                    placeholder="+"
                    className="w-14 px-2 py-1.5 border border-slate-200 rounded-lg text-xs text-center focus:ring-2 focus:ring-blue-100 outline-none"
                    onKeyDown={(e) => {
                      if (e.key === 'Enter') {
                        const val = parseInt((e.target as HTMLInputElement).value);
                        if (val > 0 && !plan.contractMonths.includes(val)) {
                          updatePlan('contractMonths', [...plan.contractMonths, val].sort((a, b) => a - b));
                          (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)) {
                        updatePlan('contractMonths', [...plan.contractMonths, val].sort((a, b) => a - b));
                        input.value = '';
                      }
                    }}
                    className={`px-2 py-1.5 ${accent.bg} text-white rounded-lg text-xs`}
                  >
                    +
                  </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-xs font-semibold text-slate-500 uppercase tracking-wide mb-2 block">Description</label>
            <textarea
              disabled={!isEditing}
              value={plan.description}
              onChange={(e) => updatePlan('description', e.target.value)}
              className={inputClass}
              rows={2}
              placeholder="Enter plan description..."
            />
          </div>
        </div>
      </div>
    );
  };

  return (
    <>
      <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>
          {isDirty && (
            <span className="text-xs text-amber-500 font-medium flex items-center gap-1">
              <div className="w-1.5 h-1.5 bg-amber-500 rounded-full animate-pulse"></div>
              Unsaved changes
            </span>
          )}
        </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) => renderPlanCard(plan, idx, 'singleRent'))}
            <button onClick={() => addNewPlan('singleRent')} className="w-full py-3 border-2 border-dashed border-slate-300 rounded-xl text-slate-500 hover:border-blue-400 hover:text-blue-500 hover:bg-blue-50 transition-all flex items-center justify-center gap-2 text-sm font-medium">
              <Plus className="w-4 h-4" /> Add New Plan
            </button>
          </div>
        )}

        {activePlanTab === 'rentToOwn' && (
          <div className="space-y-6">
            {settings.plans.rentToOwn.map((plan, idx) => renderPlanCard(plan, idx, 'rentToOwn'))}
            <button onClick={() => addNewPlan('rentToOwn')} className="w-full py-3 border-2 border-dashed border-slate-300 rounded-xl text-slate-500 hover:border-purple-400 hover:text-purple-500 hover:bg-purple-50 transition-all flex items-center justify-center gap-2 text-sm font-medium">
              <Plus className="w-4 h-4" /> Add New Plan
            </button>
          </div>
        )}

        {activePlanTab === 'shareEv' && (
          <div className="space-y-6">
            {settings.plans.shareEv.map((plan, idx) => renderPlanCard(plan, idx, 'shareEv'))}
            <button onClick={() => addNewPlan('shareEv')} className="w-full py-3 border-2 border-dashed border-slate-300 rounded-xl text-slate-500 hover:border-green-400 hover:text-green-500 hover:bg-green-50 transition-all flex items-center justify-center gap-2 text-sm font-medium">
              <Plus className="w-4 h-4" /> Add New Plan
            </button>
          </div>
        )}
      </div>

      {deleteModal.type !== null && deleteModal.idx !== null && (
        <div className="fixed inset-0 bg-black/50 flex items-center justify-center z-50 p-4">
          <div className="bg-white rounded-xl shadow-xl w-full max-w-sm">
            <div className="p-4 border-b border-slate-100 flex justify-between items-center">
              <h3 className="font-semibold text-slate-800 flex items-center gap-2">
                <Trash2 className="w-5 h-5 text-red-500" /> Delete Plan
              </h3>
              <button onClick={() => setDeleteModal({ type: null, idx: null })} className="text-slate-400 hover:text-slate-600 text-2xl leading-none">&times;</button>
            </div>
            <div className="p-4">
              <p className="text-sm text-slate-600">Are you sure you want to delete this plan? This action cannot be undone.</p>
              {deleteModal.type && deleteModal.idx !== null && settings.plans[deleteModal.type][deleteModal.idx] && (
                <div className="mt-3 p-3 bg-slate-50 rounded-lg">
                  <p className="text-sm font-medium text-slate-700">{settings.plans[deleteModal.type][deleteModal.idx].name}</p>
                </div>
              )}
            </div>
            <div className="p-4 border-t border-slate-100 flex justify-end gap-2">
              <button onClick={() => setDeleteModal({ type: null, idx: null })} className="px-4 py-2 border border-slate-200 text-slate-600 rounded-lg text-sm hover:bg-slate-50">Cancel</button>
              <button onClick={handleDeletePlan} className="px-4 py-2 bg-red-600 text-white rounded-lg text-sm hover:bg-red-700">Delete Plan</button>
            </div>
          </div>
        </div>
      )}
    </>
  );
}