'use client';

import { useState, useEffect, useCallback } from 'react';
import { Plus, Trash2 } from 'lucide-react';
import { getTradingControlRanges, createTradingControlRange, updateTradingControlRange, deleteTradingControlRange, type TradingControlRange } from '@/services/trading-controls.service';
import { getErrorMessage } from '@/lib/errors';
import { TableSkeleton } from '@/components/priority/skeletons';
import { cn } from '@/lib/utils';
import { Banner, Field, NumberInput, TextInput, useToasts } from './_shared';

export default function TradingControlsTab({ sysConfig }: any) {
  const [ranges, setRanges] = useState<TradingControlRange[]>([]);
  const [loading, setLoading] = useState(true);
  const [saving, setSaving] = useState(false);
  const { error, setError, success, setSuccess, Banners } = useToasts();
  const [form, setForm] = useState({ name: '', description: '', minAmount: '', maxAmount: '', increasePercentage: '', currency: sysConfig.currency });

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

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

  const add = async () => {
    if (!form.name || !form.minAmount || !form.increasePercentage) { setError('Name, min amount, and increase % are required'); return; }
    setSaving(true); setError(null); setSuccess(null);
    try {
      await createTradingControlRange({ name: form.name, description: form.description, minAmount: parseFloat(form.minAmount), maxAmount: form.maxAmount ? parseFloat(form.maxAmount) : undefined, increasePercentage: parseFloat(form.increasePercentage), currency: form.currency });
      setSuccess('Range added');
      setForm({ name: '', description: '', minAmount: '', maxAmount: '', increasePercentage: '', currency: sysConfig.currency });
      load();
    } catch (e: any) { setError(getErrorMessage(e)); }
    finally { setSaving(false); }
  };

  const toggle = async (id: string, isActive: boolean) => {
    try { await updateTradingControlRange(id, { isActive: !isActive }); setSuccess('Range updated'); load(); }
    catch (e: any) { setError(getErrorMessage(e)); }
  };

  const remove = async (id: string) => {
    if (!confirm('Delete this range?')) return;
    try { await deleteTradingControlRange(id); setSuccess('Range deleted'); load(); }
    catch (e: any) { setError(getErrorMessage(e)); }
  };

  return (
    <div className="space-y-4">
      <Banners />
      <p className="text-sm text-slate-400">Custom ranges that scale the minimum buy amount. Each range bumps it by its own percentage.</p>
      <div className="rounded-xl border border-white/10 bg-slate-900/50 p-5">
        <h3 className="mb-4 font-semibold text-white">Add New Range</h3>
        <div className="grid grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-4">
          <Field label="Name" required><TextInput value={form.name} onChange={(e) => setForm({ ...form, name: e.target.value })} placeholder="Beginner" /></Field>
          <Field label={`Min (${sysConfig.currency})`} required><NumberInput value={form.minAmount} onChange={(e) => setForm({ ...form, minAmount: e.target.value })} /></Field>
          <Field label={`Max (${sysConfig.currency})`} hint="Optional"><NumberInput value={form.maxAmount} onChange={(e) => setForm({ ...form, maxAmount: e.target.value })} /></Field>
          <Field label="Increase %" required><NumberInput step="0.01" value={form.increasePercentage} onChange={(e) => setForm({ ...form, increasePercentage: e.target.value })} /></Field>
        </div>
        <div className="mt-3 flex justify-end">
          <button onClick={add} disabled={saving} 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 disabled:opacity-50"><Plus className="h-4 w-4" />{saving ? 'Adding...' : 'Add Range'}</button>
        </div>
      </div>
      {loading ? <TableSkeleton rows={3} /> : ranges.length === 0 ? <p className="rounded-lg border border-white/10 bg-slate-900/30 p-6 text-center text-sm text-slate-400">No ranges configured yet</p> : (
        <div className="space-y-2">
          {ranges.map((r) => (
            <div key={r.id} className="flex items-center justify-between rounded-xl border border-white/10 bg-slate-900/30 p-4">
              <div className="flex-1">
                <div className="flex items-center gap-2">
                  <p className="text-sm font-medium text-white">{r.name}</p>
                  <span className={cn('rounded-full px-2 py-1 text-xs', r.isActive ? 'bg-emerald-500/20 text-emerald-300' : 'bg-red-500/20 text-red-300')}>{r.isActive ? 'Active' : 'Inactive'}</span>
                </div>
                <p className="mt-1 text-xs text-slate-400">Min: {Number(r.minAmount).toFixed(2)} {r.currency || sysConfig.currency} | {r.maxAmount ? `Max: ${Number(r.maxAmount).toFixed(2)} ${r.currency || sysConfig.currency}` : 'No max'} | Increase: {Number(r.increasePercentage)}%</p>
                {r.description && <p className="mt-1 text-xs text-slate-500">{r.description}</p>}
              </div>
              <div className="flex items-center gap-2">
                <button onClick={() => toggle(r.id, r.isActive)} className="rounded-lg border border-white/10 px-3 py-1.5 text-xs text-slate-300 hover:bg-white/5">{r.isActive ? 'Disable' : 'Enable'}</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>
              </div>
            </div>
          ))}
        </div>
      )}
    </div>
  );
}