"use client";

import { useMemo, useState } from "react";
import Image from "next/image";
import AgencyForm from "./AgencyForm";
import { toggleAgencyStatus } from "../actions";

type License = { id: string; name: string; maxTravelers: number };
type AgencyCard = {
  id: string;
  name: string;
  logoUrl: string | null;
  taxId: string | null;
  address: string | null;
  phone: string | null;
  whatsapp: string | null;
  email: string | null;
  ownerName: string;
  ownerEmail: string | null;
  ownerPhone: string | null;
  licenseId: string | null;
  billingCutoffDay: number | null;
  invoiceCreationDay: number | null;
  loginPassword: string | null;
  loginEmail: string | null;
  status: string;
  license: { name: string; maxTravelers: number } | null;
  _count: { travelers: number; users: number };
};

export default function AgenciesList({
  agencies,
  licenses,
}: {
  agencies: AgencyCard[];
  licenses: License[];
}) {
  const [query, setQuery] = useState("");

  const filtered = useMemo(() => {
    const q = query.trim().toLowerCase();
    if (!q) return agencies;
    return agencies.filter((a) => a.name.toLowerCase().includes(q));
  }, [agencies, query]);

  return (
    <div className="space-y-4">
      <div className="relative max-w-md">
        <input
          type="search"
          value={query}
          onChange={(e) => setQuery(e.target.value)}
          placeholder="Buscar agencia por nombre…"
          className="input pl-9"
        />
        <span className="pointer-events-none absolute left-3 top-1/2 -translate-y-1/2 text-slate-400">
          🔍
        </span>
        {query ? (
          <button
            type="button"
            onClick={() => setQuery("")}
            className="absolute right-2 top-1/2 -translate-y-1/2 text-slate-400 hover:text-slate-600"
            aria-label="Limpiar búsqueda"
          >
            ✕
          </button>
        ) : null}
      </div>

      {filtered.length === 0 ? (
        <div className="card p-10 text-center text-slate-500">
          {agencies.length === 0
            ? "No hay agencias todavía. Crea la primera con el botón “Nueva agencia”."
            : "No se encontraron agencias con ese nombre."}
        </div>
      ) : (
        <div className="grid grid-cols-1 gap-4 lg:grid-cols-2">
          {filtered.map((a) => {
            const overLimit = a.license && a._count.travelers > a.license.maxTravelers;
            const pct = a.license
              ? Math.min(100, Math.round((a._count.travelers / a.license.maxTravelers) * 100))
              : 0;
            return (
              <div key={a.id} className="card p-5">
                <div className="flex items-start gap-4">
                  {a.logoUrl ? (
                    <Image
                      src={a.logoUrl}
                      alt={a.name}
                      width={56}
                      height={56}
                      className="h-14 w-14 rounded-xl object-cover ring-1 ring-slate-200"
                      unoptimized
                    />
                  ) : (
                    <div className="flex h-14 w-14 items-center justify-center rounded-xl bg-slate-100 text-2xl">
                      🏢
                    </div>
                  )}
                  <div className="min-w-0 flex-1">
                    <div className="flex items-center justify-between gap-2">
                      <h3 className="truncate font-semibold">{a.name}</h3>
                      <span
                        className={`badge ${
                          a.status === "ACTIVE"
                            ? "bg-emerald-100 text-emerald-700"
                            : "bg-red-100 text-red-700"
                        }`}
                      >
                        {a.status === "ACTIVE" ? "Activa" : "Suspendida"}
                      </span>
                    </div>
                    <p className="text-sm text-slate-500">{a.ownerName}</p>
                    {a.taxId ? <p className="text-xs text-slate-400">{a.taxId}</p> : null}
                  </div>
                </div>

                <div className="mt-4">
                  <div className="mb-1 flex items-center justify-between text-sm">
                    <span className="text-slate-600">
                      Licencia: <b>{a.license?.name ?? "Sin licencia"}</b>
                    </span>
                    <span className={overLimit ? "text-red-600" : "text-slate-500"}>
                      {a._count.travelers}
                      {a.license ? ` / ${a.license.maxTravelers}` : ""} viajeros
                    </span>
                  </div>
                  {a.license ? (
                    <div className="h-2 w-full overflow-hidden rounded-full bg-slate-100">
                      <div
                        className={`h-full ${overLimit ? "bg-red-500" : "bg-blue-500"}`}
                        style={{ width: `${pct}%` }}
                      />
                    </div>
                  ) : null}
                </div>

                <div className="mt-4 flex items-center justify-end gap-2 border-t border-slate-100 pt-3">
                  <AgencyForm licenses={licenses} agency={a} trigger="edit" />
                  <form action={toggleAgencyStatus}>
                    <input type="hidden" name="id" value={a.id} />
                    <button
                      className={`btn text-sm ${
                        a.status === "ACTIVE"
                          ? "text-red-600 hover:bg-red-50"
                          : "text-emerald-600 hover:bg-emerald-50"
                      }`}
                    >
                      {a.status === "ACTIVE" ? "Suspender" : "Reactivar"}
                    </button>
                  </form>
                </div>
              </div>
            );
          })}
        </div>
      )}
    </div>
  );
}