import { useState } from 'react';
import { useQuery } from '@tanstack/react-query';
import { Search } from 'lucide-react';
import { api } from '../../lib/api-client';
import { AppShell, PageHeader, PageBody } from '../../layout/AppShell';
import { Badge, Card, Input, Select } from '../../components/ui/primitives';
import { Table, THead, TBody, TR, TH, TD } from '../../components/ui/table';

interface Subscriber {
  id: number;
  email: string;
  subscribed: boolean;
  source: string | null;
  created_at: string;
  unsubscribed_at: string | null;
}

export function SubscribersList() {
  const [q, setQ] = useState('');
  const [subscribed, setSubscribed] = useState<'' | 'true' | 'false'>('');

  const { data } = useQuery({
    queryKey: ['subscribers', q, subscribed],
    queryFn: () =>
      api.get<{ subscribers: Subscriber[]; total: number }>('/subscribers', {
        q: q || undefined,
        subscribed: subscribed || undefined,
        limit: 200,
      }),
  });

  const subs = data?.subscribers ?? [];

  return (
    <AppShell>
      <PageHeader
        title="Abonnees"
        description={`${data?.total ?? 0} totaal`}
      />
      <PageBody>
        <Card>
          <div className="px-5 py-3 border-b border-[#333] flex items-center gap-3">
            <div className="relative flex-1 max-w-md">
              <Search className="absolute left-2.5 top-2.5 h-4 w-4 text-[#666]" />
              <Input className="pl-9" placeholder="E-mail zoeken..." value={q} onChange={(e) => setQ(e.target.value)} />
            </div>
            <Select className="w-48" value={subscribed} onChange={(e) => setSubscribed(e.target.value as '' | 'true' | 'false')}>
              <option value="">Alle</option>
              <option value="true">Actief</option>
              <option value="false">Uitgeschreven</option>
            </Select>
          </div>
          <Table>
            <THead>
              <TR className="hover:bg-transparent">
                <TH>E-mail</TH>
                <TH>Bron</TH>
                <TH>Status</TH>
                <TH>Aangemeld</TH>
                <TH>Uitgeschreven</TH>
              </TR>
            </THead>
            <TBody>
              {subs.map((s) => (
                <TR key={s.id}>
                  <TD className="font-mono text-xs">{s.email}</TD>
                  <TD className="text-xs text-[#999]">{s.source ?? '—'}</TD>
                  <TD>
                    {s.subscribed ? <Badge variant="success">actief</Badge> : <Badge variant="muted">uit</Badge>}
                  </TD>
                  <TD className="text-xs text-[#999]">
                    {new Date(s.created_at).toLocaleDateString('nl-NL')}
                  </TD>
                  <TD className="text-xs text-[#999]">
                    {s.unsubscribed_at ? new Date(s.unsubscribed_at).toLocaleDateString('nl-NL') : '—'}
                  </TD>
                </TR>
              ))}
            </TBody>
          </Table>
        </Card>
      </PageBody>
    </AppShell>
  );
}