'use client';

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

interface SwapStationSettingsProps {
  settings: CompanySettings;
  setSettings: React.Dispatch<React.SetStateAction<CompanySettings>>;
  activeSwapTab: number;
  setActiveSwapTab: (n: number) => void;
  addSwapStationPlan: boolean;
  setAddSwapStationPlan: (v: boolean) => void;
  newSwapName: string;
  setNewSwapName: (v: string) => void;
  newSwapStatus: string;
  setNewSwapStatus: (v: string) => void;
  newSwapBatteryCount: number;
  setNewSwapBatteryCount: (n: number) => void;
  newSwapPrice: number;
  setNewSwapPrice: (n: number) => void;
  newSwapMonthly: number;
  setNewSwapMonthly: (n: number) => void;
  newSwapDaily: number;
  setNewSwapDaily: (n: number) => void;
  newSwapMin: number;
  setNewSwapMin: (n: number) => void;
  newSwapMax: number;
  setNewSwapMax: (n: number) => void;
  newSwapProfit: number;
  setNewSwapProfit: (n: number) => void;
  newSwapDesc: string;
  setNewSwapDesc: (v: string) => void;
  createSwapStationPlan: () => void;
  handleSave: () => void;
}

export default function SwapStationSettings({
  settings, setSettings,
  activeSwapTab, setActiveSwapTab,
  addSwapStationPlan, setAddSwapStationPlan,
  newSwapName, setNewSwapName,
  newSwapStatus, setNewSwapStatus,
  newSwapBatteryCount, setNewSwapBatteryCount,
  newSwapPrice, setNewSwapPrice,
  newSwapMonthly, setNewSwapMonthly,
  newSwapDaily, setNewSwapDaily,
  newSwapMin, setNewSwapMin,
  newSwapMax, setNewSwapMax,
  newSwapProfit, setNewSwapProfit,
  newSwapDesc, setNewSwapDesc,
  createSwapStationPlan, handleSave,
}: SwapStationSettingsProps) {
  return (
    <div className="p-6 space-y-6">
      <div className="flex items-center justify-between">
        <h3 className="text-lg font-semibold text-slate-800">Swap Station Plans</h3>
      </div>

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

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

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

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