'use client';

import { useState, useEffect, useCallback } from 'react';
import { Plus, Pencil, Trash2 } from 'lucide-react';
import { businessRulesService } from '@/services/business-rules.service';
import { getErrorMessage } from '@/lib/errors';
import { TableSkeleton } from '@/components/priority/skeletons';
import { cn } from '@/lib/utils';
import { Banner, Field, NumberInput, TextInput, SelectInput, useToasts } from './_shared';

export default function CommissionTab({ sysConfig }: any) {
  const [rules, setRules] = useState<any[]>([]);
  const [tiers, setTiers] = useState<any[]>([]);
  const [loading, setLoading] = useState(true);
  const [saving, setSaving] = useState(false);
  const { error, setError, success, setSuccess, Banners } = useToasts();
  const [showForm, setShowForm] = useState(false);
  const [editing, setEditing] = useState<any>(null);
  const [form, setForm] = useState<any>({ name: '', tierId: '', ruleType: 'PERCENTAGE', percentage: '', flatFee: '', minAmount: '', maxAmount: '', currency: sysConfig.currency, isActive: true, description: '' });

  const load = useCallback(async () => {
    setLoading(true);
    try {
      const [r, t] = await Promise.all([businessRulesService.getCommissionRules(), businessRulesService.getTiers(true)]);
      setRules(r || []); setTiers(t || []);
    } catch (e: any) { setError(getErrorMessage(e)); }
    finally { setLoading(false); }
  }, [setError]);

  useEffect(() => { load(); }, [load]);

  const openNew = () => { setEditing(null); setForm({ name: '', tierId: tiers[0]?.id || '', ruleType: 'PERCENTAGE', percentage: '', flatFee: '', minAmount: '', maxAmount: '', currency: sysConfig.currency, isActive: true, description: '' }); setShowForm(true); };
  const openEdit = (r: any) => { setEditing(r); setForm({ name: r.name, tierId: r.tierId, ruleType: r.ruleType, percentage: String(r.percentage ?? ''), flatFee: String(r.flatFee ?? ''), minAmount: String(r.minAmount ?? ''), maxAmount: String(r.maxAmount ?? ''), currency: r.currency || sysConfig.currency, isActive: r.isActive, description: r.description ?? '' }); setShowForm(true); };

  const save = async () => {
    setSaving(true); setError(null); setSuccess(null);
    try {
      const payload: any = { name: form.name, tierId: form.tierId, ruleType: form.ruleType, percentage: Number(form.percentage) || 0, flatFee: Number(form.flatFee) || 0, minAmount: Number(form.minAmount) || 0, maxAmount: form.maxAmount ? Number(form.maxAmount) : null, currency: form.currency || sysConfig.currency, isActive: !!form.isActive, description: form.description || null };
      if (editing) { await businessRulesService.updateCommissionRule(editing.id, payload); setSuccess('Rule updated'); }
      else { await businessRulesService.createCommissionRule(payload); setSuccess('Rule created'); }
      setShowForm(false); load();
    } catch (e: any) { setError(getErrorMessage(e)); }
    finally { setSaving(false); }
  };

  const remove = async (id: string) => {
    if (!confirm('Delete this commission rule?')) return;
    try { await businessRulesService.deleteCommissionRule(id); setSuccess('Rule deleted'); load(); }
    catch (e: any) { setError(getErrorMessage(e)); }
  };

  return (
    <div className="space-y-4">
      <Banners />
      <div className="flex items-center justify-between">
        <p className="text-sm text-slate-400">Per-tier commission rules. Either a percentage of the trade or a fixed {sysConfig.currency} fee.</p>
        <button onClick={openNew} className="inline-flex items-center gap-2 rounded-lg bg-blue-600 px-4 py-2 text-sm font-semibold text-white hover:bg-blue-700"><Plus className="h-4 w-4" />Add Rule</button>
      </div>
      {showForm && (
        <div className="rounded-xl border border-white/10 bg-slate-900/50 p-5">
          <h3 className="mb-4 font-semibold text-white">{editing ? 'Edit' : 'New'} Commission Rule</h3>
          <div className="grid grid-cols-1 gap-4 md:grid-cols-2">
            <Field label="Name" required><TextInput value={form.name} onChange={(e) => setForm({ ...form, name: e.target.value })} /></Field>
            <Field label="Tier" required>
              <SelectInput value={form.tierId} onChange={(e) => setForm({ ...form, tierId: e.target.value })}>
                <option value="">Select tier...</option>
                {tiers.map((t: any) => <option key={t.id} value={t.id}>{t.name}</option>)}
              </SelectInput>
            </Field>
            <Field label="Rule Type">
              <SelectInput value={form.ruleType} onChange={(e) => setForm({ ...form, ruleType: e.target.value })}>
                <option value="PERCENTAGE">Percentage</option>
                <option value="FIXED">Fixed</option>
              </SelectInput>
            </Field>
            <Field label="Percentage (0-1)"><NumberInput step="0.001" value={form.percentage} onChange={(e) => setForm({ ...form, percentage: e.target.value })} /></Field>
            <Field label={`Flat Fee (${sysConfig.currency})`}><NumberInput step="0.01" value={form.flatFee} onChange={(e) => setForm({ ...form, flatFee: e.target.value })} /></Field>
            <Field label={`Min Amount (${sysConfig.currency})`}><NumberInput step="0.01" value={form.minAmount} onChange={(e) => setForm({ ...form, minAmount: e.target.value })} /></Field>
            <Field label={`Max Amount (${sysConfig.currency})`} hint="Optional"><NumberInput step="0.01" value={form.maxAmount} onChange={(e) => setForm({ ...form, maxAmount: e.target.value })} /></Field>
            <Field label="Currency"><TextInput value={form.currency} onChange={(e) => setForm({ ...form, currency: e.target.value })} /></Field>
            <div className="md:col-span-2"><Field label="Description"><textarea value={form.description} onChange={(e) => setForm({ ...form, description: e.target.value })} rows={2} className="w-full rounded-lg border border-white/10 bg-white/5 px-4 py-2 text-white" /></Field></div>
            <div className="md:col-span-2 flex items-center gap-2">
              <input id="cr-active" type="checkbox" checked={!!form.isActive} onChange={(e) => setForm({ ...form, isActive: e.target.checked })} className="h-4 w-4 rounded" />
              <label htmlFor="cr-active" className="text-sm text-slate-300">Active</label>
            </div>
          </div>
          <div className="mt-4 flex gap-2">
            <button onClick={save} disabled={saving} className="rounded-lg bg-emerald-600 px-4 py-2 text-sm font-semibold text-white hover:bg-emerald-700 disabled:opacity-50">{saving ? 'Saving...' : 'Save'}</button>
            <button onClick={() => setShowForm(false)} className="rounded-lg border border-white/10 px-4 py-2 text-sm text-slate-300 hover:bg-white/5">Cancel</button>
          </div>
        </div>
      )}
      {loading ? <TableSkeleton rows={3} /> : rules.length === 0 ? <p className="rounded-lg border border-white/10 bg-slate-900/30 p-6 text-center text-sm text-slate-400">No commission rules yet</p> : (
        <div className="overflow-x-auto rounded-xl border border-white/10 bg-slate-900/30">
          <table className="w-full text-sm">
            <thead><tr className="border-b border-white/10 text-left text-slate-400">
              <th className="px-3 py-2">Name</th><th className="px-3 py-2">Tier</th><th className="px-3 py-2">Type</th><th className="px-3 py-2">Value</th><th className="px-3 py-2">Range</th><th className="px-3 py-2">Status</th><th className="px-3 py-2">Actions</th>
            </tr></thead>
            <tbody>
              {rules.map((r: any) => (
                <tr key={r.id} className="border-b border-white/5">
                  <td className="px-3 py-3 text-white">{r.name}</td>
                  <td className="px-3 py-3 text-slate-300">{r.tier?.name || r.tierId}</td>
                  <td className="px-3 py-3 text-slate-300">{r.ruleType}</td>
                  <td className="px-3 py-3 text-slate-300">{r.ruleType === 'PERCENTAGE' ? `${(Number(r.percentage) * 100).toFixed(2)}%` : `${Number(r.flatFee).toFixed(2)} ${r.currency || sysConfig.currency}`}</td>
                  <td className="px-3 py-3 text-slate-300">{Number(r.minAmount).toFixed(2)} - {r.maxAmount ? Number(r.maxAmount).toFixed(2) : '∞'}</td>
                  <td className="px-3 py-3"><span className={cn('rounded-full px-2 py-1 text-xs', r.isActive ? 'bg-emerald-500/20 text-emerald-300' : 'bg-slate-500/20 text-slate-300')}>{r.isActive ? 'Active' : 'Inactive'}</span></td>
                  <td className="px-3 py-3 flex gap-2">
                    <button onClick={() => openEdit(r)} className="rounded-lg p-1 text-blue-400 hover:bg-blue-500/10"><Pencil className="h-4 w-4" /></button>
                    <button onClick={() => remove(r.id)} className="rounded-lg p-1 text-red-400 hover:bg-red-500/10"><Trash2 className="h-4 w-4" /></button>
                  </td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>
      )}
    </div>
  );
}