"use client";

import {
  DashboardEmptyState,
  DashboardListRow,
  DashboardPageIntro,
  DashboardSection,
  DashboardToolbar,
} from "@/components/dashboard-page";
import { useAuth } from "@/components/providers";
import { Badge } from "@/components/ui/badge";
import { Button } from "@/components/ui/button";
import { ErrorState } from "@/components/ui/error-state";
import {
  Dialog,
  DialogBody,
  DialogContent,
  DialogDescription,
  DialogFooter,
  DialogHeader,
  DialogTitle,
} from "@/components/ui/dialog";
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";
import { SkeletonListRow, SkeletonStatCard } from "@/components/ui/skeleton";
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table";
import { useToast } from "@/hooks/use-toast";
import { TenantEntorno, TenantResumen, tenantsAdminApi } from "@/lib/api";
import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
import {
  AlertTriangle,
  CheckCircle2,
  Loader2,
  Network,
  Plug,
  Plus,
  XCircle,
} from "lucide-react";
import { useRouter } from "next/navigation";
import { useState } from "react";

const ESTADO_LABEL: Record<string, string> = {
  onboarding: "En preparación",
  activo: "Activo",
  suspendido: "Suspendido",
};

const ESTADO_BADGE_VARIANT: Record<string, "success" | "neutral" | "destructive"> = {
  activo: "success",
  onboarding: "neutral",
  suspendido: "destructive",
};

function EstadoBadge({ estado }: { estado: string }) {
  return (
    <Badge variant={ESTADO_BADGE_VARIANT[estado] || "neutral"}>
      {ESTADO_LABEL[estado] || estado}
    </Badge>
  );
}

function EntornoBadge({ entorno }: { entorno: string }) {
  if (entorno === "produccion") {
    return <Badge variant="warning">Producción</Badge>;
  }
  return <Badge variant="neutral">Demo</Badge>;
}

type RegisterForm = {
  codigo: string;
  nombre: string;
  entorno: TenantEntorno;
  dbHost: string;
  dbPort: string;
  dbName: string;
  dbUser: string;
  dbPassword: string;
};

const EMPTY_FORM: RegisterForm = {
  codigo: "",
  nombre: "",
  entorno: "demo",
  dbHost: "",
  dbPort: "3306",
  dbName: "",
  dbUser: "",
  dbPassword: "",
};

function RegisterTenantDialog({
  open,
  onOpenChange,
  onRegistered,
}: {
  open: boolean;
  onOpenChange: (open: boolean) => void;
  onRegistered: (id: number) => void;
}) {
  const { toast } = useToast();
  const [form, setForm] = useState<RegisterForm>(EMPTY_FORM);
  const [testResult, setTestResult] = useState<{ ok: boolean; message?: string } | null>(null);

  const testMutation = useMutation({
    mutationFn: () =>
      tenantsAdminApi.probarConexion({
        dbHost: form.dbHost,
        dbPort: Number(form.dbPort),
        dbName: form.dbName,
        dbUser: form.dbUser,
        dbPassword: form.dbPassword,
      }),
    onSuccess: (res) => {
      setTestResult(res.ok ? { ok: true } : { ok: false, message: (res as any).error });
    },
    onError: (error: any) => setTestResult({ ok: false, message: error?.message }),
  });

  const registerMutation = useMutation({
    mutationFn: () =>
      tenantsAdminApi.registrar({
        ...form,
        dbPort: Number(form.dbPort),
      }),
    onSuccess: (tenant) => {
      toast({
        variant: "success",
        title: "Cliente registrado",
        description: `"${tenant.nombre}" quedó en preparación. Seguí con verificar y activar.`,
      });
      setForm(EMPTY_FORM);
      setTestResult(null);
      onOpenChange(false);
      onRegistered(tenant.id);
    },
    onError: (error: any) =>
      toast({
        variant: "destructive",
        title: "No se pudo registrar",
        description: error?.message || "Revisá los datos e intentá de nuevo.",
      }),
  });

  const canSubmit =
    form.codigo.trim() &&
    form.nombre.trim() &&
    form.dbHost.trim() &&
    form.dbPort.trim() &&
    form.dbName.trim() &&
    form.dbUser.trim() &&
    form.dbPassword.trim();

  return (
    <Dialog
      open={open}
      onOpenChange={(next) => {
        onOpenChange(next);
        if (!next) {
          setForm(EMPTY_FORM);
          setTestResult(null);
        }
      }}
    >
      <DialogContent className="sm:max-w-xl">
        <DialogHeader>
          <DialogTitle>Registrar cliente nuevo</DialogTitle>
          <DialogDescription>
            Conexión a una base que ya existe — esto nunca crea usuarios ni bases de MySQL,
            eso se hace a mano antes de este paso.
          </DialogDescription>
        </DialogHeader>

        <DialogBody className="space-y-4">
          <div className="grid gap-4 sm:grid-cols-2">
            <div className="space-y-1.5">
              <Label htmlFor="codigo">Código único</Label>
              <Input
                id="codigo"
                placeholder="autocentro-rodriguez"
                value={form.codigo}
                onChange={(e) => setForm({ ...form, codigo: e.target.value })}
              />
            </div>
            <div className="space-y-1.5">
              <Label htmlFor="nombre">Nombre visible</Label>
              <Input
                id="nombre"
                placeholder="Autocentro Rodríguez"
                value={form.nombre}
                onChange={(e) => setForm({ ...form, nombre: e.target.value })}
              />
            </div>
          </div>

          <div className="space-y-1.5">
            <Label>Entorno</Label>
            <div className="flex gap-2">
              <Button
                type="button"
                variant={form.entorno === "demo" ? "default" : "outline"}
                className="h-10 flex-1"
                onClick={() => setForm({ ...form, entorno: "demo" })}
              >
                Demo
              </Button>
              <Button
                type="button"
                variant={form.entorno === "produccion" ? "default" : "outline"}
                className="h-10 flex-1"
                onClick={() => setForm({ ...form, entorno: "produccion" })}
              >
                Producción
              </Button>
            </div>
          </div>

          <div className="grid gap-4 sm:grid-cols-[2fr_1fr]">
            <div className="space-y-1.5">
              <Label htmlFor="dbHost">Host</Label>
              <Input
                id="dbHost"
                placeholder="132.226.40.48"
                value={form.dbHost}
                onChange={(e) => setForm({ ...form, dbHost: e.target.value })}
              />
            </div>
            <div className="space-y-1.5">
              <Label htmlFor="dbPort">Puerto</Label>
              <Input
                id="dbPort"
                inputMode="numeric"
                value={form.dbPort}
                onChange={(e) => setForm({ ...form, dbPort: e.target.value })}
              />
            </div>
          </div>

          <div className="space-y-1.5">
            <Label htmlFor="dbName">Nombre de la base</Label>
            <Input
              id="dbName"
              placeholder="mbinvautocentrorodriguez"
              value={form.dbName}
              onChange={(e) => setForm({ ...form, dbName: e.target.value })}
            />
          </div>

          <div className="grid gap-4 sm:grid-cols-2">
            <div className="space-y-1.5">
              <Label htmlFor="dbUser">Usuario MySQL</Label>
              <Input
                id="dbUser"
                value={form.dbUser}
                onChange={(e) => setForm({ ...form, dbUser: e.target.value })}
              />
            </div>
            <div className="space-y-1.5">
              <Label htmlFor="dbPassword">Contraseña</Label>
              <Input
                id="dbPassword"
                type="password"
                value={form.dbPassword}
                onChange={(e) => setForm({ ...form, dbPassword: e.target.value })}
              />
            </div>
          </div>

          <div className="flex flex-col gap-2 rounded-xl border border-border bg-muted p-3">
            <Button
              type="button"
              variant="outline"
              className="h-10"
              disabled={testMutation.isPending || !form.dbHost || !form.dbName || !form.dbUser || !form.dbPassword}
              onClick={() => void testMutation.mutate()}
            >
              {testMutation.isPending ? (
                <Loader2 className="mr-2 h-4 w-4 animate-spin" />
              ) : (
                <Plug className="mr-2 h-4 w-4" />
              )}
              Probar conexión
            </Button>
            {testResult ? (
              <div
                className={`flex items-center gap-2 rounded-xl border px-3 py-2 text-sm font-semibold ${
                  testResult.ok
                    ? "border-success/30 bg-success-soft text-success"
                    : "border-destructive/30 bg-destructive-soft text-destructive"
                }`}
              >
                {testResult.ok ? <CheckCircle2 className="h-4 w-4" /> : <XCircle className="h-4 w-4" />}
                {testResult.ok ? "Conexión exitosa" : testResult.message || "No se pudo conectar"}
              </div>
            ) : null}
          </div>

        </DialogBody>

        <DialogFooter>
          <Button
            type="button"
            size="lg"
            disabled={!canSubmit || registerMutation.isPending}
            onClick={() => void registerMutation.mutate()}
          >
            {registerMutation.isPending ? (
              <Loader2 className="mr-2 h-4 w-4 animate-spin" />
            ) : (
              <Plus className="mr-2 h-4 w-4" />
            )}
            Registrar cliente
          </Button>
        </DialogFooter>
      </DialogContent>
    </Dialog>
  );
}

export default function AdministracionClientesPage() {
  const router = useRouter();
  const { isPlatformAdmin } = useAuth();
  const queryClient = useQueryClient();
  const [showRegister, setShowRegister] = useState(false);
  const [search, setSearch] = useState("");

  const { data: tenants = [], isLoading, isError, refetch } = useQuery({
    queryKey: ["admin-tenants"],
    queryFn: tenantsAdminApi.list,
    enabled: isPlatformAdmin,
    refetchInterval: 30000,
  });

  if (!isPlatformAdmin) {
    return (
      <main className="mx-auto max-w-4xl p-6">
        <DashboardEmptyState
          title="Sin acceso"
          description="Solo identidades con acceso de plataforma pueden administrar clientes."
          icon={Network}
        />
      </main>
    );
  }

  const activos = tenants.filter((t: TenantResumen) => t.estado === "activo").length;
  const enPreparacion = tenants.filter((t: TenantResumen) => t.estado === "onboarding").length;
  const conProblemas = tenants.filter(
    (t: TenantResumen) => !t.acceso.ok || t.desviaciones.grave > 0,
  ).length;

  const normalizedSearch = search.trim().toLowerCase();
  const filteredTenants = normalizedSearch
    ? tenants.filter(
        (t: TenantResumen) =>
          t.nombre.toLowerCase().includes(normalizedSearch) ||
          t.codigo.toLowerCase().includes(normalizedSearch) ||
          t.dbHost.toLowerCase().includes(normalizedSearch),
      )
    : tenants;

  return (
    <div className="min-h-full pb-16 md:pb-10">
      <main className="mx-auto flex max-w-7xl flex-col gap-6 p-4 md:p-6">
        <DashboardPageIntro
          title="Clientes (plataforma)"
          description="Registrar, verificar y activar cada cliente — su base es siempre propia y separada."
          icon={Network}
          tone="slate"
          badge="Plataforma"
          onBack={() => router.push("/dashboard")}
          actions={
            <Button onClick={() => setShowRegister(true)}>
              <Plus className="mr-2 h-4 w-4" />
              Registrar cliente
            </Button>
          }
          stats={
            isLoading || isError
              ? undefined
              : [
                  { label: "Activos", value: activos, icon: CheckCircle2 },
                  { label: "En preparación", value: enPreparacion, icon: AlertTriangle },
                  { label: "Con problemas", value: conProblemas, icon: XCircle },
                  { label: "Total", value: tenants.length, icon: Network },
                ]
          }
          filters={
            <DashboardToolbar
              searchValue={search}
              onSearchChange={setSearch}
              searchPlaceholder="Buscar por nombre, código o host..."
            />
          }
        />

        {isLoading ? (
          <div className="grid grid-cols-2 gap-3 lg:grid-cols-4">
            {Array.from({ length: 4 }).map((_, index) => (
              <SkeletonStatCard key={index} />
            ))}
          </div>
        ) : null}

        <DashboardSection title="Todos los clientes" description="Host, puerto y base siempre visibles — nunca solo el nombre.">
          {isLoading ? (
            <div className="divide-y divide-border">
              {Array.from({ length: 4 }).map((_, index) => (
                <SkeletonListRow key={index} />
              ))}
            </div>
          ) : isError ? (
            <ErrorState
              onRetry={() => refetch()}
              description="No se pudo cargar el listado de clientes de la plataforma."
            />
          ) : tenants.length === 0 ? (
            <DashboardEmptyState
              title="Todavía no hay clientes registrados"
              description="Registrá el primero con el botón de arriba."
              icon={Network}
              className="border-none bg-muted shadow-none"
            />
          ) : filteredTenants.length === 0 ? (
            <DashboardEmptyState
              title="No se encontraron clientes"
              description="Probá con otro nombre, código o host para ampliar la búsqueda."
              icon={Network}
              className="border-none bg-muted shadow-none"
            />
          ) : (
            <>
              {/* Mobile: filas táctiles con lo esencial. Desktop: tabla con conexión, esquema y desviaciones en columnas propias. */}
              <div className="overflow-hidden rounded-xl border border-border md:hidden">
                {filteredTenants.map((tenant: TenantResumen) => (
                  <DashboardListRow
                    key={tenant.id}
                    icon={<Network className="h-4 w-4" />}
                    title={
                      <span className="flex flex-wrap items-center gap-1.5">
                        {tenant.nombre}
                        <EstadoBadge estado={tenant.estado} />
                      </span>
                    }
                    meta={`${tenant.codigo} · ${tenant.dbHost}:${tenant.dbPort}/${tenant.dbName}`}
                    onClick={() => router.push(`/dashboard/administracion/clientes/${tenant.id}`)}
                  />
                ))}
              </div>

              <div className="hidden md:block">
                <Table>
                  <TableHeader>
                    <TableRow>
                      <TableHead>Cliente</TableHead>
                      <TableHead>Conexión</TableHead>
                      <TableHead>Esquema y desviaciones</TableHead>
                    </TableRow>
                  </TableHeader>
                  <TableBody>
                    {filteredTenants.map((tenant: TenantResumen) => (
                      <TableRow
                        key={tenant.id}
                        className="cursor-pointer"
                        role="link"
                        tabIndex={0}
                        aria-label={`Ver detalle de ${tenant.nombre}`}
                        onClick={() => router.push(`/dashboard/administracion/clientes/${tenant.id}`)}
                        onKeyDown={(event) => {
                          if (event.key === 'Enter' || event.key === ' ') {
                            event.preventDefault();
                            router.push(`/dashboard/administracion/clientes/${tenant.id}`);
                          }
                        }}
                      >
                        <TableCell>
                          <div className="flex flex-wrap items-center gap-2">
                            <span className="font-medium text-foreground">{tenant.nombre}</span>
                            <EstadoBadge estado={tenant.estado} />
                            <EntornoBadge entorno={tenant.entorno} />
                          </div>
                        </TableCell>
                        <TableCell className="text-muted-foreground">
                          <div className="flex flex-wrap items-center gap-2">
                            <span className="max-w-[220px] truncate font-mono text-xs">
                              {tenant.codigo} · {tenant.dbHost}:{tenant.dbPort}/{tenant.dbName}
                            </span>
                            {tenant.acceso.ok ? (
                              <Badge variant="success">Conecta</Badge>
                            ) : (
                              <Badge variant="destructive">Sin conexión</Badge>
                            )}
                          </div>
                        </TableCell>
                        <TableCell>
                          <div className="flex flex-wrap items-center gap-2">
                            {tenant.migracionesPendientes.length > 0 ? (
                              <Badge variant="warning">
                                {tenant.migracionesPendientes.length} esquema pendiente
                              </Badge>
                            ) : (
                              <Badge variant="neutral">Esquema completo</Badge>
                            )}
                            {tenant.desviaciones.grave > 0 ? (
                              <Badge variant="destructive">{tenant.desviaciones.grave} desviación grave</Badge>
                            ) : null}
                          </div>
                        </TableCell>
                      </TableRow>
                    ))}
                  </TableBody>
                </Table>
              </div>
            </>
          )}
        </DashboardSection>
      </main>

      <RegisterTenantDialog
        open={showRegister}
        onOpenChange={setShowRegister}
        onRegistered={(id) => {
          void queryClient.invalidateQueries({ queryKey: ["admin-tenants"] });
          router.push(`/dashboard/administracion/clientes/${id}`);
        }}
      />
    </div>
  );
}