'use client';
import { useCallback, useEffect, useState } from 'react';
import Link from 'next/link';
import { api, errMsg } from '@/lib/api';
import { Alert, Empty, fmt } from '@/components/ui';

interface Msg { id: string; fromEmail: string; fromName: string | null; subject: string | null; bodyText: string | null; receivedAt: string; status: 'unmatched' | 'matched' | 'created' | 'ignored'; ticketId: string | null; ticketNumber: string | null }
interface Cust { id: string; name: string; customerNumber: string }
const STATUS_LABEL: Record<Msg['status'], string> = { unmatched: 'Unzugeordnet', matched: 'An Ticket angehängt', created: 'Ticket erstellt', ignored: 'Ignoriert' };

/** Eine unzugeordnete Mail: Kunde zuweisen (legt neues Ticket an), an bestehendes Ticket anhängen, oder ignorieren. */
function UnmatchedRow({ m, custs, onDone, onError }: { m: Msg; custs: Cust[]; onDone: (t: string) => void; onError: (m: string) => void }) {
  const [org, setOrg] = useState(''); const [ticketNumber, setTicketNumber] = useState(''); const [busy, setBusy] = useState(false); const [open, setOpen] = useState(false);
  async function assign() {
    if (!org) return; setBusy(true);
    try { const r = await api<{ number: string }>('POST', `/admin/inbox/${m.id}/assign`, { orgId: org }); onDone(`Ticket ${r.number} angelegt.`); }
    catch (x) { onError(errMsg(x)); } finally { setBusy(false); }
  }
  async function link() {
    if (!ticketNumber.trim()) return; setBusy(true);
    try { await api('POST', `/admin/inbox/${m.id}/link`, { ticketNumber: ticketNumber.trim() }); onDone(`An Ticket ${ticketNumber.trim()} angehängt.`); }
    catch (x) { onError(errMsg(x)); } finally { setBusy(false); }
  }
  async function ignore() {
    setBusy(true);
    try { await api('POST', `/admin/inbox/${m.id}/ignore`); onDone('Ignoriert.'); }
    catch (x) { onError(errMsg(x)); } finally { setBusy(false); }
  }
  return (<div className="card">
    <div className="row between"><div><strong>{m.subject || '(kein Betreff)'}</strong><p className="small muted" style={{ margin: '2px 0 0' }}>Von: {m.fromName ? `${m.fromName} <${m.fromEmail}>` : m.fromEmail} · {fmt(m.receivedAt)}</p></div>
      <button className="btn small" aria-expanded={open} onClick={() => setOpen(!open)}>{open ? 'Schließen' : 'Text anzeigen'}</button></div>
    {open && <pre className="small" style={{ whiteSpace: 'pre-wrap', background: 'var(--surface-2)', padding: 12, borderRadius: 'var(--radius-sm)', margin: '12px 0', maxHeight: 300, overflow: 'auto' }}>{m.bodyText || '(kein Text)'}</pre>}
    <div className="row" style={{ marginTop: 12, gap: 16, flexWrap: 'wrap' }}>
      <div className="row" style={{ gap: 8 }}>
        <select aria-label="Kunde zuweisen" value={org} onChange={(e) => setOrg(e.target.value)} style={{ minWidth: 200 }}><option value="">Kunde wählen …</option>{custs.map((c) => <option key={c.id} value={c.id}>{c.customerNumber} · {c.name}</option>)}</select>
        <button className="btn small primary" disabled={!org || busy} onClick={assign}>Zuweisen (neues Ticket)</button>
      </div>
      <div className="row" style={{ gap: 8 }}>
        <input aria-label="Ticketnummer" placeholder="T-42" value={ticketNumber} onChange={(e) => setTicketNumber(e.target.value)} style={{ width: 100 }} />
        <button className="btn small" disabled={!ticketNumber.trim() || busy} onClick={link}>An Ticket anhängen</button>
      </div>
      <button className="btn small danger" disabled={busy} onClick={ignore}>Ignorieren</button>
    </div>
  </div>);
}

export default function Posteingang() {
  const [status, setStatus] = useState<'unmatched' | 'matched' | 'created' | 'ignored' | ''>('unmatched');
  const [list, setList] = useState<Msg[] | null>(null); const [custs, setCusts] = useState<Cust[]>([]); const [err, setErr] = useState(''); const [ok, setOk] = useState('');
  const load = useCallback(() => api<Msg[]>('GET', `/admin/inbox${status ? `?status=${status}` : ''}`).then(setList).catch((e) => setErr(errMsg(e))), [status]);
  useEffect(() => { void load(); }, [load]);
  useEffect(() => { api<Cust[]>('GET', '/admin/customers').then(setCusts).catch(() => undefined); }, []);
  return (<>
    <div className="pagehead"><h1>Posteingang</h1></div>
    <p className="muted small" style={{ marginTop: -12, marginBottom: 16 }}>Mails aus dem konfigurierten Ticket-Postfach, die nicht automatisch zugeordnet werden konnten (siehe Einstellungen &gt; E-Mail &gt; IMAP-Posteingang).</p>
    {err && <Alert kind="err">{err}</Alert>}
    {ok && <Alert kind="ok">{ok}</Alert>}
    <div className="row small" style={{ marginBottom: 16, gap: 8 }}>
      {(['unmatched', 'matched', 'created', 'ignored', ''] as const).map((s) => <button key={s || 'all'} className="btn small" style={status === s ? { background: 'var(--surface-2)', fontWeight: 600, borderColor: 'var(--accent)' } : undefined} onClick={() => setStatus(s)}>{s ? STATUS_LABEL[s] : 'Alle'}</button>)}
    </div>
    {list === null ? <p className="muted" role="status">Wird geladen …</p> : list.length === 0 ? <div className="card"><Empty title="Keine Einträge">{status === 'unmatched' ? 'Aktuell liegen keine unzugeordneten Mails vor.' : 'Für diesen Filter gibt es keine Einträge.'}</Empty></div> :
      list.map((m) => m.status === 'unmatched'
        ? <UnmatchedRow key={m.id} m={m} custs={custs} onDone={(t) => { setOk(t); setErr(''); void load(); }} onError={setErr} />
        : <div className="card" key={m.id}><div className="row between"><div><strong>{m.subject || '(kein Betreff)'}</strong><p className="small muted" style={{ margin: '2px 0 0' }}>Von: {m.fromName ? `${m.fromName} <${m.fromEmail}>` : m.fromEmail} · {fmt(m.receivedAt)}</p></div>
            <div className="row" style={{ gap: 8 }}><span className="badge info">{STATUS_LABEL[m.status]}</span>{m.ticketNumber && <Link className="btn small" href={`/tickets/${m.ticketId}`}>{m.ticketNumber} ansehen</Link>}</div></div></div>)}
  </>);
}