'use client';

import { useState, useEffect, useCallback } from 'react';
import { Plus, Pencil, Trash2 } from 'lucide-react';
import { businessRulesService } from '@/services/business-rules.service';
import { rewardsService } from '@/services/rewards.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 BonusesTab({ sysConfig }: any) {
  const [bonus, setBonus] = useState<any[]>([]);
  const [reward, setReward] = useState<any[]>([]);
  const [stats, setStats] = useState<any>(null);
  const [loading, setLoading] = useState(true);
  const [saving, setSaving] = useState(false);
  const { error, setError, success, setSuccess, Banners } = useToasts();
  const [showReward, setShowReward] = useState(false);
  const [editingReward, setEditingReward] = useState<any>(null);
  const [rewardForm, setRewardForm] = useState<any>({ name: '', description: '', type: 'PURCHASE_BONUS', config: '{\n  "percentage": 5,\n  "minPurchase": 10\n}', priority: '0', effectiveFrom: '', effectiveTo: '', isActive: true });
  const [configError, setConfigError] = useState<string | null>(null);

  const load = useCallback(async () => {
    setLoading(true);
    try {
      const [b, r, s] = await Promise.allSettled([businessRulesService.getBonusRules(), rewardsService.getRewardRules({ limit: 100 }), rewardsService.getRewardStats()]);
      if (b.status === 'fulfilled') setBonus(b.value || []);
      if (r.status === 'fulfilled') setReward((r.value as any).data || (r.value as any) || []);
      if (s.status === 'fulfilled') setStats(s.value);
    } catch (e: any) { setError(getErrorMessage(e)); }
    finally { setLoading(false); }
  }, [setError]);

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

  const openNewReward = () => { setEditingReward(null); setRewardForm({ name: '', description: '', type: 'PURCHASE_BONUS', config: '{\n  "percentage": 5,\n  "minPurchase": 10\n}', priority: '0', effectiveFrom: '', effectiveTo: '', isActive: true }); setShowReward(true); setConfigError(null); };
  const openEditReward = (r: any) => { setEditingReward(r); setRewardForm({ name: r.name, description: r.description || '', type: r.type, config: r.config ? JSON.stringify(r.config, null, 2) : '{}', priority: String(r.priority ?? 0), effectiveFrom: r.effectiveFrom ? r.effectiveFrom.split('T')[0] : '', effectiveTo: r.effectiveTo ? r.effectiveTo.split('T')[0] : '', isActive: r.isActive }); setShowReward(true); setConfigError(null); };

  const saveReward = async () => {
    let parsed: any;
    try { parsed = JSON.parse(rewardForm.config); setConfigError(null); }
    catch { setConfigError('Config must be valid JSON'); return; }
    setSaving(true); setError(null); setSuccess(null);
    try {
      const payload: any = { name: rewardForm.name, description: rewardForm.description || null, type: rewardForm.type, config: parsed, priority: Number(rewardForm.priority) || 0, effectiveFrom: rewardForm.effectiveFrom ? new Date(rewardForm.effectiveFrom).toISOString() : null, effectiveTo: rewardForm.effectiveTo ? new Date(rewardForm.effectiveTo).toISOString() : null, isActive: !!rewardForm.isActive };
      if (editingReward) { await rewardsService.updateRewardRule(editingReward.id, payload); setSuccess('Reward rule updated'); }
      else { await rewardsService.createRewardRule(payload); setSuccess('Reward rule created'); }
      setShowReward(false); load();
    } catch (e: any) { setError(getErrorMessage(e)); }
    finally { setSaving(false); }
  };

  const removeReward = async (id: string) => {
    if (!confirm('Delete this reward rule?')) return;
    try { await rewardsService.deleteRewardRule(id); setSuccess('Reward rule 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">Bonus Rules</h2>
        </div>
        {loading ? <div className="mt-4"><TableSkeleton rows={3} /></div> : bonus.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 bonus 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">Type</th><th className="px-3 py-2">Value</th><th className="px-3 py-2">Min Purchase</th><th className="px-3 py-2">Max Bonus</th><th className="px-3 py-2">Category</th><th className="px-3 py-2">Status</th>
              </tr></thead>
              <tbody>
                {bonus.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.type}</td>
                    <td className="px-3 py-3 text-slate-300">{r.type === 'PERCENTAGE' ? `${(Number(r.value) * 100).toFixed(1)}%` : `${Number(r.value).toFixed(2)} ${sysConfig.currency}`}</td>
                    <td className="px-3 py-3 text-slate-300">{Number(r.minPurchase).toFixed(2)}</td>
                    <td className="px-3 py-3 text-slate-300">{r.maxBonus ? Number(r.maxBonus).toFixed(2) : '∞'}</td>
                    <td className="px-3 py-3 text-slate-300">{r.bonusCategory || '-'}</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>
                  </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">
          <div>
            <h2 className="text-lg font-semibold text-white">Reward Rules (JSON-config)</h2>
            <p className="text-xs text-slate-500">Time-bounded rewards with arbitrary JSON config. Use for PURCHASE_BONUS, REFERRAL_COMMISSION, LOYALTY_POINTS, CASHBACK, SIGNUP_BONUS, MANUAL.</p>
          </div>
          <button onClick={openNewReward} 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 Reward Rule</button>
        </div>
        {showReward && (
          <div className="mt-4 rounded-lg border border-white/10 bg-slate-800/50 p-4">
            <h3 className="mb-4 font-semibold text-white">{editingReward ? 'Edit' : 'New'} Reward Rule</h3>
            <div className="grid grid-cols-1 gap-4 md:grid-cols-2">
              <Field label="Name" required><TextInput value={rewardForm.name} onChange={(e) => setRewardForm({ ...rewardForm, name: e.target.value })} /></Field>
              <Field label="Priority"><NumberInput value={rewardForm.priority} onChange={(e) => setRewardForm({ ...rewardForm, priority: e.target.value })} /></Field>
              <Field label="Type" required>
                <SelectInput value={rewardForm.type} onChange={(e) => setRewardForm({ ...rewardForm, type: e.target.value })}>
                  <option value="PURCHASE_BONUS">Purchase Bonus</option>
                  <option value="REFERRAL_COMMISSION">Referral Commission</option>
                  <option value="LOYALTY_POINTS">Loyalty Points</option>
                  <option value="CASHBACK">Cashback</option>
                  <option value="SIGNUP_BONUS">Signup Bonus</option>
                  <option value="MANUAL">Manual</option>
                </SelectInput>
              </Field>
              <Field label="Effective From" required><input type="date" value={rewardForm.effectiveFrom} onChange={(e) => setRewardForm({ ...rewardForm, effectiveFrom: e.target.value })} className="w-full rounded-lg border border-white/10 bg-white/5 px-4 py-2 text-white" /></Field>
              <Field label="Effective To" hint="Optional"><input type="date" value={rewardForm.effectiveTo} onChange={(e) => setRewardForm({ ...rewardForm, effectiveTo: 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={rewardForm.description} onChange={(e) => setRewardForm({ ...rewardForm, 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">
                <Field label="Config (JSON)">
                  <textarea value={rewardForm.config} onChange={(e) => setRewardForm({ ...rewardForm, config: e.target.value })} rows={8} className="w-full rounded-lg border border-white/10 bg-slate-950 px-4 py-2 font-mono text-xs text-white" />
                </Field>
                {configError && <p className="mt-1 text-xs text-red-400">{configError}</p>}
              </div>
              <div className="md:col-span-2 flex items-center gap-2">
                <input id="reward-active" type="checkbox" checked={!!rewardForm.isActive} onChange={(e) => setRewardForm({ ...rewardForm, isActive: e.target.checked })} className="h-4 w-4 rounded" />
                <label htmlFor="reward-active" className="text-sm text-slate-300">Active</label>
              </div>
            </div>
            <div className="mt-4 flex gap-2">
              <button onClick={saveReward} 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={() => setShowReward(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>
        )}
        {stats && (
          <div className="mt-4 grid grid-cols-2 gap-3 md:grid-cols-4">
            <div className="rounded-lg border border-white/10 bg-slate-800/50 p-3"><p className="text-xs text-slate-400">Total</p><p className="text-lg font-semibold text-white">{stats.total ?? 0}</p></div>
            <div className="rounded-lg border border-white/10 bg-slate-800/50 p-3"><p className="text-xs text-slate-400">Active</p><p className="text-lg font-semibold text-emerald-300">{stats.active ?? 0}</p></div>
            <div className="rounded-lg border border-white/10 bg-slate-800/50 p-3"><p className="text-xs text-slate-400">Inactive</p><p className="text-lg font-semibold text-slate-300">{stats.inactive ?? 0}</p></div>
            <div className="rounded-lg border border-white/10 bg-slate-800/50 p-3"><p className="text-xs text-slate-400">Expired</p><p className="text-lg font-semibold text-amber-300">{stats.expired ?? 0}</p></div>
          </div>
        )}
        {loading ? <div className="mt-4"><TableSkeleton rows={3} /></div> : reward.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 reward 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">Type</th><th className="px-3 py-2">Priority</th><th className="px-3 py-2">Effective</th><th className="px-3 py-2">Status</th><th className="px-3 py-2">Actions</th>
              </tr></thead>
              <tbody>
                {reward.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.type}</td>
                    <td className="px-3 py-3 text-slate-300">{r.priority || 0}</td>
                    <td className="px-3 py-3 text-slate-300">{r.effectiveFrom ? new Date(r.effectiveFrom).toLocaleDateString() : '-'} → {r.effectiveTo ? new Date(r.effectiveTo).toLocaleDateString() : '∞'}</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={() => openEditReward(r)} className="rounded-lg p-1 text-blue-400 hover:bg-blue-500/10"><Pencil className="h-4 w-4" /></button>
                      <button onClick={() => removeReward(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>
  );
}