import Link from "next/link";
import type { ReactNode } from "react";
import { Eye, FileText, MapPinned, Pencil, Phone } from "lucide-react";
import { Badge } from "@/components/ui/badge";
import { Button } from "@/components/ui/button";
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import { semanticBadgeClass, semanticSurfaceClass } from "@/lib/badge-variants";
import { mapaToneToSemanticTone, type MapaTone } from "@/lib/semantic-tokens";
import { cn } from "@/lib/utils";
import { type MapaTerritorialData } from "@/server/queries/mapa-territorial";

function toMapaTone(value: string): MapaTone {
  if (value === "green" || value === "emerald") return "green";
  if (value === "amber") return "amber";
  if (value === "rose") return "rose";
  return "slate";
}

export function MapaTerritorialBoard({
  data,
}: {
  data: MapaTerritorialData;
}) {
  return (
    <div className="space-y-6">
      {data.filtersApplied.length > 0 ? (
        <Card className="border-border shadow-sm">
          <CardContent className="flex flex-wrap items-center gap-2 p-4">
            <span className="text-sm font-medium text-muted-foreground">Filtros activos:</span>
            {data.filtersApplied.map((item) => (
              <Badge key={item} className={semanticBadgeClass("neutral", { shape: "pill" })}>
                {item}
              </Badge>
            ))}
          </CardContent>
        </Card>
      ) : null}

      <section className="grid gap-4 sm:grid-cols-2 xl:grid-cols-3">
        <SummaryMetric label="Total lotes" value={data.summary.totalLotes} tone="slate" />
        <SummaryMetric label="Fichas completas" value={data.summary.completas} tone="green" />
        <SummaryMetric label="En revisión" value={data.summary.revision} tone="amber" />
        <SummaryMetric label="Incompletas" value={data.summary.incompletas} tone="slate" />
        <SummaryMetric label="Vulnerabilidad promedio" value={`${Math.round(data.summary.vulnerabilityAverage)}%`} tone="rose" />
        <SummaryMetric label="Total ocupantes" value={data.summary.ocupantes} tone="green" />
      </section>

      <section className="space-y-4">
        {data.groups.map((group) => (
          <Card key={group.manzana} className="border-border shadow-sm">
            <CardHeader className="border-b border-border bg-muted/60">
              <div className="flex flex-col gap-3 lg:flex-row lg:items-center lg:justify-between">
                <div className="flex items-center gap-3">
                  <div className="flex h-10 w-10 items-center justify-center rounded-2xl bg-muted text-muted-foreground">
                    <MapPinned className="h-5 w-5" />
                  </div>
                  <div>
                    <CardTitle className="text-base">Manzana {group.manzana}</CardTitle>
                    <p className="text-sm text-muted-foreground">
                      {group.summary.totalLotes} lotes · {group.summary.completas} completas · {group.summary.revision} en revisión · {group.summary.incompletas} incompletas
                    </p>
                  </div>
                </div>
                <div className="flex flex-wrap gap-2">
                  <Badge className={semanticBadgeClass("success", { shape: "pill" })}>
                    {group.summary.completas} completas
                  </Badge>
                  <Badge className={semanticBadgeClass("warning", { shape: "pill" })}>
                    {group.summary.revision} en revisión
                  </Badge>
                  <Badge className={semanticBadgeClass("neutral", { shape: "pill" })}>
                    {group.summary.incompletas} incompletas
                  </Badge>
                  <Badge className={semanticBadgeClass("danger", { shape: "pill" })}>
                    Vul. {Math.round(group.summary.vulnerabilityAverage)}%
                  </Badge>
                </div>
              </div>
            </CardHeader>
            <CardContent className="p-4">
              {group.items.length === 0 ? (
                <EmptyMapState />
              ) : (
                <div className="grid gap-4 sm:grid-cols-2 xl:grid-cols-3">
                  {group.items.map((item) => (
                    <div
                      key={item.fichaId}
                      className={cn(
                        "rounded-2xl border p-4 shadow-sm",
                        semanticSurfaceClass(mapaToneToSemanticTone(toMapaTone(item.colorTone)), { padding: "none" }),
                      )}
                    >
                      <div className="flex items-start justify-between gap-3">
                        <div>
                          <p className="text-xs font-medium uppercase tracking-wide text-muted-foreground">Lote {item.lote}</p>
                          <h3 className="mt-1 text-sm font-semibold text-foreground">{item.direccion}</h3>
                        </div>
                        <Badge className={semanticBadgeClass("neutral", { shape: "pill" })}>
                          {item.tramoRshLabel}
                        </Badge>
                      </div>

                      <div className="mt-3 space-y-2 text-sm text-foreground">
                        <Row label="Ocupante" value={item.ocupante} />
                        <Row label="Teléfono" value={item.telefono || "-"} icon={<Phone className="h-3.5 w-3.5" />} />
                        <Row label="RUT" value={item.rut} />
                        <Row label="Estado ficha" value={item.estadoFichaLabel} />
                        <Row label="Situación lote" value={item.situacionLote} />
                        <Row label="Documentos" value={String(item.documentos)} />
                        <Row label="Personas" value={String(item.personas)} />
                      </div>

                      <div className="mt-4 flex flex-wrap gap-2">
                        <Button asChild size="sm" variant="outline" className="h-8 gap-2">
                          <Link href={`/fichas/${item.fichaId}/ver`}>
                            <Eye className="h-4 w-4" />
                            Ver
                          </Link>
                        </Button>
                        <Button asChild size="sm" variant="outline" className="h-8 gap-2">
                          <Link href={`/fichas/${item.fichaId}`}>
                            <Pencil className="h-4 w-4" />
                            Editar
                          </Link>
                        </Button>
                        <Button asChild size="sm" variant="outline" className="h-8 gap-2">
                          <Link href={`/api/fichas/${item.fichaId}/pdf`}>
                            <FileText className="h-4 w-4" />
                            PDF
                          </Link>
                        </Button>
                      </div>
                    </div>
                  ))}
                </div>
              )}
            </CardContent>
          </Card>
        ))}
      </section>
    </div>
  );
}

function SummaryMetric({
  label,
  value,
  tone,
}: {
  label: string;
  value: number | string;
  tone: MapaTone;
}) {
  return (
    <Card className={cn("shadow-sm", semanticSurfaceClass(mapaToneToSemanticTone(tone), { padding: "none" }))}>
      <CardContent className="flex items-center justify-between p-5">
        <div>
          <p className="text-sm font-medium text-muted-foreground">{label}</p>
          <p className="mt-1 text-2xl font-semibold text-foreground">{value}</p>
        </div>
      </CardContent>
    </Card>
  );
}

function Row({ label, value, icon }: { label: string; value: string; icon?: ReactNode }) {
  return (
    <div className="flex items-center justify-between gap-3 rounded-xl bg-card/70 px-3 py-2">
      <span className="text-xs font-medium uppercase tracking-wide text-muted-foreground">{label}</span>
      <span className="flex items-center gap-1 text-right font-medium text-foreground">
        {icon}
        <span className="truncate">{value}</span>
      </span>
    </div>
  );
}

function EmptyMapState() {
  return (
    <div className="rounded-2xl border border-dashed border-border bg-muted px-4 py-10 text-center text-sm text-muted-foreground">
      Sin fichas para mostrar en esta manzana con los filtros actuales.
    </div>
  );
}