import { useQuery } from '@tanstack/react-query';
import { Link } from 'react-router-dom';
import { api } from '../../lib/api-client';
import { AppShell, PageHeader, PageBody } from '../../layout/AppShell';
import { Badge, Card, Skeleton } from '../../components/ui/primitives';
import { Table, THead, TBody, TR, TH, TD } from '../../components/ui/table';

interface BrandContent {
  slug: string;
  name: string;
  tagline: string | null;
  enabled: boolean;
  sort_order: number;
  product_count: number;
  updated_at: string;
}

export function BrandsList() {
  const { data, isLoading } = useQuery({
    queryKey: ['brand-content'],
    queryFn: () => api.get<{ brands: BrandContent[] }>('/brands'),
  });

  return (
    <AppShell>
      <PageHeader title="Merken" description="Content voor /merken/[slug] pagina's." />
      <PageBody>
        <Card>
          {isLoading ? (
            <div className="p-6 space-y-3">
              {[0, 1, 2, 3].map((i) => (
                <Skeleton key={i} className="h-10 w-full" />
              ))}
            </div>
          ) : (
            <Table>
              <THead>
                <TR className="hover:bg-transparent">
                  <TH>Merk</TH>
                  <TH>Tagline</TH>
                  <TH className="text-right">Producten</TH>
                  <TH>Status</TH>
                </TR>
              </THead>
              <TBody>
                {(data?.brands ?? []).map((b) => (
                  <TR key={b.slug}>
                    <TD>
                      <Link to={`/cms/brands/${b.slug}`} className="font-medium text-[#F5F5F5] hover:text-[#00FF6A]">
                        {b.name}
                      </Link>
                      <p className="text-xs text-[#999]">{b.slug}</p>
                    </TD>
                    <TD className="text-xs text-[#999] max-w-md truncate">{b.tagline ?? '—'}</TD>
                    <TD className="text-right tabular-nums">{b.product_count}</TD>
                    <TD>
                      {b.enabled ? <Badge variant="success">actief</Badge> : <Badge variant="muted">uit</Badge>}
                    </TD>
                  </TR>
                ))}
              </TBody>
            </Table>
          )}
        </Card>
      </PageBody>
    </AppShell>
  );
}