'use client';

import { Plus, X, Save } from 'lucide-react';
import type { CompanySettings } from '../page';

interface InvestmentSettingsProps {
  settings: CompanySettings;
  setSettings: React.Dispatch<React.SetStateAction<CompanySettings>>;
  activeInvestTab: number;
  setActiveInvestTab: (n: number) => void;
  addInvestPlan: boolean;
  setAddInvestPlan: (v: boolean) => void;
  newInvestName: string;
  setNewInvestName: (v: string) => void;
  newInvestStatus: string;
  setNewInvestStatus: (v: string) => void;
  newInvestTarget: number;
  setNewInvestTarget: (n: number) => void;
  newInvestStart: string;
  setNewInvestStart: (v: string) => void;
  newInvestEnd: string;
  setNewInvestEnd: (v: string) => void;
  newInvestMin: number;
  setNewInvestMin: (n: number) => void;
  newInvestMax: number;
  setNewInvestMax: (n: number) => void;
  newInvestDuration: number;
  setNewInvestDuration: (n: number) => void;
  newInvestLock: number;
  setNewInvestLock: (n: number) => void;
  newInvestPenalty: number;
  setNewInvestPenalty: (n: number) => void;
  newInvestFicoSingleRent: number;
  setNewInvestFicoSingleRent: (n: number) => void;
  newInvestFicoRentToOwn: number;
  setNewInvestFicoRentToOwn: (n: number) => void;
  newInvestFicoShareEv: number;
  setNewInvestFicoShareEv: (n: number) => void;
  newInvestDesc: string;
  setNewInvestDesc: (v: string) => void;
  newInvestEvBasePrice: number;
  setNewInvestEvBasePrice: (n: number) => void;
  newInvestMinQuantity: number;
  setNewInvestMinQuantity: (n: number) => void;
  createInvestPlan: () => void;
  handleSave: () => void;
}

export default function InvestmentSettings({
  settings, setSettings,
  activeInvestTab, setActiveInvestTab,
  addInvestPlan, setAddInvestPlan,
  newInvestName, setNewInvestName,
  newInvestStatus, setNewInvestStatus,
  newInvestTarget, setNewInvestTarget,
  newInvestStart, setNewInvestStart,
  newInvestEnd, setNewInvestEnd,
  newInvestMin, setNewInvestMin,
  newInvestMax, setNewInvestMax,
  newInvestDuration, setNewInvestDuration,
  newInvestLock, setNewInvestLock,
  newInvestPenalty, setNewInvestPenalty,
  newInvestFicoSingleRent, setNewInvestFicoSingleRent,
  newInvestFicoRentToOwn, setNewInvestFicoRentToOwn,
  newInvestFicoShareEv, setNewInvestFicoShareEv,
  newInvestDesc, setNewInvestDesc,
  newInvestEvBasePrice, setNewInvestEvBasePrice,
  newInvestMinQuantity, setNewInvestMinQuantity,
  createInvestPlan, handleSave,
}: InvestmentSettingsProps) {
  const calculatedMinInvestment = newInvestMinQuantity * newInvestEvBasePrice;
  return (
    <div className="p-6 space-y-6">
      <div className="flex items-center justify-between">
        <h3 className="text-lg font-semibold text-slate-800">EV 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">EV Investment Plans ({settings.plans.investment.length})</h4>
          <p className="text-sm text-amber-600">Manage EV 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 Condition</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">EV Base Price (৳)</label>
                <input type="number" value={newInvestEvBasePrice} onChange={(e) => setNewInvestEvBasePrice(parseInt(e.target.value))} className="w-full px-3 py-2 border border-slate-200 rounded-lg text-sm mt-1" placeholder="Single EV cost" />
              </div>
              <div>
                <label className="text-sm text-slate-600">Minimum Quantity (Bikes)</label>
                <input type="number" value={newInvestMinQuantity} onChange={(e) => setNewInvestMinQuantity(parseInt(e.target.value))} className="w-full px-3 py-2 border border-slate-200 rounded-lg text-sm mt-1" placeholder="Min bikes to invest" />
              </div>
              <div>
                <label className="text-sm text-slate-600">Min Investment (৳)</label>
                <div className="flex items-center gap-2 mt-1">
                  <input type="number" value={calculatedMinInvestment} disabled className="w-full px-3 py-2 border border-slate-200 rounded-lg text-sm bg-slate-100" />
                  <span className="text-xs text-slate-500 whitespace-nowrap">= Qty × Base Price</span>
                </div>
              </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">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">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="grid grid-cols-3 gap-4 mt-4">
              <div>
                <label className="text-sm text-slate-600">FICO Share (%) - Single Rent</label>
                <input type="number" value={newInvestFicoSingleRent} onChange={(e) => setNewInvestFicoSingleRent(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">FICO Share (%) - Rent to Own</label>
                <input type="number" value={newInvestFicoRentToOwn} onChange={(e) => setNewInvestFicoRentToOwn(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">FICO Share (%) - Share an EV</label>
                <input type="number" value={newInvestFicoShareEv} onChange={(e) => setNewInvestFicoShareEv(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={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}</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 Condition</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">EV Base Price (৳)</label>
                <input type="number" value={plan.evBasePrice} onChange={(e) => { const updated = [...settings.plans.investment]; updated[idx].evBasePrice = 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">Minimum Quantity (Bikes)</label>
                <input type="number" value={plan.minQuantity} onChange={(e) => { const updated = [...settings.plans.investment]; updated[idx].minQuantity = 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">Min Investment (৳)</label>
                <div className="flex items-center gap-2 mt-1">
                  <input type="number" value={plan.evBasePrice * plan.minQuantity} disabled className="w-full px-3 py-2 border border-slate-200 rounded-lg text-sm bg-slate-100" />
                  <span className="text-xs text-slate-500 whitespace-nowrap">= Qty × Base Price</span>
                </div>
              </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">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">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="grid grid-cols-3 gap-4 mt-4">
              <div>
                <label className="text-sm text-slate-600">FICO Share (%) - Single Rent</label>
                <input type="number" value={(plan as any).ficoSingleRent} onChange={(e) => { const updated = [...settings.plans.investment]; updated[idx].ficoSingleRent = 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">FICO Share (%) - Rent to Own</label>
                <input type="number" value={(plan as any).ficoRentToOwn} onChange={(e) => { const updated = [...settings.plans.investment]; updated[idx].ficoRentToOwn = 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">FICO Share (%) - Share an EV</label>
                <input type="number" value={(plan as any).ficoShareEv} onChange={(e) => { const updated = [...settings.plans.investment]; updated[idx].ficoShareEv = 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">
              <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>
  );
}