'use client';
import React, { useState, useEffect, useCallback } from 'react';
import Link from 'next/link';
import { useAuth } from '@/contexts/AuthContext';
import { useRouter } from 'next/navigation';

function fmt(cents: number) { return '$' + (cents / 100).toLocaleString('en-US', { minimumFractionDigits: 2 }); }

function validateEmail(email: string) {
  return !email || /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email);
}

export default function StaffPage() {
  const { user, loading } = useAuth();
  const router = useRouter();
  const [staff, setStaff] = useState<any[]>([]);
  const [loadingData, setLoadingData] = useState(true);
  const [showForm, setShowForm] = useState(false);
  const [saving, setSaving] = useState(false);
  const [form, setForm] = useState({ full_name: '', email: '', phone: '', notes: '' });
  const [tiers, setTiers] = useState([{ tier_order: 1, threshold_cents: '', rate: '' }]);
  const [errors, setErrors] = useState<Record<string, string>>({});
  const [successMsg, setSuccessMsg] = useState('');

  useEffect(() => { if (!loading && !user) router.push('/login?next=' + encodeURIComponent(window.location.pathname)); }, [user, loading, router]);

  const load = useCallback(async () => {
    setLoadingData(true);
    const r = await fetch('/api/accounting/staff');
    const d = await r.json();
    setStaff(d.staff ?? []);
    setLoadingData(false);
  }, []);

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

  function handleChange(key: string, value: string) {
    setForm(p => ({ ...p, [key]: value }));
    if (errors[key]) setErrors(p => { const n = { ...p }; delete n[key]; return n; });
  }

  function validate() {
    const errs: Record<string, string> = {};
    if (!form.full_name.trim()) errs.full_name = 'Full name is required.';
    if (!validateEmail(form.email)) errs.email = 'Enter a valid email address.';
    tiers.forEach((t, i) => {
      if (t.rate === '' || t.rate === undefined) {
        errs[`tier_rate_${i}`] = 'Commission rate is required.';
      } else if (isNaN(parseFloat(t.rate)) || parseFloat(t.rate) < 0 || parseFloat(t.rate) > 100) {
        errs[`tier_rate_${i}`] = 'Rate must be between 0 and 100.';
      }
    });
    return errs;
  }

  async function handleCreate(e: React.FormEvent) {
    e.preventDefault();
    const errs = validate();
    if (Object.keys(errs).length > 0) { setErrors(errs); return; }
    setSaving(true);
    try {
      const body = {
        ...form,
        tiers: tiers.map(t => ({
          tier_order: t.tier_order,
          threshold_cents: t.threshold_cents ? Math.round(parseFloat(t.threshold_cents) * 100) : null,
          rate: t.rate ? parseFloat(t.rate) / 100 : 0,
          effective_year: new Date().getFullYear(),
        })),
      };
      const res = await fetch('/api/accounting/staff', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify(body) });
      if (!res.ok) throw new Error('Failed to create staff');
      setShowForm(false);
      setErrors({});
      setForm({ full_name: '', email: '', phone: '', notes: '' });
      setTiers([{ tier_order: 1, threshold_cents: '', rate: '' }]);
      setSuccessMsg(`Salesperson "${form.full_name}" added successfully.`);
      setTimeout(() => setSuccessMsg(''), 4000);
      load();
    } catch {
      setErrors({ _form: 'Something went wrong. Please try again.' });
    } finally {
      setSaving(false);
    }
  }

  function handleCancel() {
    setShowForm(false);
    setErrors({});
    setForm({ full_name: '', email: '', phone: '', notes: '' });
    setTiers([{ tier_order: 1, threshold_cents: '', rate: '' }]);
  }

  function handleTierChange(i: number, key: string, value: string) {
    setTiers(t => t.map((x, j) => j === i ? { ...x, [key]: value } : x));
    const errKey = `tier_rate_${i}`;
    if (errors[errKey]) setErrors(p => { const n = { ...p }; delete n[errKey]; return n; });
  }

  if (loading) return <div className="min-h-screen bg-[#0a0a0a] flex items-center justify-center"><div className="w-8 h-8 border-2 border-[#3b82f6] border-t-transparent rounded-full animate-spin" /></div>;
  if (!user) return null;

  return (
    <div className="min-h-screen bg-[#0a0a0a] text-white p-6">
      <div className="max-w-5xl mx-auto space-y-4">
        <div className="flex items-center justify-between">
          <div>
            <h1 className="text-xl font-bold">Sales Staff</h1>
            <Link href="/admin/accounting" className="text-xs text-[#555] hover:text-[#888]">← Accounting</Link>
          </div>
          <button onClick={() => setShowForm(true)} className="px-3 py-1.5 bg-[#3b82f6] rounded text-xs font-medium hover:bg-blue-500">+ Add Salesperson</button>
        </div>

        {/* Success Toast */}
        {successMsg && (
          <div className="flex items-center gap-2 px-4 py-2.5 bg-green-500/10 border border-green-500/30 rounded-lg text-green-400 text-xs">
            <svg className="w-4 h-4 flex-shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 13l4 4L19 7" /></svg>
            {successMsg}
          </div>
        )}

        {showForm && (
          <form onSubmit={handleCreate} noValidate className="bg-[#111] border border-[#252525] rounded-lg p-4 space-y-3">
            <h3 className="text-sm font-semibold">New Salesperson</h3>

            {errors._form && (
              <div className="flex items-center gap-2 px-3 py-2 bg-red-500/10 border border-red-500/30 rounded text-red-400 text-xs">
                <svg className="w-3.5 h-3.5 flex-shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 9v2m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" /></svg>
                {errors._form}
              </div>
            )}

            <div className="grid grid-cols-2 gap-3">
              {[{ key: 'full_name', label: 'Full Name', required: true }, { key: 'email', label: 'Email' }, { key: 'phone', label: 'Phone' }].map(f => (
                <div key={f.key}>
                  <label className="text-xs text-[#888] block mb-1">
                    {f.label}{f.required && <span className="text-red-400 ml-0.5">*</span>}
                  </label>
                  <input
                    type={f.key === 'email' ? 'email' : 'text'}
                    value={(form as any)[f.key]}
                    onChange={e => handleChange(f.key, e.target.value)}
                    className={`w-full px-2 py-1.5 bg-[#0a0a0a] border rounded text-xs text-white focus:outline-none focus:border-[#3b82f6] ${errors[f.key] ? 'border-red-500/60' : 'border-[#252525]'}`}
                  />
                  {errors[f.key] && <p className="mt-1 text-xs text-red-400">{errors[f.key]}</p>}
                </div>
              ))}
            </div>
            <div>
              <div className="flex items-center justify-between mb-2">
                <label className="text-xs text-[#888]">Commission Tiers ({new Date().getFullYear()})</label>
                <button type="button" onClick={() => setTiers(t => [...t, { tier_order: t.length + 1, threshold_cents: '', rate: '' }])} className="text-xs text-[#3b82f6] hover:underline">+ Add Tier</button>
              </div>
              {tiers.map((tier, i) => (
                <div key={i} className="flex gap-2 mb-2 items-start">
                  <span className="text-xs text-[#555] w-12 pt-5">Tier {tier.tier_order}</span>
                  <div className="flex-1">
                    <label className="text-xs text-[#555] block mb-0.5">Threshold ($, blank = no cap)</label>
                    <input type="number" step="0.01" value={tier.threshold_cents} onChange={e => handleTierChange(i, 'threshold_cents', e.target.value)} placeholder="100000" className="w-full px-2 py-1 bg-[#0a0a0a] border border-[#252525] rounded text-xs text-white focus:outline-none" />
                  </div>
                  <div className="flex-1">
                    <label className="text-xs text-[#555] block mb-0.5">Rate (%) <span className="text-red-400">*</span></label>
                    <input type="number" step="0.1" value={tier.rate} onChange={e => handleTierChange(i, 'rate', e.target.value)} placeholder="25" className={`w-full px-2 py-1 bg-[#0a0a0a] border rounded text-xs text-white focus:outline-none ${errors[`tier_rate_${i}`] ? 'border-red-500/60' : 'border-[#252525]'}`} />
                    {errors[`tier_rate_${i}`] && <p className="mt-1 text-xs text-red-400">{errors[`tier_rate_${i}`]}</p>}
                  </div>
                </div>
              ))}
            </div>
            <div className="flex gap-2">
              <button type="submit" disabled={saving} className="px-3 py-1.5 bg-[#3b82f6] rounded text-xs font-medium hover:bg-blue-500 disabled:opacity-50">{saving ? 'Saving…' : 'Create'}</button>
              <button type="button" onClick={handleCancel} className="px-3 py-1.5 bg-[#1a1a1a] border border-[#252525] rounded text-xs text-[#888] hover:text-white">Cancel</button>
            </div>
          </form>
        )}

        <div className="bg-[#111] border border-[#252525] rounded-lg overflow-hidden">
          <table className="w-full text-sm">
            <thead>
              <tr className="border-b border-[#1a1a1a]">
                {['Name','Email','Status','Commission YTD','Outstanding',''].map(h => (
                  <th key={h} className="px-4 py-2 text-left text-xs text-[#555] font-medium">{h}</th>
                ))}
              </tr>
            </thead>
            <tbody>
              {loadingData ? (
                <tr><td colSpan={6} className="px-4 py-8 text-center text-[#555] text-xs">Loading…</td></tr>
              ) : staff.length === 0 ? (
                <tr><td colSpan={6} className="px-4 py-8 text-center text-[#555] text-xs">No staff found</td></tr>
              ) : staff.map((s: any) => (
                <tr key={s.id} className={`border-b border-[#1a1a1a] hover:bg-[#161616] ${s.status === 'terminated' ? 'opacity-50' : ''}`}>
                  <td className="px-4 py-2 text-white">{s.full_name}</td>
                  <td className="px-4 py-2 text-[#888] text-xs">{s.email}</td>
                  <td className="px-4 py-2">
                    <span className={`px-2 py-0.5 rounded-full text-xs ${s.status === 'active' ? 'bg-green-400/10 text-green-400' : s.status === 'terminated' ? 'bg-red-400/10 text-red-400' : 'bg-[#1a1a1a] text-[#555]'}`}>{s.status}</span>
                  </td>
                  <td className="px-4 py-2 text-green-400 text-xs">{fmt(s.commission_ytd ?? 0)}</td>
                  <td className="px-4 py-2 text-yellow-400 text-xs">{fmt(s.commission_outstanding ?? 0)}</td>
                  <td className="px-4 py-2">
                    <Link href={`/admin/accounting/staff/${s.id}`} className="text-xs text-[#3b82f6] hover:underline">View</Link>
                  </td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>
      </div>
    </div>
  );
}