"use client";

import { useMemo, useState, useTransition } from "react";
import { useRouter } from "next/navigation";
import { Check, Trash2 } from "lucide-react";
import {
  assignOfferToProject,
  removeProjectOffer,
  updateProjectOfferTotal,
} from "@/app/admin/projects/project-actions";
import type { ProjectOfferWithMicro } from "@/lib/admin-queries";

type AvailableMicro = {
  id: string;
  internal_name: string;
  public_name: string;
  duration_months: number;
  tier_letter: string | null;
  public_price: string | null;
  macro_id: string;
  macro_internal_name: string;
  macro_category: string | null;
  macro_offer_type: string;
};

interface OffersTabProps {
  projectId: string;
  projectOffers: ProjectOfferWithMicro[];
  availableMicros: AvailableMicro[];
}

function typeLabel(offerType: string): string {
  return offerType === "retainer" ? "Ricorrente" : "Una tantum";
}

function formatEuro(raw: string | null): string | null {
  if (raw == null || raw === "") return null;
  const n = parseFloat(raw);
  if (!Number.isFinite(n)) return null;
  return `€${n.toLocaleString("it-IT", { minimumFractionDigits: 2, maximumFractionDigits: 2 })}`;
}

// public_name is only meaningful when it differs from the tier letter (it
// defaults to the letter when unset).
function meaningfulPublicName(m: { public_name: string; tier_letter: string | null }): string | null {
  const p = m.public_name?.trim();
  if (!p) return null;
  if (m.tier_letter && p.toUpperCase() === m.tier_letter.toUpperCase()) return null;
  return p;
}

function TypeBadge({ offerType }: { offerType: string }) {
  const retainer = offerType === "retainer";
  return (
    <span
      className={`inline-block rounded text-[11px] font-medium px-1.5 py-0.5 ${
        retainer ? "bg-blue-50 text-blue-700" : "bg-[#f4f4f5] text-[#52525b]"
      }`}
    >
      {typeLabel(offerType)}
    </span>
  );
}

export function OffersTab({ projectId, projectOffers, availableMicros }: OffersTabProps) {
  const [isPending, startTransition] = useTransition();
  const router = useRouter();

  const [macroId, setMacroId] = useState<string>("");
  const [tierId, setTierId] = useState<string>("");
  const [acceptedTotal, setAcceptedTotal] = useState<string>("");
  const [importPhases, setImportPhases] = useState(true);

  // Group tiers by offer (macro), preserving query order.
  const offers = useMemo(() => {
    const map = new Map<
      string,
      { macro_id: string; name: string; category: string | null; offer_type: string; tiers: AvailableMicro[] }
    >();
    for (const m of availableMicros) {
      let entry = map.get(m.macro_id);
      if (!entry) {
        entry = {
          macro_id: m.macro_id,
          name: m.macro_internal_name,
          category: m.macro_category,
          offer_type: m.macro_offer_type,
          tiers: [],
        };
        map.set(m.macro_id, entry);
      }
      entry.tiers.push(m);
    }
    return Array.from(map.values());
  }, [availableMicros]);

  const selectedOffer = offers.find((o) => o.macro_id === macroId) ?? null;

  function selectMacro(id: string) {
    setMacroId(id);
    setTierId("");
  }

  function handleAssign() {
    if (!tierId) return;
    const fd = new FormData();
    fd.set("project_id", projectId);
    fd.set("micro_id", tierId);
    if (acceptedTotal.trim()) fd.set("accepted_total", acceptedTotal.trim());
    if (importPhases) fd.set("import_phases", "on");
    startTransition(async () => {
      await assignOfferToProject(fd);
      setMacroId("");
      setTierId("");
      setAcceptedTotal("");
      setImportPhases(true);
      router.refresh();
    });
  }

  function handleRemove(offerId: string) {
    if (!window.confirm("Rimuovere questa offerta dal progetto?")) return;
    startTransition(async () => {
      await removeProjectOffer(offerId, projectId);
      router.refresh();
    });
  }

  function handleTotalUpdate(offerId: string, value: string) {
    startTransition(async () => {
      await updateProjectOfferTotal(offerId, projectId, value);
      router.refresh();
    });
  }

  return (
    <div className="space-y-8 max-w-2xl">
      {/* Active assignments */}
      <div>
        <h3 className="text-sm font-semibold text-[#1a1a1a] mb-3">Offerte Attive</h3>
        {projectOffers.length === 0 ? (
          <p className="text-sm text-[#71717a]">Nessuna offerta assegnata a questo progetto.</p>
        ) : (
          <div className="space-y-3">
            {projectOffers.map((offer) => {
              const pub = meaningfulPublicName({
                public_name: offer.micro_public_name,
                tier_letter: offer.tier_letter,
              });
              return (
                <div
                  key={offer.id}
                  className="bg-white rounded-xl border border-[#e5e7eb] p-4 flex items-start justify-between gap-4"
                >
                  <div className="flex-1 min-w-0">
                    <div className="flex flex-wrap items-center gap-2">
                      <p className="text-sm font-medium text-[#1a1a1a]">{offer.macro_internal_name}</p>
                      {offer.tier_letter && (
                        <span className="inline-block rounded bg-[#1A463C]/10 text-[#1A463C] text-[11px] font-semibold px-1.5 py-0.5">
                          Tier {offer.tier_letter}
                        </span>
                      )}
                      <TypeBadge offerType={offer.macro_offer_type} />
                    </div>
                    {pub && <p className="text-xs text-[#71717a] mt-1">Pubblico: {offer.micro_public_name}</p>}
                    <div className="flex items-center gap-2 mt-2">
                      <label className="text-xs text-[#71717a]">Totale accettato €</label>
                      <input
                        type="number"
                        step="0.01"
                        min="0"
                        defaultValue={offer.accepted_total ?? ""}
                        placeholder="0.00"
                        onBlur={(e) => {
                          const val = e.currentTarget.value.trim();
                          if (val !== (offer.accepted_total ?? "")) handleTotalUpdate(offer.id, val);
                        }}
                        className="w-28 border border-[#e5e7eb] rounded-md px-2 py-1 text-xs tabular-nums focus:outline-none focus:ring-2 focus:ring-[#1A463C]/15"
                      />
                    </div>
                  </div>
                  <button
                    type="button"
                    onClick={() => handleRemove(offer.id)}
                    disabled={isPending}
                    aria-label="Rimuovi offerta"
                    className="shrink-0 rounded-md p-1.5 text-[#a1a1aa] hover:bg-red-50 hover:text-red-500 transition-colors disabled:opacity-50"
                  >
                    <Trash2 className="h-4 w-4" />
                  </button>
                </div>
              );
            })}
          </div>
        )}
      </div>

      {/* Assignment — step 1: offer, step 2: tier */}
      <div>
        <h3 className="text-sm font-semibold text-[#1a1a1a] mb-3">Assegna Offerta</h3>

        {offers.length === 0 ? (
          <p className="text-sm text-[#71717a]">
            Nessuna offerta disponibile. Crea prima un&apos;offerta in{" "}
            <a href="/admin/offers" className="text-[#1A463C] underline">Offerte</a>.
          </p>
        ) : (
          <div className="bg-white rounded-xl border border-[#e5e7eb] p-4 space-y-4">
            {/* Step 1 — choose offer */}
            <div>
              <label className="text-xs text-[#71717a] block mb-1">Offerta</label>
              <select
                value={macroId}
                onChange={(e) => selectMacro(e.target.value)}
                className="w-full border border-[#e5e7eb] rounded-md px-3 py-2 text-sm bg-white focus:outline-none focus:ring-2 focus:ring-[#1A463C]/15"
              >
                <option value="">Seleziona offerta...</option>
                {offers.map((o) => (
                  <option key={o.macro_id} value={o.macro_id}>
                    {o.name}
                    {o.category ? ` · ${o.category}` : ""} · {typeLabel(o.offer_type)}
                  </option>
                ))}
              </select>
            </div>

            {/* Step 2 — choose tier */}
            {selectedOffer && (
              <div>
                <label className="text-xs text-[#71717a] block mb-1.5">Tier</label>
                <div className="grid grid-cols-1 sm:grid-cols-3 gap-2">
                  {selectedOffer.tiers.map((t) => {
                    const active = tierId === t.id;
                    const price = formatEuro(t.public_price);
                    const pub = meaningfulPublicName(t);
                    return (
                      <button
                        key={t.id}
                        type="button"
                        onClick={() => setTierId(t.id)}
                        className={`text-left rounded-lg border p-3 transition-colors ${
                          active
                            ? "border-[#1A463C] bg-[#1A463C]/5 ring-1 ring-[#1A463C]/20"
                            : "border-[#e5e7eb] hover:border-[#1A463C]/30 bg-white"
                        }`}
                      >
                        <div className="flex items-center justify-between">
                          <span className="text-sm font-semibold text-[#1a1a1a]">
                            {t.tier_letter ? `Tier ${t.tier_letter}` : t.public_name || "Tier"}
                          </span>
                          {active && <Check className="h-4 w-4 text-[#1A463C]" />}
                        </div>
                        {pub && <p className="text-xs text-[#71717a] mt-0.5 truncate">{pub}</p>}
                        <p className="text-sm text-[#1a1a1a] mt-1 tabular-nums">{price ?? "—"}</p>
                      </button>
                    );
                  })}
                </div>
              </div>
            )}

            {/* Options + submit */}
            {selectedOffer && (
              <div className="space-y-3 pt-1">
                <div>
                  <label className="text-xs text-[#71717a] block mb-1">Totale accettato € (opzionale)</label>
                  <input
                    value={acceptedTotal}
                    onChange={(e) => setAcceptedTotal(e.target.value)}
                    type="number"
                    step="0.01"
                    min="0"
                    placeholder="0.00"
                    className="w-full border border-[#e5e7eb] rounded-md px-3 py-2 text-sm tabular-nums focus:outline-none focus:ring-2 focus:ring-[#1A463C]/15"
                  />
                </div>

                <label className="flex items-start gap-2 text-xs text-[#1a1a1a] cursor-pointer">
                  <input
                    type="checkbox"
                    checked={importPhases}
                    onChange={(e) => setImportPhases(e.target.checked)}
                    className="mt-0.5 h-3.5 w-3.5 accent-[#1A463C]"
                  />
                  <span>
                    Importa fasi e task dall&apos;offerta
                    <span className="block text-[#71717a]">
                      Crea le fasi raggruppando i servizi per &laquo;Fase&raquo;; ogni servizio diventa un task.
                    </span>
                  </span>
                </label>

                <button
                  type="button"
                  onClick={handleAssign}
                  disabled={isPending || !tierId}
                  className="bg-[#1A463C] text-white text-sm font-medium px-4 py-2 rounded-md hover:bg-[#1A463C]/90 transition-colors disabled:opacity-40"
                >
                  {isPending ? "Assegnazione..." : "Assegna Offerta"}
                </button>
              </div>
            )}
          </div>
        )}
      </div>
    </div>
  );
}
