"use client";

import { useQuery } from "convex/react";
import type { FunctionReturnType } from "convex/server";
import {
  ArrowRight,
  Building2,
  CheckCircle2,
  Clock3,
  FileSearch,
  MapPin,
  ShieldAlert,
  type LucideIcon,
} from "lucide-react";
import Link from "next/link";

import { api } from "@/convex/_generated/api";
import {
  groupLeadFunnelCards,
  type LeadFunnelCard,
  type LeadFunnelStageId,
} from "@/lib/dashboard-model";
import { cn } from "@/lib/utils";

type LeadFunnelQueryResult = FunctionReturnType<typeof api.leads.listFunnel>;

const stageActionHref: Record<LeadFunnelStageId, string> = {
  missing_contact: "/dashboard/leads",
  audit_ready: "/dashboard/audits",
  review_open: "/dashboard/outreach",
  contacted: "/dashboard/outreach",
  follow_up: "/dashboard/outreach",
  deferred: "/dashboard/leads",
};

const stageVisuals: Record<
  LeadFunnelStageId,
  { surface: string; label: string; icon: LucideIcon }
> = {
  missing_contact: {
    surface: "review-surface",
    label: "Kontakt klären",
    icon: ShieldAlert,
  },
  audit_ready: {
    surface: "evidence-surface",
    label: "Evidence sammeln",
    icon: FileSearch,
  },
  review_open: {
    surface: "review-surface",
    label: "Freigabe prüfen",
    icon: Clock3,
  },
  contacted: {
    surface: "safe-surface",
    label: "Kontakt läuft",
    icon: CheckCircle2,
  },
  follow_up: {
    surface: "safe-surface",
    label: "Follow-up",
    icon: Clock3,
  },
  deferred: {
    surface: "bg-[var(--danger-soft)] text-destructive",
    label: "Zurückgestellt",
    icon: ShieldAlert,
  },
};

export function LeadFunnelBoard() {
  const leads: LeadFunnelQueryResult | undefined = useQuery(
    api.leads.listFunnel,
    { limit: 100 },
  );

  if (leads === undefined) {
    return <LeadFunnelSkeleton />;
  }

  const groups = groupLeadFunnelCards(leads);
  const totalCards = groups.reduce((total, group) => total + group.cards.length, 0);

  if (totalCards === 0) {
    return (
      <section
        className="rounded-lg border border-border/80 bg-card p-6 text-card-foreground"
        aria-labelledby="lead-funnel-heading"
      >
        <p className="text-sm font-semibold text-muted-foreground">
          Lead-Funnel
        </p>
        <h2
          className="mt-2 font-heading text-xl font-semibold tracking-normal"
          id="lead-funnel-heading"
        >
          Noch keine Leads im Arbeitsfluss
        </h2>
        <p className="mt-3 max-w-2xl text-sm leading-6 text-muted-foreground">
          Sobald Kampagnen Leads erzeugen oder importieren, erscheinen sie hier
          nach Kontaktlage, Audit-Stand und Review-Bedarf sortiert.
        </p>
      </section>
    );
  }

  return (
    <section className="agency-panel p-4" aria-labelledby="lead-funnel-heading">
      <div className="flex flex-col gap-2 sm:flex-row sm:items-end sm:justify-between">
        <div>
          <p className="agency-kicker">Lead Workflow</p>
          <h2
            className="mt-1 font-heading text-xl font-semibold tracking-normal"
            id="lead-funnel-heading"
          >
            Evidence Pipeline
          </h2>
          <p className="mt-1 text-sm leading-6 text-muted-foreground">
            {totalCards} Leads nach nächster Entscheidung, Beleglage und
            Outreach-Sicherheit.
          </p>
        </div>
        <p className="rounded-md bg-[var(--surface-review)] px-2.5 py-1 text-sm font-bold text-secondary-foreground">
          Human approval required
        </p>
      </div>

      <div className="mt-4 grid gap-3 lg:grid-cols-2 2xl:grid-cols-3">
        {groups.map((group) => (
          <LeadFunnelStageView group={group} key={group.stage.id} />
        ))}
      </div>
    </section>
  );
}

function LeadFunnelStageView({
  group,
}: {
  group: ReturnType<typeof groupLeadFunnelCards>[number];
}) {
  const visual = stageVisuals[group.stage.id];
  const Icon = visual.icon;

  return (
    <section
      className="rounded-md border border-border/80 bg-background/55"
      aria-labelledby={`${group.stage.id}-heading`}
    >
      <div className="flex items-start justify-between gap-3 border-b border-border/75 p-3">
        <div className="flex min-w-0 gap-3">
          <span
            className={`flex size-10 shrink-0 items-center justify-center rounded-md ${visual.surface}`}
          >
            <Icon className="size-4" />
          </span>
          <div className="min-w-0">
            <p className="text-xs font-bold uppercase text-muted-foreground">
              {visual.label}
            </p>
            <h3
              className="mt-1 text-sm font-semibold"
              id={`${group.stage.id}-heading`}
            >
              {group.stage.title}
            </h3>
            <p className="mt-1 text-xs leading-5 text-muted-foreground">
              {group.stage.description}
            </p>
          </div>
        </div>
        <span className="rounded-md bg-card px-2 py-1 text-sm font-bold">
          {group.cards.length}
        </span>
      </div>

      <div className="grid gap-2 p-2">
        {group.cards.length > 0 ? (
          group.cards.map((card) => (
            <LeadFunnelCardView card={card} key={card.id} />
          ))
        ) : (
          <p className="rounded-md border border-dashed border-border/80 bg-card/50 p-3 text-xs leading-5 text-muted-foreground">
            Keine Leads in diesem Entscheidungsschritt.
          </p>
        )}
      </div>
    </section>
  );
}

function LeadFunnelCardView({ card }: { card: LeadFunnelCard }) {
  return (
    <article
      className="rounded-lg border border-border/80 bg-background/65 p-3"
      aria-labelledby={`${card.id}-company`}
    >
      <div className="flex items-start justify-between gap-2">
        <div className="min-w-0">
          <h4
            className="truncate text-sm font-semibold"
            id={`${card.id}-company`}
          >
            {card.company}
          </h4>
          <p className="mt-1 inline-flex max-w-full items-center gap-1 truncate text-xs text-muted-foreground">
            <Building2 className="size-3 shrink-0" />
            <span className="truncate">{card.niche}</span>
          </p>
        </div>
        <span
          className={cn(
            "shrink-0 rounded-md px-2 py-1 text-xs font-semibold",
            card.priorityLabel === "Hoch"
              ? "bg-primary text-primary-foreground"
              : "bg-muted text-muted-foreground",
          )}
        >
          {card.priorityLabel}
        </span>
      </div>

      <p className="mt-3 inline-flex max-w-full items-center gap-1 truncate text-xs text-muted-foreground">
        <MapPin className="size-3 shrink-0" />
        <span className="truncate">{card.location}</span>
      </p>

      <div className="mt-3 flex flex-wrap gap-1.5">
        <span className="rounded-md bg-secondary px-2 py-1 text-xs font-semibold text-secondary-foreground">
          {card.contactStatusLabel}
        </span>
        <span className="rounded-md bg-muted px-2 py-1 text-xs font-medium text-muted-foreground">
          {card.contactDetail}
        </span>
      </div>

      <Link
        className="mt-3 inline-flex min-h-8 items-center gap-1 rounded-md text-sm font-semibold text-primary outline-none hover:underline focus-visible:ring-3 focus-visible:ring-ring/35"
        href={stageActionHref[card.stageId]}
        prefetch={false}
      >
        {card.nextAction}
        <ArrowRight className="size-4" />
      </Link>
    </article>
  );
}

function LeadFunnelSkeleton() {
  return (
    <section className="grid gap-3" aria-label="Lead-Funnel wird geladen">
      <div>
        <div className="h-6 w-40 rounded-md bg-muted" />
        <div className="mt-2 h-4 w-80 max-w-full rounded-md bg-muted" />
      </div>
      <div className="grid gap-3 md:grid-cols-2 xl:grid-cols-3 2xl:grid-cols-6">
        {Array.from({ length: 6 }, (_, index) => (
          <div
            className="min-h-[24rem] rounded-lg border border-border/80 bg-card p-3"
            key={index}
          >
            <div className="h-5 w-28 rounded-md bg-muted" />
            <div className="mt-4 grid gap-2">
              <div className="h-28 rounded-lg bg-muted" />
              <div className="h-24 rounded-lg bg-muted" />
            </div>
          </div>
        ))}
      </div>
    </section>
  );
}