"use client";
import * as React from "react";
import { Activity, MoreHorizontal, Pencil, RefreshCw, Trash2, CheckCircle2, XCircle, CircleDashed, Zap, Lock, Globe } 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 { useIsMobile } from "@/lib/client/hooks";
import { formatRelative, formatMs, formatNumber, cn } from "@/lib/utils";
import type { PublicEndpoint } from "@/lib/client/types";

const STATUS: Record<PublicEndpoint["status"], { label: string; variant: "success" | "danger" | "warning" | "default"; icon: React.ReactNode }> = {
  valid: { label: "Reachable", variant: "success", icon: <CheckCircle2 /> },
  invalid: { label: "Unreachable", variant: "danger", icon: <XCircle /> },
  error: { label: "Error", variant: "danger", icon: <XCircle /> },
  unverified: { label: "Not tested", variant: "warning", icon: <CircleDashed /> },
};

function hostOf(url: string): string {
  try {
    const u = new URL(url);
    return `${u.host}${u.pathname.replace(/\/$/, "")}`;
  } catch {
    return url;
  }
}

export function EndpointRow({ endpoint, testing, syncing, onTest, onSync, onEdit, onRemove }: { endpoint: PublicEndpoint; testing: boolean; syncing: boolean; onTest: () => void; onSync: () => void; onEdit: () => void; onRemove: () => void }) {
  const ui = STATUS[endpoint.status] ?? STATUS.unverified;
  const isMobile = useIsMobile();
  const [more, setMore] = React.useState(false);
  const total = endpoint.modelsAvailable ?? endpoint.discoveredModels.length + endpoint.manualModels.length;
  const items = [
    { key: "edit", label: "Edit endpoint", icon: <Pencil />, onSelect: onEdit },
    { key: "sync", label: "Refresh model list", icon: <RefreshCw />, onSelect: onSync, disabled: !endpoint.modelsPath || syncing },
    "separator" as const,
    { key: "remove", label: "Remove endpoint", icon: <Trash2 />, onSelect: onRemove, destructive: true },
  ];
  return (
    <li className={cn("panel p-4 sm:p-5", endpoint.status === "invalid" && "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="custom" 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="truncate text-[15px] font-semibold leading-6">{endpoint.name}</h3>
            <Badge variant={ui.variant}>
              {ui.icon} {ui.label}
            </Badge>
            {endpoint.isPrivate ? (
              <Tooltip content="Private / local address — only reachable when PolyLLM runs on the same network.">
                <Badge variant="outline">
                  <Lock /> local
                </Badge>
              </Tooltip>
            ) : (
              <Badge variant="outline">
                <Globe /> {endpoint.baseUrl.startsWith("https") ? "https" : "http"}
              </Badge>
            )}
          </div>
          <p className="mt-0.5 truncate font-mono text-[12.5px] text-fg-muted">{hostOf(endpoint.baseUrl)}</p>
          <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">Models</dt>
              <dd className="mt-0.5 text-fg tabular-nums">
                {formatNumber(total)}
                {endpoint.manualModels.length ? <span className="text-fg-subtle"> · {endpoint.manualModels.length} manual</span> : null}
              </dd>
            </div>
            <div>
              <dt className="text-fg-subtle">Latency</dt>
              <dd className={cn("mt-0.5 inline-flex items-center gap-1 tabular-nums", endpoint.status === "valid" ? "text-success" : "text-fg")}>
                {endpoint.lastLatencyMs !== null ? (
                  <>
                    <Zap className="size-3" /> {formatMs(endpoint.lastLatencyMs)}
                  </>
                ) : (
                  "—"
                )}
              </dd>
            </div>
            <div>
              <dt className="text-fg-subtle">Last tested</dt>
              <dd className="mt-0.5 text-fg">{formatRelative(endpoint.lastValidatedAt)}</dd>
            </div>
            <div>
              <dt className="text-fg-subtle">Auth</dt>
              <dd className="mt-0.5 truncate font-mono text-fg">{endpoint.hasKey ? endpoint.keyHint : endpoint.headerNames.length ? `${endpoint.headerNames.length} header${endpoint.headerNames.length === 1 ? "" : "s"}` : "none"}</dd>
            </div>
            {endpoint.lastValidationError ? (
              <div className="col-span-2 sm:col-span-4">
                <dt className="text-fg-subtle">Last error</dt>
                <dd className="mt-0.5 text-danger">{endpoint.lastValidationError}</dd>
              </div>
            ) : null}
          </dl>
          {endpoint.discoveredModels.length ? (
            <ul className="mt-2.5 flex flex-wrap gap-1.5">
              {endpoint.discoveredModels.slice(0, isMobile ? 4 : 8).map((m) => (
                <li key={m.id}>
                  <Badge variant="outline" className="max-w-[200px] truncate font-mono text-[10.5px] text-fg-muted">
                    {m.id}
                  </Badge>
                </li>
              ))}
              {endpoint.discoveredModels.length > (isMobile ? 4 : 8) ? <li className="text-[11px] text-fg-subtle">+{endpoint.discoveredModels.length - (isMobile ? 4 : 8)} more</li> : null}
            </ul>
          ) : null}
        </div>

        <div className="hidden shrink-0 flex-col items-stretch gap-2 sm:flex">
          <Button size="sm" variant="outline" loading={testing} onClick={onTest}>
            <Activity /> Test connection
          </Button>
          <DropdownMenu>
            <DropdownMenuTrigger asChild>
              <Button size="sm" variant="ghost" aria-label="More actions">
                <MoreHorizontal /> More
              </Button>
            </DropdownMenuTrigger>
            <DropdownMenuContent align="end">
              <DropdownMenuItem onSelect={onEdit}>
                <Pencil /> Edit endpoint
              </DropdownMenuItem>
              <DropdownMenuItem onSelect={onSync} disabled={!endpoint.modelsPath || syncing}>
                <RefreshCw /> Refresh model list
              </DropdownMenuItem>
              <DropdownMenuSeparator />
              <DropdownMenuItem destructive onSelect={onRemove}>
                <Trash2 /> Remove endpoint
              </DropdownMenuItem>
            </DropdownMenuContent>
          </DropdownMenu>
        </div>
      </div>
      <div className="mt-3 flex gap-2 sm:hidden">
        <Button size="lg" variant="outline" className="h-11 flex-1" loading={testing} onClick={onTest}>
          <Activity /> Test
        </Button>
        <Button size="lg" variant="ghost" className="h-11 flex-1" onClick={() => setMore(true)} aria-haspopup="menu">
          <MoreHorizontal /> More
        </Button>
      </div>
      {isMobile ? <ActionSheet open={more} onOpenChange={setMore} title={endpoint.name} description={hostOf(endpoint.baseUrl)} items={items} /> : null}
    </li>
  );
}