"use client";
import * as React from "react";
import { ExternalLink, KeyRound, MoreHorizontal, Trash2, CheckCircle2, XCircle, CircleDashed, CircleOff, Activity, RefreshCw, Zap } from "lucide-react";
import { Button } from "@/components/ui/button";
import { Badge } from "@/components/ui/badge";
import { Tooltip } from "@/components/ui/tooltip";
import { ActionSheet } from "@/components/ui/sheet";
import { DropdownMenu, DropdownMenuTrigger, DropdownMenuContent, DropdownMenuItem, DropdownMenuSeparator } from "@/components/ui/dropdown-menu";
import { ProviderIcon } from "@/components/brand/provider-icon";
import { PROVIDERS } from "@/lib/client/providers";
import { useIsMobile } from "@/lib/client/hooks";
import { formatRelative, formatMs, formatNumber, cn } from "@/lib/utils";
import type { ProviderId, PublicConnection } from "@/lib/client/types";

export type ConnectionStatus = "connected" | "failed" | "unverified" | "missing";

export function statusOf(c: PublicConnection | undefined): ConnectionStatus {
  if (!c) return "missing";
  if (c.status === "valid") return "connected";
  if (c.status === "invalid" || c.status === "error") return "failed";
  return "unverified";
}

export const STATUS_UI: Record<ConnectionStatus, { label: string; variant: "success" | "danger" | "warning" | "default"; icon: React.ReactNode }> = {
  connected: { label: "Connected", variant: "success", icon: <CheckCircle2 /> },
  failed: { label: "Validation failed", variant: "danger", icon: <XCircle /> },
  unverified: { label: "Not validated yet", variant: "warning", icon: <CircleDashed /> },
  missing: { label: "Not connected", variant: "default", icon: <CircleOff /> },
};

export interface TestResult {
  ok: boolean;
  latencyMs: number;
  modelsAvailable: number | null;
  error?: string;
  at: number;
}

export function ProviderRow({ provider, connection, modelCount, testing, lastTest, onAddKey, onTest, onRemove }: { provider: ProviderId; connection?: PublicConnection; modelCount: number | null; testing: boolean; lastTest?: TestResult; onAddKey: () => void; onTest: () => void; onRemove: () => void }) {
  const meta = PROVIDERS[provider];
  const status = statusOf(connection);
  const ui = STATUS_UI[status];
  const isMobile = useIsMobile();
  const [more, setMore] = React.useState(false);
  const models = connection?.modelsAvailable ?? modelCount;
  const lastError = connection?.lastValidationError || connection?.lastErrorCode || null;

  const moreItems = [
    { key: "replace", label: "Replace key", icon: <KeyRound />, onSelect: onAddKey },
    { key: "test", label: "Test connection", icon: <Activity />, onSelect: onTest, disabled: testing },
    { key: "console", label: `Open ${meta.shortName} console`, icon: <ExternalLink />, onSelect: () => window.open(meta.consoleUrl, "_blank", "noopener,noreferrer") },
    "separator" as const,
    { key: "remove", label: "Remove key", icon: <Trash2 />, onSelect: onRemove, destructive: true },
  ];

  return (
    <li className={cn("panel p-4 sm:p-5", status === "failed" && "ring-1 ring-danger/30")}>
      <div className="flex items-start gap-3 sm:gap-4">
        <span className="flex size-10 shrink-0 items-center justify-center rounded-lg bg-bg-elevated shadow-xs">
          <ProviderIcon provider={provider} size={20} />
        </span>
        <div className="min-w-0 flex-1">
          <div className="flex flex-wrap items-center gap-x-2 gap-y-1">
            <h3 className="text-[15px] font-semibold leading-6">{meta.name}</h3>
            <Badge variant={ui.variant}>
              {ui.icon} {ui.label}
            </Badge>
          </div>
          <p className="mt-0.5 text-[13px] leading-5 text-fg-muted">{meta.description}</p>

          {connection ? (
            <dl className="mt-3 grid grid-cols-2 gap-x-4 gap-y-2.5 text-xs sm:grid-cols-4">
              <div>
                <dt className="text-fg-subtle">Key</dt>
                <dd className="mt-0.5 truncate font-mono text-fg">{connection.keyHint}</dd>
              </div>
              <div>
                <dt className="text-fg-subtle">Last validated</dt>
                <dd className="mt-0.5 text-fg">{formatRelative(connection.lastValidatedAt)}</dd>
              </div>
              <div>
                <dt className="text-fg-subtle">Models available</dt>
                <dd className="mt-0.5 text-fg tabular-nums">{models === null ? "—" : formatNumber(models)}</dd>
              </div>
              <div>
                <dt className="text-fg-subtle">{lastTest ? "Latency" : "Last success"}</dt>
                <dd className="mt-0.5 text-fg tabular-nums">
                  {lastTest ? (
                    <span className={cn("inline-flex items-center gap-1", lastTest.ok ? "text-success" : "text-danger")}>
                      <Zap className="size-3" /> {formatMs(lastTest.latencyMs)}
                    </span>
                  ) : (
                    formatRelative(connection.lastSuccessAt)
                  )}
                </dd>
              </div>
              {lastError || (lastTest && !lastTest.ok) ? (
                <div className="col-span-2 sm:col-span-4">
                  <dt className="text-fg-subtle">Last error</dt>
                  <dd className="mt-0.5 flex flex-wrap items-center gap-2 text-danger">
                    {connection.lastErrorCode ? <code className="rounded bg-danger-soft px-1.5 py-0.5 text-[11px]">{connection.lastErrorCode}</code> : null}
                    <span className="text-fg-muted">{lastTest && !lastTest.ok ? lastTest.error : connection.lastValidationError}</span>
                    {connection.lastErrorAt ? <span className="text-fg-subtle">· {formatRelative(connection.lastErrorAt)}</span> : null}
                  </dd>
                </div>
              ) : null}
            </dl>
          ) : (
            <p className="mt-3 text-xs leading-5 text-fg-subtle">
              {meta.keyHelp}{" "}
              <a href={meta.keyDocsUrl} target="_blank" rel="noreferrer noopener" className="tap inline-flex items-center gap-1 py-1.5 inline-flex items-center gap-0.5 text-accent hover:underline">
                Open console <ExternalLink className="size-3" />
              </a>
            </p>
          )}
        </div>

        {/* Desktop actions */}
        <div className="hidden shrink-0 flex-col items-stretch gap-2 sm:flex">
          {connection ? (
            <>
              <Tooltip content="Re-check the stored key against the provider and refresh its model list">
                <Button size="sm" variant="outline" loading={testing} onClick={onTest}>
                  <Activity /> Test connection
                </Button>
              </Tooltip>
              <DropdownMenu>
                <DropdownMenuTrigger asChild>
                  <Button size="sm" variant="ghost" aria-label="More actions">
                    <MoreHorizontal /> More
                  </Button>
                </DropdownMenuTrigger>
                <DropdownMenuContent align="end">
                  <DropdownMenuItem onSelect={onAddKey}>
                    <KeyRound /> Replace key
                  </DropdownMenuItem>
                  <DropdownMenuItem onSelect={() => window.open(meta.consoleUrl, "_blank", "noopener,noreferrer")}>
                    <ExternalLink /> Open {meta.shortName} console
                  </DropdownMenuItem>
                  <DropdownMenuSeparator />
                  <DropdownMenuItem destructive onSelect={onRemove}>
                    <Trash2 /> Remove key
                  </DropdownMenuItem>
                </DropdownMenuContent>
              </DropdownMenu>
            </>
          ) : (
            <Button size="sm" variant="primary" onClick={onAddKey}>
              <KeyRound /> Add key
            </Button>
          )}
        </div>
      </div>

      {/* Phone actions: 44 px targets in one row */}
      <div className="mt-3 flex gap-2 sm:hidden">
        {connection ? (
          <>
            <Button size="lg" variant="outline" className="h-11 flex-1" loading={testing} onClick={onTest}>
              {testing ? <RefreshCw /> : <Activity />} Test
            </Button>
            <Button size="lg" variant="ghost" className="h-11 flex-1" onClick={() => setMore(true)} aria-haspopup="menu">
              <MoreHorizontal /> More
            </Button>
          </>
        ) : (
          <Button size="lg" variant="primary" className="h-11 flex-1" onClick={onAddKey}>
            <KeyRound /> Add key
          </Button>
        )}
      </div>
      {isMobile ? <ActionSheet open={more} onOpenChange={setMore} title={meta.name} items={moreItems} /> : null}
    </li>
  );
}