'use client';

import * as React from 'react';
import Link from 'next/link';
import { useRouter } from 'next/navigation';
import { useQuery } from '@tanstack/react-query';
import { Plus, Search } from 'lucide-react';

import { listTenants, type TenantListItem, type TenantStatus } from '@/lib/api/tenants';
import { formatDate } from '@/lib/format';

import { Button } from '@/components/ui/button';
import { DataTable, type DataTableColumn } from '@/components/ui/data-table';
import { Input } from '@/components/ui/input';
import { StatusPill } from '@/components/ui/status-pill';
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
import { TenantStatusDialog } from '@/components/domain/tenant-status-dialog';

const STATUS_OPTIONS: { value: TenantStatus | 'todos'; label: string }[] = [
  { value: 'todos', label: 'Todos os status' },
  { value: 'trial', label: 'Trial' },
  { value: 'ativo', label: 'Ativo' },
  { value: 'inadimplente', label: 'Inadimplente' },
  { value: 'suspenso', label: 'Suspenso' },
  { value: 'cancelado', label: 'Cancelado' },
];

const LIMIT = 20;

export default function TenantsPage() {
  const router = useRouter();
  const [busca, setBusca] = React.useState('');
  const [status, setStatus] = React.useState<TenantStatus | 'todos'>('todos');
  const [page, setPage] = React.useState(1);
  const [statusTarget, setStatusTarget] = React.useState<TenantListItem | null>(null);

  const { data, isLoading } = useQuery({
    queryKey: ['master', 'tenants', { busca, status, page }],
    queryFn: () =>
      listTenants({
        busca: busca || undefined,
        status: status === 'todos' ? undefined : status,
        page,
        limit: LIMIT,
      }),
    placeholderData: (prev) => prev,
  });

  const columns: DataTableColumn<TenantListItem>[] = [
    {
      id: 'nome',
      header: 'Tenant',
      primary: true,
      cell: (row) => (
        <div className="flex flex-col">
          <span className="font-medium text-foreground">{row.nome_fantasia || row.razao_social}</span>
          {row.documento && <span className="text-xs text-muted-foreground">{row.documento}</span>}
        </div>
      ),
    },
    {
      id: 'status',
      header: 'Status',
      primary: true,
      cell: (row) => <StatusPill status={row.status} />,
    },
    { id: 'plano', header: 'Plano', cell: (row) => row.plano?.nome ?? '—' },
    { id: 'criado_em', header: 'Criado em', cell: (row) => formatDate(row.criado_em) },
  ];

  return (
    <div className="flex flex-col gap-6">
      <div className="flex flex-wrap items-center justify-between gap-4">
        <div>
          <h1 className="text-xl font-semibold text-foreground">Tenants</h1>
          <p className="text-sm text-muted-foreground">Clientes da plataforma SeConectai Vendas</p>
        </div>
        <Button asChild>
          <Link href="/master/tenants/novo">
            <Plus /> Novo tenant
          </Link>
        </Button>
      </div>

      <div className="flex flex-col gap-3 sm:flex-row sm:items-center">
        <div className="relative flex-1 sm:max-w-xs">
          <Search className="pointer-events-none absolute top-1/2 left-3 size-4 -translate-y-1/2 text-neutral-500" />
          <Input
            placeholder="Buscar por nome ou documento..."
            className="pl-9"
            value={busca}
            onChange={(e) => {
              setBusca(e.target.value);
              setPage(1);
            }}
          />
        </div>
        <Select
          value={status}
          onValueChange={(value) => {
            setStatus(value as TenantStatus | 'todos');
            setPage(1);
          }}
        >
          <SelectTrigger className="w-full sm:w-48" aria-label="Filtrar por status">
            <SelectValue />
          </SelectTrigger>
          <SelectContent>
            {STATUS_OPTIONS.map((opt) => (
              <SelectItem key={opt.value} value={opt.value}>
                {opt.label}
              </SelectItem>
            ))}
          </SelectContent>
        </Select>
      </div>

      <DataTable
        columns={columns}
        data={data?.data ?? []}
        keyField={(row) => row.id}
        loading={isLoading}
        emptyTitle="Nenhum tenant encontrado"
        emptyDescription="Ajuste os filtros ou cadastre um novo tenant."
        emptyAction={
          <Button size="sm" asChild>
            <Link href="/master/tenants/novo">Novo tenant</Link>
          </Button>
        }
        onRowClick={(row) => router.push(`/master/tenants/${row.id}`)}
        rowActions={(row) => (
          <>
            <Button variant="ghost" size="sm" asChild>
              <Link href={`/master/tenants/${row.id}`}>Ver</Link>
            </Button>
            <Button variant="ghost" size="sm" onClick={() => setStatusTarget(row)}>
              Mudar status
            </Button>
          </>
        )}
        pagination={
          data ? { page: data.meta.page, limit: data.meta.limit, total: data.meta.total, onPageChange: setPage } : undefined
        }
      />

      <TenantStatusDialog
        tenant={statusTarget}
        onOpenChange={(open) => !open && setStatusTarget(null)}
      />
    </div>
  );
}