'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 ReferralTab({ sysConfig }: any) {
  const [rules, setRules] = useState<any[]>([]);
  const [configs, setConfigs] = 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 [showConfigForm, setShowConfigForm] = useState(false);
  const [editing, setEditing] = useState<any>(null);
  const [editingConfig, setEditingConfig] = useState<any>(null);
  const [form, setForm] = useState<any>({ name: '', tierId: '', rewardType: 'FIXED', rewardValue: '', currency: sysConfig.currency, minReferredAmount: '', maxReward: '', isActive: true, description: '' });
  const [cfgForm, setCfgForm] = useState<any>({ name: '', description: '', amount: '', currency: sysConfig.currency, rewardType: 'FIXED', minReferredAmount: '', maxReward: '', minPurchaseRange: '', maxPurchaseRange: '', appliesToTierId: '', priority: '0', isEnabled: true, isActive: true });

  const load = useCallback(async () => {
    setLoading(true);
    try {
      const [r, c, t] = await Promise.all([businessRulesService.getReferralRules(), businessRulesService.getReferralCommissionConfigs(), businessRulesService.getTiers(true)]);
      setRules(r || []); setConfigs(c || []); 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 || '', rewardType: 'FIXED', rewardValue: '', currency: sysConfig.currency, minReferredAmount: '', maxReward: '', isActive: true, description: '' }); setShowForm(true); };
  const openEdit = (r: any) => { setEditing(r); setForm({ name: r.name, tierId: r.tierId, rewardType: r.rewardType, rewardValue: String(r.rewardValue ?? ''), currency: r.currency || sysConfig.currency, minReferredAmount: String(r.minReferredAmount ?? ''), maxReward: String(r.maxReward ?? ''), 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, rewardType: form.rewardType, rewardValue: Number(form.rewardValue) || 0, currency: form.currency || sysConfig.currency, minReferredAmount: Number(form.minReferredAmount) || 0, maxReward: form.maxReward ? Number(form.maxReward) : null, isActive: !!form.isActive, description: form.description || null };
      if (editing) { await businessRulesService.updateReferralRule(editing.id, payload); setSuccess('Rule updated'); }
      else { await businessRulesService.createReferralRule(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 referral rule?')) return;
    try { await businessRulesService.deleteReferralRule(id); setSuccess('Rule deleted'); load(); }
    catch (e: any) { setError(getErrorMessage(e)); }
  };

  const openNewConfig = () => { setEditingConfig(null); setCfgForm({ name: '', description: '', amount: '', currency: sysConfig.currency, rewardType: 'FIXED', minReferredAmount: '', maxReward: '', minPurchaseRange: '', maxPurchaseRange: '', appliesToTierId: '', priority: '0', isEnabled: true, isActive: true }); setShowConfigForm(true); };
  const openEditConfig = (c: any) => { setEditingConfig(c); setCfgForm({ name: c.name, description: c.description || '', amount: String(c.amount ?? ''), currency: c.currency || sysConfig.currency, rewardType: c.rewardType || 'FIXED', minReferredAmount: c.minReferredAmount != null ? String(c.minReferredAmount) : '', maxReward: c.maxReward != null ? String(c.maxReward) : '', minPurchaseRange: c.minPurchaseRange != null ? String(c.minPurchaseRange) : '', maxPurchaseRange: c.maxPurchaseRange != null ? String(c.maxPurchaseRange) : '', appliesToTierId: c.appliesToTierId || '', priority: String(c.priority ?? 0), isEnabled: c.isEnabled ?? true, isActive: c.isActive ?? true }); setShowConfigForm(true); };
  const saveConfig = async () => {
    setSaving(true); setError(null); setSuccess(null);
    try {
      const payload: any = { name: cfgForm.name, description: cfgForm.description || null, amount: Number(cfgForm.amount) || 0, currency: cfgForm.currency || sysConfig.currency, rewardType: cfgForm.rewardType, minReferredAmount: cfgForm.minReferredAmount ? Number(cfgForm.minReferredAmount) : null, maxReward: cfgForm.maxReward ? Number(cfgForm.maxReward) : null, minPurchaseRange: Number(cfgForm.minPurchaseRange) || 0, maxPurchaseRange: cfgForm.maxPurchaseRange ? Number(cfgForm.maxPurchaseRange) : null, appliesToTierId: cfgForm.appliesToTierId || null, priority: Number(cfgForm.priority) || 0, isEnabled: !!cfgForm.isEnabled, isActive: !!cfgForm.isActive };
      if (editingConfig) { await businessRulesService.updateReferralCommissionConfig(editingConfig.id, payload); setSuccess('Config updated'); }
      else { await businessRulesService.createReferralCommissionConfig(payload); setSuccess('Config created'); }
      setShowConfigForm(false); load();
    } catch (e: any) { setError(getErrorMessage(e)); }
    finally { setSaving(false); }
  };
  const removeConfig = async (id: string) => {
    if (!confirm('Delete this referral commission config?')) return;
    try { await businessRulesService.deleteReferralCommissionConfig(id); setSuccess('Config deleted'); load(); }
    catch (e: any) { setError(getErrorMessage(e)); }
  };

  return (
    <div className="space-y-6">
      <Banners />

      <div className="rounded-xl border border-white/10 bg-slate-900/50 p-6">
        <div className="flex items-center justify-between">
          <h2 className="text-lg font-semibold text-white">Referral Rules (per Tier)</h2>
          <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="mt-4 rounded-lg border border-white/10 bg-slate-800/50 p-4">
            <h3 className="mb-4 font-semibold text-white">{editing ? 'Edit' : 'New'} Referral 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="Reward Type">
                <SelectInput value={form.rewardType} onChange={(e) => setForm({ ...form, rewardType: e.target.value })}>
                  <option value="FIXED">Fixed</option>
                  <option value="PERCENTAGE">Percentage</option>
                </SelectInput>
              </Field>
              <Field label="Reward Value"><NumberInput step="0.001" min="0" value={form.rewardValue} onChange={(e) => setForm({ ...form, rewardValue: e.target.value })} /></Field>
              <Field label="Currency"><TextInput value={form.currency} onChange={(e) => setForm({ ...form, currency: e.target.value })} /></Field>
              <Field label="Min Referred Amount"><NumberInput step="0.01" min="0" value={form.minReferredAmount} onChange={(e) => setForm({ ...form, minReferredAmount: e.target.value })} /></Field>
              <Field label="Max Reward (cap)"><NumberInput step="0.01" min="0" value={form.maxReward} onChange={(e) => setForm({ ...form, maxReward: 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="rr-active" type="checkbox" checked={!!form.isActive} onChange={(e) => setForm({ ...form, isActive: e.target.checked })} className="h-4 w-4 rounded" />
                <label htmlFor="rr-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 ? <div className="mt-4"><TableSkeleton rows={3} /></div> : rules.length === 0 ? <p className="mt-4 rounded-lg border border-white/10 bg-slate-900/30 p-6 text-center text-sm text-slate-400">No referral rules yet</p> : (
          <div className="mt-4 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">Reward</th><th className="px-3 py-2">Min Referred</th><th className="px-3 py-2">Max Cap</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.rewardType}</td>
                    <td className="px-3 py-3 text-slate-300">{r.rewardType === 'PERCENTAGE' ? `${(Number(r.rewardValue) * 100).toFixed(2)}%` : `${Number(r.rewardValue).toFixed(2)} ${r.currency || sysConfig.currency}`}</td>
                    <td className="px-3 py-3 text-slate-300">{Number(r.minReferredAmount).toFixed(2)}</td>
                    <td className="px-3 py-3 text-slate-300">{r.maxReward ? Number(r.maxReward).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>

      <div className="rounded-xl border border-white/10 bg-slate-900/50 p-6">
        <div className="flex items-center justify-between">
          <h2 className="text-lg font-semibold text-white">Referral Commission Configs (Purchase-Range)</h2>
          <button onClick={openNewConfig} 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 Config</button>
        </div>
        <p className="mt-1 text-xs text-slate-500">Alternative reward definition: pay referrer when referred user buys within a purchase amount range.</p>
        {showConfigForm && (
          <div className="mt-4 rounded-lg border border-white/10 bg-slate-800/50 p-4">
            <h3 className="mb-4 font-semibold text-white">{editingConfig ? 'Edit' : 'New'} Commission Config</h3>
            <div className="grid grid-cols-1 gap-4 md:grid-cols-2">
              <Field label="Name" required><TextInput value={cfgForm.name} onChange={(e) => setCfgForm({ ...cfgForm, name: e.target.value })} /></Field>
              <Field label="Priority"><NumberInput value={cfgForm.priority} onChange={(e) => setCfgForm({ ...cfgForm, priority: e.target.value })} /></Field>
              <Field label="Reward Type">
                <SelectInput value={cfgForm.rewardType} onChange={(e) => setCfgForm({ ...cfgForm, rewardType: e.target.value })}>
                  <option value="FIXED">Fixed</option>
                  <option value="PERCENTAGE">Percentage</option>
                </SelectInput>
              </Field>
              <Field label="Amount / Rate"><NumberInput step="0.001" min="0" value={cfgForm.amount} onChange={(e) => setCfgForm({ ...cfgForm, amount: e.target.value })} /></Field>
              <Field label="Currency"><TextInput value={cfgForm.currency} onChange={(e) => setCfgForm({ ...cfgForm, currency: e.target.value })} /></Field>
              <Field label="Min Referred Amount"><NumberInput step="0.01" min="0" value={cfgForm.minReferredAmount} onChange={(e) => setCfgForm({ ...cfgForm, minReferredAmount: e.target.value })} /></Field>
              <Field label="Max Reward (cap)"><NumberInput step="0.01" min="0" value={cfgForm.maxReward} onChange={(e) => setCfgForm({ ...cfgForm, maxReward: e.target.value })} /></Field>
              <Field label="Min Purchase Range"><NumberInput step="0.01" min="0" value={cfgForm.minPurchaseRange} onChange={(e) => setCfgForm({ ...cfgForm, minPurchaseRange: e.target.value })} /></Field>
              <Field label="Max Purchase Range" hint="Optional"><NumberInput step="0.01" min="0" value={cfgForm.maxPurchaseRange} onChange={(e) => setCfgForm({ ...cfgForm, maxPurchaseRange: e.target.value })} /></Field>
              <Field label="Applies To Tier">
                <SelectInput value={cfgForm.appliesToTierId} onChange={(e) => setCfgForm({ ...cfgForm, appliesToTierId: e.target.value })}>
                  <option value="">All tiers</option>
                  {tiers.map((t: any) => <option key={t.id} value={t.id}>{t.name}</option>)}
                </SelectInput>
              </Field>
              <div className="md:col-span-2 flex items-center gap-4">
                <label className="flex items-center gap-2 text-sm text-slate-300"><input type="checkbox" checked={!!cfgForm.isEnabled} onChange={(e) => setCfgForm({ ...cfgForm, isEnabled: e.target.checked })} className="h-4 w-4 rounded" />Enabled</label>
                <label className="flex items-center gap-2 text-sm text-slate-300"><input type="checkbox" checked={!!cfgForm.isActive} onChange={(e) => setCfgForm({ ...cfgForm, isActive: e.target.checked })} className="h-4 w-4 rounded" />Active</label>
              </div>
            </div>
            <div className="mt-4 flex gap-2">
              <button onClick={saveConfig} 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={() => setShowConfigForm(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 ? <div className="mt-4"><TableSkeleton rows={3} /></div> : configs.length === 0 ? <p className="mt-4 rounded-lg border border-white/10 bg-slate-900/30 p-6 text-center text-sm text-slate-400">No referral commission configs yet</p> : (
          <div className="mt-4 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">Type</th><th className="px-3 py-2">Amount</th><th className="px-3 py-2">Purchase Range</th><th className="px-3 py-2">Tier</th><th className="px-3 py-2">Status</th><th className="px-3 py-2">Actions</th>
              </tr></thead>
              <tbody>
                {configs.map((c: any) => (
                  <tr key={c.id} className="border-b border-white/5">
                    <td className="px-3 py-3 text-white">{c.name}</td>
                    <td className="px-3 py-3 text-slate-300">{c.rewardType}</td>
                    <td className="px-3 py-3 text-slate-300">{c.rewardType === 'PERCENTAGE' ? `${(Number(c.amount) * 100).toFixed(2)}%` : `${Number(c.amount).toFixed(2)} ${c.currency || sysConfig.currency}`}</td>
                    <td className="px-3 py-3 text-slate-300">{Number(c.minPurchaseRange).toFixed(2)} - {c.maxPurchaseRange ? Number(c.maxPurchaseRange).toFixed(2) : '∞'}</td>
                    <td className="px-3 py-3 text-slate-300">{c.appliesToTierId || 'All'}</td>
                    <td className="px-3 py-3"><span className={cn('rounded-full px-2 py-1 text-xs', c.isActive ? 'bg-emerald-500/20 text-emerald-300' : 'bg-slate-500/20 text-slate-300')}>{c.isActive ? 'Active' : 'Inactive'}</span></td>
                    <td className="px-3 py-3 flex gap-2">
                      <button onClick={() => openEditConfig(c)} className="rounded-lg p-1 text-blue-400 hover:bg-blue-500/10"><Pencil className="h-4 w-4" /></button>
                      <button onClick={() => removeConfig(c.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>
    </div>
  );
}