'use client';

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

interface RiderRequestSettingsProps {
  settings: CompanySettings;
  setSettings: React.Dispatch<React.SetStateAction<CompanySettings>>;
  activeRiderTab: number;
  setActiveRiderTab: (n: number) => void;
  addRiderPlan: boolean;
  setAddRiderPlan: (v: boolean) => void;
  newRiderName: string;
  setNewRiderName: (v: string) => void;
  newRiderTier: string;
  setNewRiderTier: (v: string) => void;
  newRiderStatus: string;
  setNewRiderStatus: (v: string) => void;
  newRiderMin: number;
  setNewRiderMin: (n: number) => void;
  newRiderMax: number;
  setNewRiderMax: (n: number) => void;
  newRiderMonthly: number;
  setNewRiderMonthly: (n: number) => void;
  newRiderDaily: number;
  setNewRiderDaily: (n: number) => void;
  newRiderDeposit: number;
  setNewRiderDeposit: (n: number) => void;
  newRiderCommission: number;
  setNewRiderCommission: (n: number) => void;
  newRiderTarget: number;
  setNewRiderTarget: (n: number) => void;
  newRiderHoliday: number;
  setNewRiderHoliday: (n: number) => void;
  newRiderDesc: string;
  setNewRiderDesc: (v: string) => void;
  createRiderPlan: () => void;
  handleSave: () => void;
}

export default function RiderRequestSettings({
  settings, setSettings,
  activeRiderTab, setActiveRiderTab,
  addRiderPlan, setAddRiderPlan,
  newRiderName, setNewRiderName,
  newRiderTier, setNewRiderTier,
  newRiderStatus, setNewRiderStatus,
  newRiderMin, setNewRiderMin,
  newRiderMax, setNewRiderMax,
  newRiderMonthly, setNewRiderMonthly,
  newRiderDaily, setNewRiderDaily,
  newRiderDeposit, setNewRiderDeposit,
  newRiderCommission, setNewRiderCommission,
  newRiderTarget, setNewRiderTarget,
  newRiderHoliday, setNewRiderHoliday,
  newRiderDesc, setNewRiderDesc,
  createRiderPlan, handleSave,
}: RiderRequestSettingsProps) {
  return (
    <div className="p-6 space-y-6">
      <div className="flex items-center justify-between">
        <h3 className="text-lg font-semibold text-slate-800">Rider Request Plans</h3>
      </div>

      <div className="flex items-center justify-between bg-rose-50 border border-rose-200 rounded-xl p-4">
        <div>
          <h4 className="font-semibold text-rose-800">Rider Request Plans ({settings.plans.riderRequest.length})</h4>
          <p className="text-sm text-rose-600">Manage rider request plans for operators</p>
        </div>
        <button onClick={() => { setAddRiderPlan(true); setNewRiderName(''); }} className="px-4 py-2 bg-rose-600 text-white rounded-lg text-sm font-medium flex items-center gap-2">
          <Plus className="w-4 h-4" /> New Plan
        </button>
      </div>

      {addRiderPlan && (
        <div className="bg-white rounded-xl border border-rose-300 overflow-hidden">
          <div className="bg-rose-100 px-4 py-3 border-b border-rose-200 flex items-center justify-between">
            <div>
              <h4 className="font-semibold text-rose-800">New Rider Request Plan</h4>
              <p className="text-sm text-rose-600 mt-1">Fill in the details below</p>
            </div>
            <button onClick={() => setAddRiderPlan(false)} className="text-rose-600 hover:text-rose-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={newRiderName} onChange={(e) => setNewRiderName(e.target.value)} placeholder="e.g., Premium Rider 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">Tier</label>
                <select value={newRiderTier} onChange={(e) => setNewRiderTier(e.target.value)} className="w-full px-3 py-2 border border-slate-200 rounded-lg text-sm mt-1">
                  <option value="Premium">Premium</option>
                  <option value="Standard">Standard</option>
                  <option value="Economy">Economy</option>
                </select>
              </div>
              <div>
                <label className="text-sm text-slate-600">Status</label>
                <select value={newRiderStatus} onChange={(e) => setNewRiderStatus(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">Min Riders</label>
                <input type="number" value={newRiderMin} onChange={(e) => setNewRiderMin(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 Riders</label>
                <input type="number" value={newRiderMax} onChange={(e) => setNewRiderMax(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={newRiderMonthly} onChange={(e) => setNewRiderMonthly(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={newRiderDaily} onChange={(e) => setNewRiderDaily(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">Deposit (৳)</label>
                <input type="number" value={newRiderDeposit} onChange={(e) => setNewRiderDeposit(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">Commission (%)</label>
                <input type="number" value={newRiderCommission} onChange={(e) => setNewRiderCommission(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 Ride Target</label>
                <input type="number" value={newRiderTarget} onChange={(e) => setNewRiderTarget(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">Weekly Holiday</label>
                <input type="number" value={newRiderHoliday} onChange={(e) => setNewRiderHoliday(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={newRiderDesc} onChange={(e) => setNewRiderDesc(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={createRiderPlan} className="mt-4 px-4 py-2 bg-rose-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.riderRequest.map((plan, idx) => (
          <button key={idx} onClick={() => setActiveRiderTab(idx)} className={`px-4 py-2 text-sm font-medium border-b-2 -mb-px ${activeRiderTab === idx ? 'border-rose-500 text-rose-600' : 'border-transparent text-slate-500 hover:text-slate-700'}`}>{idx + 1}. {plan.name}</button>
        ))}
      </div>

      {settings.plans.riderRequest.length > 0 && settings.plans.riderRequest.map((plan, idx) => idx === activeRiderTab && (
        <div key={idx} className="bg-white rounded-xl border border-slate-200 overflow-hidden">
          <div className="bg-rose-50 px-4 py-3 border-b border-rose-100 flex items-center justify-between">
            <div>
              <h4 className="font-semibold text-rose-800">{plan.name} - {plan.tier}</h4>
              <p className="text-sm text-rose-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.riderRequest]; updated[idx].name = e.target.value; setSettings({ ...settings, plans: { ...settings.plans, riderRequest: 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">Tier</label>
                <select value={plan.tier} onChange={(e) => { const updated = [...settings.plans.riderRequest]; updated[idx].tier = e.target.value; setSettings({ ...settings, plans: { ...settings.plans, riderRequest: updated } }); }} className="w-full px-3 py-2 border border-slate-200 rounded-lg text-sm mt-1">
                  <option value="Premium">Premium</option>
                  <option value="Standard">Standard</option>
                  <option value="Economy">Economy</option>
                </select>
              </div>
              <div>
                <label className="text-sm text-slate-600">Status</label>
                <select value={plan.status} onChange={(e) => { const updated = [...settings.plans.riderRequest]; updated[idx].status = e.target.value; setSettings({ ...settings, plans: { ...settings.plans, riderRequest: 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">Min Riders</label>
                <input type="number" value={plan.minRiders} onChange={(e) => { const updated = [...settings.plans.riderRequest]; updated[idx].minRiders = parseInt(e.target.value); setSettings({ ...settings, plans: { ...settings.plans, riderRequest: 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 Riders</label>
                <input type="number" value={plan.maxRiders} onChange={(e) => { const updated = [...settings.plans.riderRequest]; updated[idx].maxRiders = parseInt(e.target.value); setSettings({ ...settings, plans: { ...settings.plans, riderRequest: 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.riderRequest]; updated[idx].monthlySubscription = parseInt(e.target.value); setSettings({ ...settings, plans: { ...settings.plans, riderRequest: 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.riderRequest]; updated[idx].dailySubscription = parseInt(e.target.value); setSettings({ ...settings, plans: { ...settings.plans, riderRequest: 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">Deposit (৳)</label>
                <input type="number" value={plan.deposit} onChange={(e) => { const updated = [...settings.plans.riderRequest]; updated[idx].deposit = parseInt(e.target.value); setSettings({ ...settings, plans: { ...settings.plans, riderRequest: 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">Commission (%)</label>
                <input type="number" value={plan.commissionPercent} onChange={(e) => { const updated = [...settings.plans.riderRequest]; updated[idx].commissionPercent = parseInt(e.target.value); setSettings({ ...settings, plans: { ...settings.plans, riderRequest: 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 Ride Target</label>
                <input type="number" value={plan.dailyRideTarget} onChange={(e) => { const updated = [...settings.plans.riderRequest]; updated[idx].dailyRideTarget = parseInt(e.target.value); setSettings({ ...settings, plans: { ...settings.plans, riderRequest: 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">Weekly Holiday</label>
                <input type="number" value={plan.weeklyHoliday} onChange={(e) => { const updated = [...settings.plans.riderRequest]; updated[idx].weeklyHoliday = parseInt(e.target.value); setSettings({ ...settings, plans: { ...settings.plans, riderRequest: 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.riderRequest]; updated[idx].description = e.target.value; setSettings({ ...settings, plans: { ...settings.plans, riderRequest: 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-rose-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>
  );
}