'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, formatDateTime } from '@/lib/utils';
import { Banner, Field, NumberInput, TextInput, SelectInput, useToasts } from './_shared';

export default function ReferralRequirementsTab({ sysConfig }: any) {
  const [rules, setRules] = useState<any[]>([]);
  const [statuses, setStatuses] = 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 [showStatuses, setShowStatuses] = useState(false);
  const [form, setForm] = useState<any>({ name: '', description: '', requiredReferralCount: '', requiredDays: '', gracePeriodDays: '0', restrictedWithdrawals: false, restrictedTransfers: false, restrictedPurchases: false, restrictedOrders: false, applicableUserType: 'USER', startAt: '', endAt: '', isActive: true });

  const load = useCallback(async () => {
    setLoading(true);
    try { setRules(await businessRulesService.getReferralRequirements()); }
    catch (e: any) { setError(getErrorMessage(e)); }
    finally { setLoading(false); }
  }, [setError]);

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

  const openNew = () => { setEditing(null); setForm({ name: '', description: '', requiredReferralCount: '', requiredDays: '', gracePeriodDays: '0', restrictedWithdrawals: false, restrictedTransfers: false, restrictedPurchases: false, restrictedOrders: false, applicableUserType: 'USER', startAt: '', endAt: '', isActive: true }); setShowForm(true); };
  const openEdit = (r: any) => { setEditing(r); setForm({ name: r.name, description: r.description || '', requiredReferralCount: String(r.requiredReferralCount ?? ''), requiredDays: String(r.requiredDays ?? ''), gracePeriodDays: String(r.gracePeriodDays ?? 0), restrictedWithdrawals: r.restrictedWithdrawals, restrictedTransfers: r.restrictedTransfers, restrictedPurchases: r.restrictedPurchases, restrictedOrders: r.restrictedOrders, applicableUserType: r.applicableUserType || 'USER', startAt: r.startAt ? r.startAt.split('T')[0] : '', endAt: r.endAt ? r.endAt.split('T')[0] : '', isActive: r.isActive }); setShowForm(true); };

  const save = async () => {
    setSaving(true); setError(null); setSuccess(null);
    try {
      const payload: any = { name: form.name, description: form.description || null, requiredReferralCount: Number(form.requiredReferralCount) || 0, requiredDays: Number(form.requiredDays) || 0, gracePeriodDays: Number(form.gracePeriodDays) || 0, restrictedWithdrawals: !!form.restrictedWithdrawals, restrictedTransfers: !!form.restrictedTransfers, restrictedPurchases: !!form.restrictedPurchases, restrictedOrders: !!form.restrictedOrders, applicableUserType: form.applicableUserType, startAt: form.startAt ? new Date(form.startAt).toISOString() : null, endAt: form.endAt ? new Date(form.endAt).toISOString() : null, isActive: !!form.isActive };
      if (editing) { await businessRulesService.updateReferralRequirement(editing.id, payload); setSuccess('Rule updated'); }
      else { await businessRulesService.createReferralRequirement(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 requirement?')) return;
    try { await businessRulesService.deleteReferralRequirement(id); setSuccess('Rule deleted'); load(); }
    catch (e: any) { setError(getErrorMessage(e)); }
  };

  const viewStatuses = async (ruleId: string) => {
    setShowStatuses(true);
    try { setStatuses(await businessRulesService.getReferralStatuses(ruleId)); }
    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">Conditions a referred user must satisfy before the referrer earns a reward. Use this to enforce real growth before paying out.</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'} Referral Requirement</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="Applicable User Type">
              <SelectInput value={form.applicableUserType} onChange={(e) => setForm({ ...form, applicableUserType: e.target.value })}>
                <option value="USER">Referred User</option>
                <option value="REFERRER">Referrer</option>
                <option value="ALL">All</option>
              </SelectInput>
            </Field>
            <Field label="Required Referral Count" required><NumberInput min="1" value={form.requiredReferralCount} onChange={(e) => setForm({ ...form, requiredReferralCount: e.target.value })} /></Field>
            <Field label="Required Days Active" required><NumberInput min="0" value={form.requiredDays} onChange={(e) => setForm({ ...form, requiredDays: e.target.value })} /></Field>
            <Field label="Grace Period (days)"><NumberInput min="0" value={form.gracePeriodDays} onChange={(e) => setForm({ ...form, gracePeriodDays: e.target.value })} /></Field>
            <Field label="Start Date" hint="Optional"><input type="date" value={form.startAt} onChange={(e) => setForm({ ...form, startAt: e.target.value })} className="w-full rounded-lg border border-white/10 bg-white/5 px-4 py-2 text-white" /></Field>
            <Field label="End Date" hint="Optional"><input type="date" value={form.endAt} onChange={(e) => setForm({ ...form, endAt: e.target.value })} className="w-full rounded-lg border border-white/10 bg-white/5 px-4 py-2 text-white" /></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 grid grid-cols-2 gap-2 md:grid-cols-4">
              <label className="flex items-center gap-2 text-sm text-slate-300"><input type="checkbox" checked={!!form.restrictedWithdrawals} onChange={(e) => setForm({ ...form, restrictedWithdrawals: e.target.checked })} className="h-4 w-4 rounded" />Restrict Withdrawals</label>
              <label className="flex items-center gap-2 text-sm text-slate-300"><input type="checkbox" checked={!!form.restrictedTransfers} onChange={(e) => setForm({ ...form, restrictedTransfers: e.target.checked })} className="h-4 w-4 rounded" />Restrict Transfers</label>
              <label className="flex items-center gap-2 text-sm text-slate-300"><input type="checkbox" checked={!!form.restrictedPurchases} onChange={(e) => setForm({ ...form, restrictedPurchases: e.target.checked })} className="h-4 w-4 rounded" />Restrict Purchases</label>
              <label className="flex items-center gap-2 text-sm text-slate-300"><input type="checkbox" checked={!!form.restrictedOrders} onChange={(e) => setForm({ ...form, restrictedOrders: e.target.checked })} className="h-4 w-4 rounded" />Restrict Orders</label>
            </div>
            <div className="md:col-span-2 flex items-center gap-2">
              <input id="req-active" type="checkbox" checked={!!form.isActive} onChange={(e) => setForm({ ...form, isActive: e.target.checked })} className="h-4 w-4 rounded" />
              <label htmlFor="req-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 referral requirements 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">Type</th><th className="px-3 py-2">Required</th><th className="px-3 py-2">Days</th><th className="px-3 py-2">Grace</th><th className="px-3 py-2">Restrictions</th><th className="px-3 py-2">Status</th><th className="px-3 py-2">Actions</th>
            </tr></thead>
            <tbody>
              {rules.map((r: any) => {
                const restrictions = [r.restrictedWithdrawals && 'W', r.restrictedTransfers && 'T', r.restrictedPurchases && 'P', r.restrictedOrders && 'O'].filter(Boolean).join(', ') || '-';
                return (
                  <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.applicableUserType}</td>
                    <td className="px-3 py-3 text-slate-300">{r.requiredReferralCount}</td>
                    <td className="px-3 py-3 text-slate-300">{r.requiredDays}</td>
                    <td className="px-3 py-3 text-slate-300">{r.gracePeriodDays}</td>
                    <td className="px-3 py-3 text-slate-300">{restrictions}</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={() => viewStatuses(r.id)} className="rounded-lg p-1 text-cyan-400 hover:bg-cyan-500/10" title="View user statuses">👁</button>
                      <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>
      )}
      {showStatuses && (
        <div className="rounded-xl border border-white/10 bg-slate-900/50 p-4">
          <div className="mb-3 flex items-center justify-between">
            <h3 className="font-semibold text-white">User Statuses</h3>
            <button onClick={() => setShowStatuses(false)} className="text-sm text-slate-400 hover:text-white">Close</button>
          </div>
          {statuses.length === 0 ? <p className="text-sm text-slate-400">No user statuses found for this rule.</p> : (
            <div className="overflow-x-auto">
              <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">User</th><th className="px-3 py-2">Status</th><th className="px-3 py-2">Referrals</th><th className="px-3 py-2">Days Active</th><th className="px-3 py-2">Updated</th>
                </tr></thead>
                <tbody>
                  {statuses.map((s: any) => (
                    <tr key={s.id} className="border-b border-white/5">
                      <td className="px-3 py-3 text-slate-300">{s.user?.email || s.userId}</td>
                      <td className="px-3 py-3"><span className={cn('rounded-full px-2 py-1 text-xs', s.status === 'ACTIVE' ? 'bg-emerald-500/20 text-emerald-300' : s.status === 'COMPLETED' ? 'bg-blue-500/20 text-blue-300' : s.status === 'FAILED' ? 'bg-red-500/20 text-red-300' : 'bg-amber-500/20 text-amber-300')}>{s.status}</span></td>
                      <td className="px-3 py-3 text-slate-300">{s.referralsCount}</td>
                      <td className="px-3 py-3 text-slate-300">{s.daysActive}</td>
                      <td className="px-3 py-3 text-slate-300">{formatDateTime(s.updatedAt)}</td>
                    </tr>
                  ))}
                </tbody>
              </table>
            </div>
          )}
        </div>
      )}
    </div>
  );
}