"use client";
import * as React from "react";
import { EyeOff, FileJson, FileText, History, MoreHorizontal, Play, RotateCcw, Share2, Trash2, Trophy } from "lucide-react";
import { useApp } from "@/components/app/store";
import { ProviderIcon } from "@/components/brand/provider-icon";
import { Button } from "@/components/ui/button";
import { Skeleton } from "@/components/ui/misc";
import { Tooltip } from "@/components/ui/tooltip";
import { ActionSheet } from "@/components/ui/sheet";
import { ConfirmDialog } from "@/components/common/confirm-dialog";
import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuSeparator, DropdownMenuTrigger } from "@/components/ui/dropdown-menu";
import { useIsMobile, useLongPress } from "@/lib/client/hooks";
import { cn, formatRelative, formatUsd, truncate } from "@/lib/utils";
import { sessionBlind, sessionCost, sessionWinner, type ArenaSessionDto } from "./types";

interface Props {
  sessions: ArenaSessionDto[] | undefined;
  loading: boolean;
  activeId: string | null;
  disabled?: boolean;
  onOpen: (s: ArenaSessionDto) => void;
  onRerun: (s: ArenaSessionDto) => void;
  onDelete: (s: ArenaSessionDto) => Promise<void>;
  onExport: (s: ArenaSessionDto, format: "markdown" | "json") => void;
  onShare: (s: ArenaSessionDto) => void;
  className?: string;
}

const PAGE = 8;

/** Past comparisons: stacked rows on phones (tap = open, long-press/… = actions), table from `md` up. */
export function ArenaHistory({ sessions, loading, activeId, disabled, onOpen, onRerun, onDelete, onExport, onShare, className }: Props) {
  const { modelsByKey, preferences } = useApp();
  const isMobile = useIsMobile();
  const [showAll, setShowAll] = React.useState(false);
  const [menuFor, setMenuFor] = React.useState<ArenaSessionDto | null>(null);
  const [deleting, setDeleting] = React.useState<ArenaSessionDto | null>(null);
  const list = showAll ? sessions ?? [] : (sessions ?? []).slice(0, PAGE);

  const nameOf = (k: string) => modelsByKey.get(k)?.displayName ?? k.split("/").slice(1).join("/");
  const providerOf = (k: string) => modelsByKey.get(k)?.provider ?? k.split("/")[0];

  const rowData = (s: ArenaSessionDto) => {
    const winner = sessionWinner(s);
    return { winner, winnerName: winner ? nameOf(winner.modelKey) : null, winnerProvider: winner ? providerOf(winner.modelKey) : null, cost: sessionCost(s), blind: sessionBlind(s), active: s.id === activeId };
  };

  const actions = (s: ArenaSessionDto) => [
    { key: "open", label: "Open (read-only)", icon: <Play />, onSelect: () => onOpen(s), disabled },
    { key: "rerun", label: "Run again", icon: <RotateCcw />, onSelect: () => onRerun(s), disabled },
    "separator" as const,
    { key: "md", label: "Export Markdown", icon: <FileText />, onSelect: () => onExport(s, "markdown") },
    { key: "json", label: "Export JSON", icon: <FileJson />, onSelect: () => onExport(s, "json") },
    { key: "share", label: "Share…", icon: <Share2 />, onSelect: () => onShare(s) },
    "separator" as const,
    { key: "delete", label: "Delete", icon: <Trash2 />, destructive: true, onSelect: () => setDeleting(s) },
  ];

  return (
    <section className={cn("min-w-0", className)} aria-label="Past sessions">
      <div className="mb-2 flex items-center gap-2">
        <History className="size-4 text-fg-subtle" />
        <h2 className="text-[13px] font-semibold tracking-tight">History</h2>
        {sessions?.length ? <span className="text-[12px] tabular-nums text-fg-subtle">{sessions.length}</span> : null}
      </div>

      {loading && !sessions ? (
        <div className="space-y-2">
          {[0, 1, 2].map((i) => (
            <Skeleton key={i} className="h-[72px]" />
          ))}
        </div>
      ) : !sessions?.length ? (
        <p className="rounded-lg border border-dashed border-border px-3 py-4 text-[12.5px] text-fg-muted">Your past comparisons will show up here — prompt, models, winner, cost.</p>
      ) : isMobile ? (
        <ul className="overflow-hidden rounded-xl bg-bg-subtle">
          {list.map((s, i) => (
            <HistoryRow key={s.id} s={s} data={rowData(s)} first={i === 0} disabled={disabled} nameOf={nameOf} providerOf={providerOf} showCosts={preferences.showCosts} onOpen={() => onOpen(s)} onMore={() => setMenuFor(s)} />
          ))}
        </ul>
      ) : (
        <div className="overflow-hidden rounded-xl border border-border bg-bg-elevated">
          <table className="w-full text-[12.5px]">
            <thead>
              <tr className="text-left text-[10.5px] uppercase tracking-wide text-fg-subtle">
                <th className="px-3 py-2 font-medium">Prompt</th>
                <th className="px-3 py-2 font-medium">Models</th>
                <th className="px-3 py-2 font-medium">Winner</th>
                {preferences.showCosts ? <th className="px-3 py-2 text-right font-medium">Cost</th> : null}
                <th className="px-3 py-2 font-medium">Date</th>
                <th className="px-2 py-2" aria-label="Actions" />
              </tr>
            </thead>
            <tbody>
              {list.map((s) => {
                const d = rowData(s);
                return (
                  <tr key={s.id} className={cn("group border-t border-hairline transition-colors hover:bg-bg-subtle/60", d.active && "bg-accent-soft/40")}>
                    <td className="max-w-[420px] px-3 py-2">
                      <button type="button" onClick={() => onOpen(s)} disabled={disabled} className="block w-full text-left disabled:opacity-60" aria-label={`Open session: ${truncate(s.prompt, 60)}`}>
                        <span className="line-clamp-2 leading-5">{s.prompt}</span>
                      </button>
                      {d.blind ? (
                        <span className="mt-0.5 inline-flex items-center gap-1 text-[10.5px] text-fg-subtle">
                          <EyeOff className="size-3" /> blind
                        </span>
                      ) : null}
                    </td>
                    <td className="px-3 py-2">
                      <span className="flex items-center -space-x-1">
                        {s.modelKeys.map((k) => (
                          <span key={k} className="flex size-6 items-center justify-center rounded-full border border-border bg-bg" title={nameOf(k)}>
                            <ProviderIcon provider={providerOf(k)} size={12} />
                          </span>
                        ))}
                      </span>
                    </td>
                    <td className="px-3 py-2">
                      {d.winner ? (
                        <span className="inline-flex max-w-[200px] items-center gap-1.5 rounded-md bg-accent-soft px-2 py-0.5 text-[11.5px] font-medium text-accent">
                          <Trophy className="size-3 shrink-0" />
                          <ProviderIcon provider={d.winnerProvider} size={11} />
                          <span className="truncate">{d.winnerName}</span>
                        </span>
                      ) : (
                        <span className="text-fg-subtle">—</span>
                      )}
                    </td>
                    {preferences.showCosts ? <td className="px-3 py-2 text-right tabular-nums text-fg-muted">{d.cost > 0 ? `≈ ${formatUsd(d.cost, { precise: d.cost < 0.01 })}` : "—"}</td> : null}
                    <td className="whitespace-nowrap px-3 py-2 text-fg-muted">
                      <time dateTime={s.createdAt}>{formatRelative(s.createdAt)}</time>
                    </td>
                    <td className="px-2 py-2">
                      <div className="flex items-center justify-end gap-0.5">
                        <Tooltip content="Run again">
                          <Button variant="ghost" size="icon-sm" className="hover-reveal" disabled={disabled} onClick={() => onRerun(s)} aria-label="Run again">
                            <RotateCcw />
                          </Button>
                        </Tooltip>
                        <DropdownMenu>
                          <DropdownMenuTrigger asChild>
                            <Button variant="ghost" size="icon-sm" aria-label="More actions">
                              <MoreHorizontal />
                            </Button>
                          </DropdownMenuTrigger>
                          <DropdownMenuContent align="end">
                            {actions(s).map((a, i) =>
                              a === "separator" ? (
                                <DropdownMenuSeparator key={`sep-${i}`} />
                              ) : (
                                <DropdownMenuItem key={a.key} disabled={a.disabled} destructive={"destructive" in a && a.destructive} onSelect={a.onSelect}>
                                  {a.icon}
                                  {a.label}
                                </DropdownMenuItem>
                              ),
                            )}
                          </DropdownMenuContent>
                        </DropdownMenu>
                      </div>
                    </td>
                  </tr>
                );
              })}
            </tbody>
          </table>
        </div>
      )}

      {(sessions?.length ?? 0) > PAGE ? (
        <Button variant="link" size="sm" className="mt-2 text-[12.5px]" onClick={() => setShowAll((v) => !v)}>
          {showAll ? "Show fewer" : `Show all ${sessions!.length}`}
        </Button>
      ) : null}

      <ActionSheet open={Boolean(menuFor)} onOpenChange={(o) => !o && setMenuFor(null)} title={menuFor ? truncate(menuFor.prompt, 80) : undefined} items={menuFor ? actions(menuFor) : []} />
      <ConfirmDialog
        open={Boolean(deleting)}
        onOpenChange={(o) => !o && setDeleting(null)}
        title="Delete this comparison?"
        description="The prompt, every response, your votes and any public link are removed. Usage records are kept for your cost history."
        confirmLabel="Delete"
        destructive
        onConfirm={async () => {
          if (deleting) await onDelete(deleting);
        }}
      />
    </section>
  );
}

interface RowData {
  winner: ReturnType<typeof sessionWinner>;
  winnerName: string | null;
  winnerProvider: string | null;
  cost: number;
  blind: boolean;
  active: boolean;
}

function HistoryRow({ s, data: d, first, disabled, nameOf, providerOf, showCosts, onOpen, onMore }: { s: ArenaSessionDto; data: RowData; first: boolean; disabled?: boolean; nameOf: (k: string) => string; providerOf: (k: string) => string; showCosts: boolean; onOpen: () => void; onMore: () => void }) {
  const press = useLongPress({ onLongPress: onMore, onClick: () => !disabled && onOpen() });
  return (
    <li className={cn("relative flex items-stretch", !first && "border-t border-hairline", d.active && "bg-accent-soft/40")}>
      <div {...press} className="tap flex min-h-[64px] min-w-0 flex-1 select-none flex-col justify-center gap-1 px-3 py-2.5 text-left active:bg-bg-muted" role="button" tabIndex={0} aria-label={`Open session: ${truncate(s.prompt, 60)}`} onKeyDown={(e) => e.key === "Enter" && onOpen()}>
        <p className="line-clamp-2 text-[13.5px] leading-5">{s.prompt}</p>
        <div className="flex min-w-0 items-center gap-2 text-[11.5px] text-fg-subtle">
          <span className="flex items-center -space-x-1">
            {s.modelKeys.map((k) => (
              <span key={k} className="flex size-5 items-center justify-center rounded-full border border-border bg-bg" title={nameOf(k)}>
                <ProviderIcon provider={providerOf(k)} size={11} />
              </span>
            ))}
          </span>
          {d.blind ? <EyeOff className="size-3" aria-label="Blind" /> : null}
          <time dateTime={s.createdAt}>{formatRelative(s.createdAt)}</time>
          {showCosts && d.cost > 0 ? <span className="tabular-nums">≈ {formatUsd(d.cost, { precise: d.cost < 0.01 })}</span> : null}
          {d.winner ? (
            <span className="ml-auto inline-flex min-w-0 items-center gap-1 rounded bg-accent-soft px-1.5 py-0.5 font-medium text-accent">
              <Trophy className="size-3 shrink-0" />
              <span className="truncate">{d.winnerName}</span>
            </span>
          ) : null}
        </div>
      </div>
      <button type="button" onClick={onMore} className="flex w-11 shrink-0 items-center justify-center text-fg-subtle active:bg-bg-muted" aria-label="More actions">
        <MoreHorizontal className="size-4" />
      </button>
    </li>
  );
}