"use client";

import { useConfirm } from "@/components/confirm-provider";
import {
  DashboardEmptyState,
  DashboardListRow,
  DashboardPageIntro,
  DashboardSection,
  DashboardToolbar,
} from "@/components/dashboard-page";
import { Button } from "@/components/ui/button";
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu";
import { ErrorState } from "@/components/ui/error-state";
import { Field } from "@/components/ui/field";
import {
  Dialog,
  DialogBody,
  DialogContent,
  DialogDescription,
  DialogFooter,
  DialogHeader,
  DialogTitle,
} from "@/components/ui/dialog";
import { Input } from "@/components/ui/input";
import { SkeletonListRow } from "@/components/ui/skeleton";
import { useToast } from "@/hooks/use-toast";
import { mecanicosApi } from "@/lib/api";
import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
import { ArrowLeft, Loader2, MoreVertical, Plus, Wrench } from "lucide-react";
import { useRouter } from "next/navigation";
import { useMemo, useState } from "react";

type MecanicoForm = {
  nombre: string;
  telefono: string;
  email: string;
  especialidad: string;
};

const EMPTY_FORM: MecanicoForm = {
  nombre: "",
  telefono: "",
  email: "",
  especialidad: "",
};

export default function MecanicosPage() {
  const router = useRouter();
  const { toast } = useToast();
  const queryClient = useQueryClient();
  const confirm = useConfirm();
  const [form, setForm] = useState<MecanicoForm>(EMPTY_FORM);
  const [editing, setEditing] = useState<any | null>(null);
  const [query, setQuery] = useState("");
  const [showForm, setShowForm] = useState(false);

  const { data: mecanicos = [], isLoading, isError, refetch } = useQuery({
    queryKey: ["mecanicos", "activos"],
    queryFn: () => mecanicosApi.list({ activo: true }),
  });

  const { data: inactivos = [] } = useQuery({
    queryKey: ["mecanicos", "inactivos"],
    queryFn: () => mecanicosApi.list({ activo: false }),
  });

  const filtered = useMemo(() => {
    const term = query.trim().toLowerCase();
    if (!term) return mecanicos;
    return mecanicos.filter((item: any) =>
      [item.nombre, item.telefono, item.email, item.especialidad]
        .filter(Boolean)
        .some((value) => String(value).toLowerCase().includes(term)),
    );
  }, [mecanicos, query]);

  const resetForm = () => {
    setEditing(null);
    setForm(EMPTY_FORM);
    setShowForm(false);
  };

  const saveMutation = useMutation({
    mutationFn: async () => {
      const payload = {
        nombre: form.nombre.trim(),
        telefono: form.telefono.trim() || undefined,
        email: form.email.trim() || undefined,
        especialidad: form.especialidad.trim() || undefined,
      };

      if (!payload.nombre) {
        throw new Error("Escribe el nombre del mecánico.");
      }

      if (editing) {
        return mecanicosApi.update(Number(editing.id), payload);
      }

      return mecanicosApi.create(payload);
    },
    onSuccess: async () => {
      await queryClient.invalidateQueries({ queryKey: ["mecanicos"] });
      toast({
        variant: "success",
        title: editing ? "Mecánico actualizado" : "Mecánico creado",
      });
      resetForm();
    },
    onError: (error: any) =>
      toast({
        variant: "destructive",
        title: "Error",
        description: error.message || "No se pudo guardar.",
      }),
  });

  const activeMutation = useMutation({
    mutationFn: ({ id, activo }: { id: number; activo: boolean }) =>
      mecanicosApi.setActive(id, activo),
    onSuccess: async () => {
      await queryClient.invalidateQueries({ queryKey: ["mecanicos"] });
      toast({ title: "Estado actualizado" });
    },
    onError: (error: any) =>
      toast({
        variant: "destructive",
        title: "Error",
        description: error.message || "No se pudo actualizar el estado.",
      }),
  });

  const startEdit = (item: any) => {
    setEditing(item);
    setForm({
      nombre: item.nombre || "",
      telefono: item.telefono || "",
      email: item.email || "",
      especialidad: item.especialidad || "",
    });
    setShowForm(true);
  };

  const startCreate = () => {
    setEditing(null);
    setForm(EMPTY_FORM);
    setShowForm(true);
  };

  return (
    <div className="min-h-full pb-16 md:pb-10">
      <main className="mx-auto flex max-w-6xl flex-col gap-6 p-4 md:p-6">
        <DashboardPageIntro
          title="Mecánicos"
          description="Administra técnicos disponibles para asignarlos a las órdenes de taller."
          icon={Wrench}
          tone="blue"
          badge="Taller"
          onBack={() => router.push("/dashboard")}
          actions={
            <Button
              variant="outline"
              onClick={() => router.push("/dashboard/ots")}
            >
              <ArrowLeft className="mr-2 h-4 w-4" />
              Ver recepciones
            </Button>
          }
          filters={
            <DashboardToolbar
              searchValue={query}
              onSearchChange={setQuery}
              searchPlaceholder="Buscar mecánico"
              action={
                <Button onClick={startCreate}>
                  <Plus className="mr-2 h-4 w-4" />
                  Nuevo mecánico
                </Button>
              }
            />
          }
          stats={[
            {
              label: "Activos",
              value: mecanicos.length,
              hint: "Disponibles para asignar",
              icon: Wrench,
            },
            {
              label: "Dados de baja",
              value: inactivos.length,
              hint: "No asignables",
              icon: Wrench,
            },
          ]}
        />

        <Dialog open={showForm} onOpenChange={(open) => (open ? setShowForm(true) : resetForm())}>
          <DialogContent className="sm:max-w-lg">
            <DialogHeader>
              <DialogTitle>{editing ? "Editar mecánico" : "Nuevo mecánico"}</DialogTitle>
              <DialogDescription>
                Registra el técnico responsable sin convertirlo en usuario del sistema.
              </DialogDescription>
            </DialogHeader>

            <DialogBody>
              <div className="space-y-4">
                <Field label="Nombre" htmlFor="mecanico-nombre" required>
                  <Input
                    value={form.nombre}
                    autoComplete="name"
                    onChange={(event) =>
                      setForm((current) => ({
                        ...current,
                        nombre: event.target.value,
                      }))
                    }
                  />
                </Field>

                <Field
                  label="Teléfono"
                  htmlFor="mecanico-telefono"
                  hint="Para avisarle cuando entre un trabajo."
                >
                  <Input
                    type="tel"
                    inputMode="tel"
                    autoComplete="tel"
                    value={form.telefono}
                    onChange={(event) =>
                      setForm((current) => ({
                        ...current,
                        telefono: event.target.value,
                      }))
                    }
                  />
                </Field>

                <Field label="Correo electrónico" htmlFor="mecanico-email">
                  <Input
                    type="email"
                    inputMode="email"
                    autoComplete="email"
                    value={form.email}
                    onChange={(event) =>
                      setForm((current) => ({
                        ...current,
                        email: event.target.value,
                      }))
                    }
                  />
                </Field>

                <Field
                  label="Especialidad"
                  htmlFor="mecanico-especialidad"
                  hint="Por ejemplo: enderezado, pintura, mecánica general."
                >
                  <Input
                    value={form.especialidad}
                    onChange={(event) =>
                      setForm((current) => ({
                        ...current,
                        especialidad: event.target.value,
                      }))
                    }
                  />
                </Field>
              </div>
            </DialogBody>

            <DialogFooter>
              <Button variant="outline" size="lg" onClick={resetForm}>
                Cancelar
              </Button>
              <Button
                size="lg"
                disabled={saveMutation.isPending}
                onClick={() => saveMutation.mutate()}
              >
                {saveMutation.isPending ? (
                  <Loader2 className="mr-2 h-4 w-4 animate-spin" />
                ) : (
                  <Plus className="mr-2 h-4 w-4" />
                )}
                {editing ? "Guardar cambios" : "Crear"}
              </Button>
            </DialogFooter>
          </DialogContent>
        </Dialog>

        <div className="grid gap-5">
          <DashboardSection
            title="Listado"
            description="Solo los mecánicos activos aparecen para asignar una orden."
          >
            <div className="space-y-4">
              {isLoading ? (
                <div className="divide-y divide-border rounded-xl border border-border">
                  {Array.from({ length: 4 }).map((_, index) => (
                    <SkeletonListRow key={index} />
                  ))}
                </div>
              ) : isError ? (
                <ErrorState onRetry={() => refetch()} description="No se pudo cargar la lista de mecánicos." />
              ) : filtered.length === 0 ? (
                <DashboardEmptyState
                  title={query.trim() ? "No se encontraron mecánicos" : "Sin mecánicos activos"}
                  description={
                    query.trim()
                      ? "Prueba con otro nombre, teléfono o especialidad."
                      : "Crea el primer mecánico para poder asignarlo a una orden."
                  }
                  icon={Wrench}
                  className="border-border bg-muted"
                  action={
                    !query.trim() ? (
                      <Button onClick={startCreate}>
                        <Plus className="mr-2 h-4 w-4" />
                        Nuevo mecánico
                      </Button>
                    ) : undefined
                  }
                />
              ) : (
                <div className="overflow-hidden rounded-xl border border-border">
                  {filtered.map((item: any) => (
                    <DashboardListRow
                      key={item.id}
                      title={item.nombre}
                      meta={
                        [item.especialidad || "Sin especialidad", item.telefono].filter(Boolean).join(" | ")
                      }
                      actions={
                        <DropdownMenu>
                          <DropdownMenuTrigger asChild>
                            <Button variant="ghost" size="icon" aria-label="Más acciones">
                              <MoreVertical className="h-4 w-4" />
                            </Button>
                          </DropdownMenuTrigger>
                          <DropdownMenuContent align="end">
                            <DropdownMenuItem onClick={() => startEdit(item)}>Editar</DropdownMenuItem>
                            <DropdownMenuItem
                              variant="destructive"
                              disabled={activeMutation.isPending}
                              onClick={async () => {
                                const confirmed = await confirm({
                                  title: `¿Dar de baja a ${item.nombre}?`,
                                  description: "Deja de aparecer para asignarlo a nuevas OTs. Lo puedes volver a activar cuando quieras.",
                                  confirmLabel: "Dar de baja",
                                  tone: "destructive",
                                });
                                if (confirmed) {
                                  activeMutation.mutate({ id: Number(item.id), activo: false });
                                }
                              }}
                            >
                              Dar de baja
                            </DropdownMenuItem>
                          </DropdownMenuContent>
                        </DropdownMenu>
                      }
                    />
                  ))}
                </div>
              )}

              {inactivos.length > 0 ? (
                <div className="border-t border-border pt-4">
                  <h3 className="font-bold text-foreground">Dados de baja</h3>
                  <div className="mt-3 overflow-hidden rounded-xl border border-border bg-muted">
                    {inactivos.map((item: any) => (
                      <DashboardListRow
                        key={item.id}
                        title={item.nombre}
                        meta={item.especialidad || "Sin especialidad"}
                        actions={
                          <Button
                            variant="outline"
                            size="sm"
                            disabled={activeMutation.isPending}
                            onClick={() =>
                              activeMutation.mutate({
                                id: Number(item.id),
                                activo: true,
                              })
                            }
                          >
                            Dar de alta
                          </Button>
                        }
                      />
                    ))}
                  </div>
                </div>
              ) : null}
            </div>
          </DashboardSection>
        </div>
      </main>
    </div>
  );
}