'use client';

import { useCallback, useEffect, useState } from 'react';
import { Badge } from '@/components/ui';
import { t } from '@/lib/i18n';
import { formatDate } from '@/lib/utils';

type Customer = { id: string; name: string; email: string; company: string | null; status: string; createdAt: string };
type ListResponse = { items: Customer[]; total: number; page: number; pageSize: number; pages: number };
type FormState = { name: string; email: string; company: string; status: string };

const EMPTY: FormState = { name: '', email: '', company: '', status: 'active' };
const STATUSES = ['active', 'lead', 'churned'];
const tone = (status: string) => (status === 'active' ? 'success' : status === 'churned' ? 'danger' : 'warning');

export function CustomersManager({ canWrite, canDelete }: { canWrite: boolean; canDelete: boolean }) {
  const [items, setItems] = useState<Customer[]>([]);
  const [meta, setMeta] = useState({ page: 1, pages: 1, total: 0 });
  const [searchInput, setSearchInput] = useState('');
  const [search, setSearch] = useState('');
  const [status, setStatus] = useState('');
  const [sort, setSort] = useState('newest');
  const [page, setPage] = useState(1);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState<string | null>(null);
  const [form, setForm] = useState<FormState | null>(null);
  const [editingId, setEditingId] = useState<string | null>(null);
  const [formError, setFormError] = useState<string | null>(null);
  const [busy, setBusy] = useState(false);

  const load = useCallback(async () => {
    setLoading(true);
    setError(null);
    const params = new URLSearchParams({ page: String(page), pageSize: '10', sort });
    if (search) params.set('q', search);
    if (status) params.set('status', status);
    try {
      const res = await fetch(`/api/admin/customers?${params.toString()}`);
      if (!res.ok) throw new Error('request failed');
      const data = (await res.json()) as ListResponse;
      setItems(data.items);
      setMeta({ page: data.page, pages: data.pages, total: data.total });
    } catch {
      setError(t('common.error'));
    } finally {
      setLoading(false);
    }
  }, [page, sort, search, status]);

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

  function openCreate() {
    setEditingId(null);
    setFormError(null);
    setForm({ ...EMPTY });
  }

  function openEdit(c: Customer) {
    setEditingId(c.id);
    setFormError(null);
    setForm({ name: c.name, email: c.email, company: c.company ?? '', status: c.status });
  }

  async function submit(event: React.FormEvent<HTMLFormElement>) {
    event.preventDefault();
    if (!form) return;
    setBusy(true);
    setFormError(null);
    const res = await fetch(editingId ? `/api/admin/customers/${editingId}` : '/api/admin/customers', {
      method: editingId ? 'PATCH' : 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify(form),
    });
    setBusy(false);
    if (!res.ok) {
      setFormError(((await res.json().catch(() => ({}))) as { error?: string }).error || t('common.error'));
      return;
    }
    setForm(null);
    setEditingId(null);
    await load();
  }

  async function remove(c: Customer) {
    if (!window.confirm(`${t('admin.delete')} “${c.name}”? This cannot be undone.`)) return;
    setBusy(true);
    await fetch(`/api/admin/customers/${c.id}`, { method: 'DELETE' });
    setBusy(false);
    await load();
  }

  return (
    <div className="space-y-6">
      <header className="flex flex-wrap items-center justify-between gap-3">
        <div>
          <h1 className="text-2xl font-bold">{t('admin.customers')}</h1>
          <p className="muted mt-1 text-sm">{meta.total} records</p>
        </div>
        {canWrite && (
          <button type="button" className="btn-primary" onClick={openCreate}>
            {t('admin.newCustomer')}
          </button>
        )}
      </header>

      {!canWrite && <p className="muted text-sm">{t('admin.readOnly')}</p>}

      <form
        className="card flex flex-wrap items-end gap-3"
        onSubmit={(e) => {
          e.preventDefault();
          setPage(1);
          setSearch(searchInput.trim());
        }}
      >
        <label className="text-sm">
          {t('admin.search')}
          <input
            className="input mt-1"
            value={searchInput}
            onChange={(e) => setSearchInput(e.target.value)}
            placeholder={t('admin.searchPlaceholder')}
          />
        </label>
        <label className="text-sm">
          {t('admin.status')}
          <select
            className="input mt-1"
            value={status}
            onChange={(e) => {
              setPage(1);
              setStatus(e.target.value);
            }}
          >
            <option value="">{t('admin.all')}</option>
            {STATUSES.map((s) => (
              <option key={s} value={s}>
                {t(`admin.${s}`)}
              </option>
            ))}
          </select>
        </label>
        <label className="text-sm">
          {t('admin.sort')}
          <select
            className="input mt-1"
            value={sort}
            onChange={(e) => {
              setPage(1);
              setSort(e.target.value);
            }}
          >
            <option value="newest">{t('admin.sortNewest')}</option>
            <option value="name">{t('admin.sortName')}</option>
            <option value="company">{t('admin.sortCompany')}</option>
          </select>
        </label>
        <button type="submit" className="btn-secondary">
          {t('admin.search')}
        </button>
      </form>

      {form && (
        <form className="card space-y-3" onSubmit={submit}>
          <h2 className="text-lg font-semibold">{editingId ? t('admin.editCustomer') : t('admin.newCustomer')}</h2>
          <div className="grid gap-3 sm:grid-cols-2">
            <label className="text-sm">
              {t('admin.name')}
              <input
                className="input mt-1"
                required
                value={form.name}
                onChange={(e) => setForm({ ...form, name: e.target.value })}
              />
            </label>
            <label className="text-sm">
              {t('admin.email')}
              <input
                className="input mt-1"
                type="email"
                required
                value={form.email}
                onChange={(e) => setForm({ ...form, email: e.target.value })}
              />
            </label>
            <label className="text-sm">
              {t('admin.company')}
              <input
                className="input mt-1"
                value={form.company}
                onChange={(e) => setForm({ ...form, company: e.target.value })}
              />
            </label>
            <label className="text-sm">
              {t('admin.status')}
              <select
                className="input mt-1"
                value={form.status}
                onChange={(e) => setForm({ ...form, status: e.target.value })}
              >
                {STATUSES.map((s) => (
                  <option key={s} value={s}>
                    {t(`admin.${s}`)}
                  </option>
                ))}
              </select>
            </label>
          </div>
          {formError && <p className="text-sm text-red-600">{formError}</p>}
          <div className="flex gap-2">
            <button type="submit" className="btn-primary" disabled={busy}>
              {t('admin.save')}
            </button>
            <button
              type="button"
              className="btn-secondary"
              onClick={() => {
                setForm(null);
                setEditingId(null);
              }}
            >
              {t('admin.cancel')}
            </button>
          </div>
        </form>
      )}

      {error && <p className="text-sm text-red-600">{error}</p>}
      {loading ? (
        <p className="muted text-sm">{t('common.loading')}</p>
      ) : items.length === 0 ? (
        <p className="muted py-6 text-center text-sm">{t('admin.empty')}</p>
      ) : (
        <>
          <div className="overflow-x-auto rounded-xl border" style={{ borderColor: 'var(--border)' }}>
            <table className="w-full text-sm">
              <thead className="muted text-left text-xs uppercase">
                <tr>
                  <th className="px-4 py-3">{t('admin.name')}</th>
                  <th className="px-4 py-3">{t('admin.email')}</th>
                  <th className="px-4 py-3">{t('admin.company')}</th>
                  <th className="px-4 py-3">{t('admin.status')}</th>
                  <th className="px-4 py-3">{t('admin.created')}</th>
                  {(canWrite || canDelete) && <th className="px-4 py-3 text-right">{t('admin.actions')}</th>}
                </tr>
              </thead>
              <tbody>
                {items.map((c) => (
                  <tr key={c.id} className="border-t" style={{ borderColor: 'var(--border)' }}>
                    <td className="px-4 py-3 font-medium">{c.name}</td>
                    <td className="px-4 py-3">{c.email}</td>
                    <td className="px-4 py-3">{c.company || t('admin.none')}</td>
                    <td className="px-4 py-3">
                      <Badge tone={tone(c.status)}>{t(`admin.${c.status}`)}</Badge>
                    </td>
                    <td className="px-4 py-3">{formatDate(c.createdAt)}</td>
                    {(canWrite || canDelete) && (
                      <td className="px-4 py-3">
                        <div className="flex justify-end gap-2">
                          {canWrite && (
                            <button type="button" className="btn-secondary" onClick={() => openEdit(c)}>
                              {t('admin.edit')}
                            </button>
                          )}
                          {canDelete && (
                            <button type="button" className="btn-danger" disabled={busy} onClick={() => remove(c)}>
                              {t('admin.delete')}
                            </button>
                          )}
                        </div>
                      </td>
                    )}
                  </tr>
                ))}
              </tbody>
            </table>
          </div>
          <div className="flex items-center justify-between text-sm">
            <button type="button" className="btn-secondary" disabled={page <= 1} onClick={() => setPage((p) => p - 1)}>
              {t('admin.prev')}
            </button>
            <span className="muted">{t('admin.pageOf', { page: meta.page, pages: meta.pages })}</span>
            <button
              type="button"
              className="btn-secondary"
              disabled={page >= meta.pages}
              onClick={() => setPage((p) => p + 1)}
            >
              {t('admin.next')}
            </button>
          </div>
        </>
      )}
    </div>
  );
}