'use client';
import { Suspense, useEffect, useState } from 'react';
import { useSearchParams } from 'next/navigation';
import { api, errMsg } from '@/lib/api';
import { Alert } from '@/components/ui';

interface Info { contractNumber: string; orgName: string; productName: string; termEnd: string }

function Decision() {
  const sp = useSearchParams();
  const token = sp.get('token') ?? '';
  const preselect = sp.get('action') === 'cancel' ? 'cancel' : sp.get('action') === 'keep' ? 'keep' : null;
  const [info, setInfo] = useState<Info | null>(null);
  const [err, setErr] = useState('');
  const [busy, setBusy] = useState(false);
  const [done, setDone] = useState<'keep' | 'cancel' | null>(null);

  useEffect(() => {
    if (!token) { setErr('Der Link ist unvollständig.'); return; }
    api<Info>('GET', `/contracts/renewal-decision?token=${encodeURIComponent(token)}`).then(setInfo).catch((e) => setErr(errMsg(e)));
  }, [token]);

  async function decide(action: 'keep' | 'cancel') {
    setBusy(true); setErr('');
    try { await api('POST', '/contracts/renewal-decision', { token, action }); setDone(action); }
    catch (e) { setErr(errMsg(e)); } finally { setBusy(false); }
  }

  return (<main id="main" className="center"><div className="auth card" style={{ maxWidth: 480 }}>
    <h1>Vertragsentscheidung</h1>
    {err && <Alert kind="err">{err}</Alert>}
    {done ? (
      <Alert kind="ok">
        {done === 'keep' ? 'Vielen Dank! Der Vertrag wird weitergeführt.' : 'Die Kündigung wurde erfasst. Unser Team kümmert sich um die Abmeldung und meldet sich bei Rückfragen.'}
      </Alert>
    ) : info ? (<>
      <p className="muted">
        Vertrag <strong>{info.contractNumber}</strong> ({info.productName}) für <strong>{info.orgName}</strong> läuft am{' '}
        <strong>{new Date(info.termEnd).toLocaleDateString('de-DE')}</strong> aus. Möchten Sie ihn behalten oder kündigen?
      </p>
      <div className="row" style={{ marginTop: 16 }}>
        <button className="btn primary" disabled={busy} autoFocus={preselect === 'keep'} onClick={() => decide('keep')}>{busy ? '…' : 'Vertrag behalten'}</button>
        <button className="btn danger" disabled={busy} autoFocus={preselect === 'cancel'} onClick={() => decide('cancel')}>{busy ? '…' : 'Vertrag kündigen'}</button>
      </div>
      <p className="muted small" style={{ marginTop: 16 }}>„Behalten" verlängert den Vertrag automatisch um eine weitere Laufzeit. „Kündigen" leitet die Abmeldung ein.</p>
    </>) : !err && <p className="muted" role="status">Wird geladen …</p>}
  </div></main>);
}
export default function Page() { return <Suspense><Decision /></Suspense>; }