"use client";

import { Palette } from "lucide-react";

import { Button } from "@/components/ui/button";
import {
  Popover,
  PopoverContent,
  PopoverDescription,
  PopoverHeader,
  PopoverTitle,
  PopoverTrigger,
} from "@/components/ui/popover";

import { CashflowStructureStatusIcon } from "./cashflow-structure-status-icon";
import { CASHFLOW_STRUCTURE_STATUSES, CASHFLOW_STRUCTURE_STATUS_DISPLAY } from "./schema";

const LEGEND_ROW_CLASS =
  "flex items-center gap-2.5 rounded-lg border border-border/40 bg-card/60 px-2.5 py-1.5";
const STATUS_LEGEND_ROW_CLASS =
  "flex min-w-0 items-center gap-2.5 rounded-lg border border-border/40 bg-card/60 px-2.5 py-1.5";
const LEGEND_SECTION_HEADING_CLASS =
  "text-[10px] font-semibold uppercase tracking-wide text-muted-foreground";

export type CashflowLegendEntry = {
  label: string;
  color: string;
  count: number;
};

type CashflowLegendPopoverProps = {
  legend: CashflowLegendEntry[];
};

export function CashflowLegendPopover({ legend }: CashflowLegendPopoverProps) {
  return (
    <Popover>
      <PopoverTrigger asChild>
        <Button type="button" variant="outline" size="sm" className="h-8 gap-1.5 text-xs">
          <Palette className="size-3.5" />
          Legend
        </Button>
      </PopoverTrigger>
      <PopoverContent align="end" className="w-[min(22rem,92vw)] gap-3 p-3">
        <PopoverHeader className="gap-1">
          <PopoverTitle className="text-sm">Calendar legend</PopoverTitle>
          <PopoverDescription className="text-xs">
            Asset class colors and structure status markers for filtered events.
          </PopoverDescription>
        </PopoverHeader>

        {legend.length > 0 ? (
          <section className="space-y-2">
            <p className={LEGEND_SECTION_HEADING_CLASS}>Asset classes</p>
            <ul className="space-y-1.5 text-xs">
              {legend.map((entry) => (
                <li key={entry.label} className={LEGEND_ROW_CLASS}>
                  <span
                    className="size-2.5 shrink-0 rounded-full"
                    style={{ backgroundColor: entry.color }}
                  />
                  <span
                    className="min-w-0 flex-1 truncate font-medium text-foreground/85"
                    title={entry.label}
                  >
                    {entry.label}
                  </span>
                  <span className="shrink-0 text-[11px] font-semibold tabular-nums text-foreground">
                    {entry.count}
                  </span>
                </li>
              ))}
            </ul>
          </section>
        ) : (
          <p className="text-muted-foreground text-xs">No events in the current view.</p>
        )}

        <section className="space-y-2 border-t border-border/60 pt-3">
          <p className={LEGEND_SECTION_HEADING_CLASS}>Early Redm / Delivery</p>
          <ul className="grid grid-cols-1 gap-1.5 text-xs sm:grid-cols-2">
            {CASHFLOW_STRUCTURE_STATUS_DISPLAY.map((entry) => {
              const status = CASHFLOW_STRUCTURE_STATUSES.find((row) => row.id === entry.statusId);
              if (!status) return null;

              return (
                <li
                  key={status.id}
                  className={STATUS_LEGEND_ROW_CLASS}
                  title={`${entry.label} (${status.shortKey})`}
                >
                  <CashflowStructureStatusIcon
                    earlyRedemption={status.earlyRedemption}
                    delivery={status.delivery}
                    status={status}
                    size="sm"
                    className="shrink-0"
                  />
                  <span className="min-w-0 flex-1 truncate font-medium text-foreground/85">
                    {entry.label}
                  </span>
                  <span className="shrink-0 text-right font-mono text-[11px] font-semibold tabular-nums text-foreground">
                    ({status.shortKey})
                  </span>
                </li>
              );
            })}
          </ul>
        </section>
      </PopoverContent>
    </Popover>
  );
}