"use client";

import { useEffect, useState } from "react";
import Link from "next/link";
import { Plus, RefreshCw } from "lucide-react";
import { api, type ResumenOrden } from "@/lib/api";
import { usePuede } from "@/components/sesion-proveedor";
import { EstadoBadge } from "@/components/estado-badge";
import { Button } from "@/components/ui/button";
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import {
  Table,
  TableBody,
  TableCell,
  TableHead,
  TableHeader,
  TableRow,
} from "@/components/ui/table";
import { Skeleton } from "@/components/ui/skeleton";
import { toast } from "sonner";

export default function PaginaOrdenes() {
  const [ordenes, setOrdenes] = useState<ResumenOrden[] | null>(null);
  const [cargando, setCargando] = useState(false);
  const puedeCrear = usePuede("crear");

  async function cargar() {
    setCargando(true);
    try {
      setOrdenes(await api<ResumenOrden[]>("/api/ordenes"));
    } catch (error) {
      toast.error(error instanceof Error ? error.message : "No se pudieron cargar las órdenes.");
    } finally {
      setCargando(false);
    }
  }

  useEffect(() => {
    void cargar();
  }, []);

  return (
    <div className="space-y-4">
      <div className="flex items-center justify-between">
        <div>
          <h1 className="text-2xl font-semibold tracking-tight">Órdenes de producción</h1>
          <p className="text-sm text-muted-foreground">
            Del plan al producto terminado, en cuatro pasos.
          </p>
        </div>
        <div className="flex gap-2">
          <Button variant="outline" size="icon" onClick={() => void cargar()} disabled={cargando}>
            <RefreshCw className={cargando ? "size-4 animate-spin" : "size-4"} />
            <span className="sr-only">Actualizar</span>
          </Button>
          {puedeCrear ? (
            <Button asChild>
              <Link href="/ordenes/nueva">
                <Plus className="size-4" />
                Nueva orden
              </Link>
            </Button>
          ) : null}
        </div>
      </div>

      <Card>
        <CardHeader className="pb-3">
          <CardTitle className="text-base">
            {ordenes ? `${ordenes.length} órdenes` : "Cargando…"}
          </CardTitle>
        </CardHeader>
        <CardContent>
          {!ordenes ? (
            <div className="space-y-2">
              {[0, 1, 2].map((i) => (
                <Skeleton key={i} className="h-10 w-full" />
              ))}
            </div>
          ) : ordenes.length === 0 ? (
            <p className="py-10 text-center text-sm text-muted-foreground">
              Todavía no hay órdenes.
              {puedeCrear ? " Creá la primera con el botón de arriba." : null}
            </p>
          ) : (
            <Table>
              <TableHeader>
                <TableRow>
                  <TableHead className="w-20">Orden</TableHead>
                  <TableHead>Fecha</TableHead>
                  <TableHead>Línea</TableHead>
                  <TableHead className="text-right">Productos</TableHead>
                  <TableHead>Estado</TableHead>
                  <TableHead className="hidden md:table-cell">Documentos</TableHead>
                </TableRow>
              </TableHeader>
              <TableBody>
                {ordenes.map((orden) => (
                  <TableRow key={orden.id} className="cursor-pointer">
                    <TableCell className="font-medium">
                      <Link href={`/ordenes/${orden.id}`} className="hover:underline">
                        #{orden.id}
                      </Link>
                    </TableCell>
                    <TableCell className="tabular-nums">{orden.fecha}</TableCell>
                    <TableCell>{orden.linea ?? "—"}</TableCell>
                    <TableCell className="text-right tabular-nums">{orden.productos}</TableCell>
                    <TableCell>
                      <EstadoBadge estado={orden.estado} etiqueta={orden.estadoEtiqueta} />
                    </TableCell>
                    <TableCell className="hidden font-mono text-xs text-muted-foreground md:table-cell">
                      {[
                        orden.despachoDocumento,
                        orden.produccionDocumento,
                        orden.trasladoDocumento,
                      ]
                        .filter(Boolean)
                        .join("  ·  ") || "—"}
                    </TableCell>
                  </TableRow>
                ))}
              </TableBody>
            </Table>
          )}
        </CardContent>
      </Card>
    </div>
  );
}