import * as React from "react";
import { cn } from "@/lib/utils";
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";

export interface ChartTableView {
  columns: string[];
  rows: Array<Array<string | number>>;
}

/**
 * Card wrapper for a chart: title, description, optional right slot, an "empty" overlay when
 * there is no data, and a collapsible table twin so every value is reachable without hover.
 * Server-compatible (no client hooks) so pages can pass client charts as children.
 */
export function ChartFrame({
  title,
  description,
  right,
  empty,
  emptyMessage = "No data for this period yet.",
  table,
  children,
  className,
  contentClassName,
}: {
  title: React.ReactNode;
  description?: React.ReactNode;
  right?: React.ReactNode;
  empty?: boolean;
  emptyMessage?: React.ReactNode;
  table?: ChartTableView;
  children: React.ReactNode;
  className?: string;
  contentClassName?: string;
}) {
  return (
    <Card className={cn("flex flex-col", className)}>
      <CardHeader className="flex-row items-start justify-between gap-3 pb-2">
        <div className="min-w-0">
          <CardTitle className="text-[14px]">{title}</CardTitle>
          {description ? <CardDescription className="mt-0.5 text-[12.5px]">{description}</CardDescription> : null}
        </div>
        {right ? <div className="shrink-0">{right}</div> : null}
      </CardHeader>
      <CardContent className={cn("flex-1 pt-1", contentClassName)}>
        <div className="relative">
          <div className={cn(empty && "pointer-events-none opacity-30 grayscale")} aria-hidden={empty || undefined}>
            {children}
          </div>
          {empty ? (
            <div className="absolute inset-0 flex items-center justify-center">
              <p className="rounded-md border border-border bg-bg-elevated px-3 py-1.5 text-[12.5px] text-fg-muted shadow-xs">{emptyMessage}</p>
            </div>
          ) : null}
        </div>
        {table && !empty && table.rows.length > 0 ? (
          <details className="group mt-3">
            <summary className="cursor-pointer select-none text-[12px] text-fg-subtle underline-offset-4 hover:text-fg hover:underline">
              <span className="group-open:hidden">View as table</span>
              <span className="hidden group-open:inline">Hide table</span>
            </summary>
            <div className="mt-2 max-h-56 overflow-auto rounded-md border border-border scrollbar-thin">
              <table className="w-full text-[12px]">
                <thead className="sticky top-0 bg-bg-subtle">
                  <tr>
                    {table.columns.map((c, i) => (
                      <th key={c} className={cn("px-2.5 py-1.5 text-left font-medium text-fg-subtle", i > 0 && "text-right")}>
                        {c}
                      </th>
                    ))}
                  </tr>
                </thead>
                <tbody>
                  {table.rows.map((r, i) => (
                    <tr key={i} className="border-t border-border">
                      {r.map((v, j) => (
                        <td key={j} className={cn("px-2.5 py-1 tabular", j > 0 ? "text-right font-mono" : "text-fg-muted")}>
                          {v}
                        </td>
                      ))}
                    </tr>
                  ))}
                </tbody>
              </table>
            </div>
          </details>
        ) : null}
      </CardContent>
    </Card>
  );
}

/** Text legend rendered in HTML (outside the SVG) so it is readable and selectable. */
export function ChartLegend({ items, className }: { items: Array<{ label: string; color: string; value?: React.ReactNode; dashed?: boolean }>; className?: string }) {
  return (
    <ul className={cn("flex flex-wrap items-center gap-x-4 gap-y-1 text-[12px] text-fg-muted", className)}>
      {items.map((it) => (
        <li key={it.label} className="flex items-center gap-1.5">
          <span aria-hidden className={cn("inline-block h-2 w-3 rounded-[2px]", it.dashed && "border-t-2 border-dashed bg-transparent h-0")} style={it.dashed ? { borderColor: it.color } : { backgroundColor: it.color }} />
          <span>{it.label}</span>
          {it.value !== undefined ? <span className="font-mono tabular text-fg">{it.value}</span> : null}
        </li>
      ))}
    </ul>
  );
}