'use client';

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

export default function GlobalTab({ sysConfig }: any) {
  const [settings, setSettings] = useState<any>(null);
  const [loading, setLoading] = useState(true);
  const [saving, setSaving] = useState(false);
  const { error, setError, success, setSuccess, Banners } = useToasts();

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

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

  const save = async () => {
    if (!settings) return;
    setSaving(true);
    setError(null); setSuccess(null);
    try {
      const payload: any = {
        startingMinimumBuy: Number(settings.startingMinimumBuy) || 0,
        incrementStep: Number(settings.incrementStep) || 0.01,
        incrementType: settings.incrementType || 'PERCENTAGE',
        currency: settings.currency || sysConfig.currency,
        maxDailyOrderCount: settings.maxDailyOrderCount ?? null,
        maxDailyOrderAmount: settings.maxDailyOrderAmount ?? null,
        maxMonthlyOrderAmount: settings.maxMonthlyOrderAmount ?? null,
        referralType: settings.referralType || 'PERCENTAGE',
        referralValue: Number(settings.referralValue) || 0,
        isActive: !!settings.isActive,
      };
      await businessRulesService.updateSettings(payload);
      setSuccess('Global settings saved');
      load();
    } catch (e: any) { setError(getErrorMessage(e)); }
    finally { setSaving(false); }
  };

  if (loading) return <TableSkeleton rows={4} />;
  if (!settings) return <Banner kind="error">Failed to load global settings</Banner>;

  return (
    <div className="space-y-4">
      <Banners />
      <div className="rounded-xl border border-white/10 bg-slate-900/50 p-6">
        <div className="grid grid-cols-1 gap-4 md:grid-cols-2">
          <Field label={`Starting Minimum Buy (${settings.currency || sysConfig.currency})`}>
            <NumberInput step="0.01" value={settings.startingMinimumBuy ?? ''} onChange={(e) => setSettings({ ...settings, startingMinimumBuy: e.target.value })} />
          </Field>
          <Field label="Purchase Increment Step">
            <NumberInput step="0.01" min="0.01" value={settings.incrementStep ?? ''} onChange={(e) => setSettings({ ...settings, incrementStep: e.target.value })} />
          </Field>
          <Field label="Increment Type">
            <SelectInput value={settings.incrementType || 'PERCENTAGE'} onChange={(e) => setSettings({ ...settings, incrementType: e.target.value })}>
              <option value="PERCENTAGE">Percentage</option>
              <option value="FIXED">Fixed</option>
            </SelectInput>
          </Field>
          <Field label="Currency">
            <TextInput value={settings.currency || sysConfig.currency} onChange={(e) => setSettings({ ...settings, currency: e.target.value })} />
          </Field>
          <Field label="Max Daily Order Count" hint="Leave blank for unlimited">
            <NumberInput step="1" min="1" value={settings.maxDailyOrderCount ?? ''} onChange={(e) => setSettings({ ...settings, maxDailyOrderCount: e.target.value ? Number(e.target.value) : null })} />
          </Field>
          <Field label={`Max Daily Order Amount (${settings.currency || sysConfig.currency})`} hint="Leave blank for unlimited">
            <NumberInput step="0.01" min="0" value={settings.maxDailyOrderAmount ?? ''} onChange={(e) => setSettings({ ...settings, maxDailyOrderAmount: e.target.value ? Number(e.target.value) : null })} />
          </Field>
          <Field label={`Max Monthly Order Amount (${settings.currency || sysConfig.currency})`} hint="Leave blank for unlimited">
            <NumberInput step="0.01" min="0" value={settings.maxMonthlyOrderAmount ?? ''} onChange={(e) => setSettings({ ...settings, maxMonthlyOrderAmount: e.target.value ? Number(e.target.value) : null })} />
          </Field>
          <Field label="Referral Type">
            <SelectInput value={settings.referralType || 'PERCENTAGE'} onChange={(e) => setSettings({ ...settings, referralType: e.target.value })}>
              <option value="PERCENTAGE">Percentage</option>
              <option value="FIXED">Fixed</option>
            </SelectInput>
          </Field>
          <Field label="Referral Value">
            <NumberInput step="0.001" min="0" value={settings.referralValue ?? ''} onChange={(e) => setSettings({ ...settings, referralValue: e.target.value })} />
          </Field>
          <div className="flex items-center gap-2 pt-6">
            <input id="active-global" type="checkbox" checked={!!settings.isActive} onChange={(e) => setSettings({ ...settings, isActive: e.target.checked })} className="h-4 w-4 rounded" />
            <label htmlFor="active-global" className="text-sm text-slate-300">Active</label>
          </div>
        </div>
        <div className="mt-6 flex justify-end">
          <button onClick={save} 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">
            <Save className="h-4 w-4" />{saving ? 'Saving...' : 'Save Settings'}
          </button>
        </div>
      </div>
    </div>
  );
}