src/shared/components/ProviderTestSlideOver.tsx

"use client";

import { useCallback, useEffect, useState, type ReactNode } from "react";
import Image from "next/image";

import {
  LlmChatCard,
  type LlmChatControls,
} from "@/app/(dashboard)/dashboard/media-providers/components/LlmChatCard";
import ProviderIcon from "@/shared/components/ProviderIcon";
import { useApiKey } from "@/app/(dashboard)/dashboard/providers/hooks/useApiKey";
import { useProviderModels } from "@/app/(dashboard)/dashboard/providers/hooks/useProviderModels";

interface SlideOverProvider {
  id?: string;
  name: string;
  color?: string;
  apiType?: string;
  deprecated?: boolean;
  deprecationReason?: string;
  subscriptionRisk?: boolean;
  serviceKinds?: string[];
}

interface ProviderTestSlideOverProps {
  isOpen: boolean;
  onClose: () => void;
  providerId: string;
  provider: SlideOverProvider;
  staticIconPath?: string | null;
  initialTab?: TabKey;
}

type TabKey = "test" | "logs";

const TABS: { key: TabKey; label: string; icon: string }[] = [
  { key: "test", label: "Test", icon: "play_arrow" },
  { key: "logs", label: "Logs", icon: "receipt_long" },
];

export default function ProviderTestSlideOver(props: ProviderTestSlideOverProps) {
  if (!props.isOpen) return null;
  return <ProviderTestSlideOverPanel {...props} />;
}

function ProviderTestSlideOverPanel({
  onClose,
  providerId,
  provider,
  staticIconPath,
  initialTab = "test",
}: ProviderTestSlideOverProps) {
  const [tab, setTab] = useState<TabKey>(initialTab);
  const [model, setModel] = useState<string>("");
  const [selectedKey, setSelectedKey] = useState<string>("");
  const [controls, setControls] = useState<LlmChatControls | null>(null);
  const onControlsChange = useCallback((c: LlmChatControls) => setControls(c), []);

  const { keys } = useApiKey();
  const { models } = useProviderModels(providerId);
  const firstModel = models[0]?.id ?? "";

  useEffect(() => {
    const onKey = (e: KeyboardEvent) => {
      if (e.key === "Escape") onClose();
    };
    document.addEventListener("keydown", onKey);
    return () => document.removeEventListener("keydown", onKey);
  }, [onClose]);

  useEffect(() => {
    const prev = document.body.style.overflow;
    document.body.style.overflow = "hidden";
    return () => {
      document.body.style.overflow = prev;
    };
  }, []);

  const color = provider.color || "#64748b";
  const modelOptions = models.length > 0 ? models : [];

  return (
    <div className="fixed inset-0 z-[60] flex justify-end">
      <div
        className="absolute inset-0 bg-black/40 backdrop-blur-sm animate-in fade-in duration-200"
        onClick={onClose}
        aria-hidden
      />
      <div
        role="dialog"
        aria-label={`Test ${provider.name}`}
        className="relative w-full sm:w-[640px] md:w-[720px] lg:w-[820px] max-w-full bg-surface border-l border-black/10 dark:border-white/10 shadow-2xl flex flex-col animate-in slide-in-from-right duration-200"
      >
        <SlideOverHeader
          provider={provider}
          providerId={providerId}
          staticIconPath={staticIconPath}
          color={color}
          onClose={onClose}
        />
        {tab === "test" && (
          <TestToolbar
            model={model || firstModel}
            onModelChange={setModel}
            modelOptions={modelOptions}
            selectedKey={selectedKey}
            onSelectedKeyChange={setSelectedKey}
            keys={keys}
            controls={controls}
          />
        )}
        <SlideOverTabs tab={tab} onChange={setTab} />
        <div className="flex-1 min-h-0 overflow-hidden flex flex-col">
          {tab === "test" && (
            <div className="flex-1 min-h-0 flex flex-col pl-4 pr-2 py-3">
              <LlmChatCard
                providerId={providerId}
                embedded
                hideToolbar
                model={model}
                onModelChange={setModel}
                selectedKey={selectedKey}
                onSelectedKeyChange={setSelectedKey}
                onControlsChange={onControlsChange}
              />
            </div>
          )}
          {tab === "logs" && <LogsTab providerId={providerId} />}
        </div>
      </div>
    </div>
  );
}

function SlideOverHeader({
  provider,
  providerId,
  staticIconPath,
  color,
  onClose,
}: {
  provider: SlideOverProvider;
  providerId: string;
  staticIconPath?: string | null;
  color: string;
  onClose: () => void;
}) {
  return (
    <div className="flex items-center gap-3 px-4 py-3 border-b border-black/5 dark:border-white/5 shrink-0">
      <div
        className="size-9 rounded-lg flex items-center justify-center shrink-0"
        style={{ backgroundColor: `${color}15` }}
      >
        {staticIconPath ? (
          <Image src={staticIconPath} alt={provider.name} width={22} height={22} />
        ) : (
          <ProviderIcon providerId={provider.id || providerId} size={22} type="color" />
        )}
      </div>
      <div className="flex-1 min-w-0">
        <h2 className="text-sm font-semibold text-text-main truncate" title={provider.name}>
          {provider.name}
        </h2>
        <div className="flex items-center gap-1.5 text-[11px] text-text-muted">
          {provider.apiType && <span className="font-mono">{provider.apiType}</span>}
          {provider.deprecated && (
            <>
              <span>·</span>
              <span className="flex items-center gap-0.5 text-text-muted/70">
                <span className="material-symbols-outlined text-[12px]">block</span>
                deprecated
              </span>
            </>
          )}
          {provider.subscriptionRisk && (
            <>
              <span>·</span>
              <span className="flex items-center gap-0.5 text-amber-500">
                <span className="material-symbols-outlined text-[12px]">info</span>
                risk
              </span>
            </>
          )}
        </div>
      </div>
      <button
        type="button"
        onClick={onClose}
        aria-label="Close"
        className="p-1.5 rounded-lg text-text-muted hover:bg-black/5 dark:hover:bg-white/5 transition-colors"
      >
        <span className="material-symbols-outlined text-[20px]">close</span>
      </button>
    </div>
  );
}

function TestToolbar({
  model,
  onModelChange,
  modelOptions,
  selectedKey,
  onSelectedKeyChange,
  keys,
  controls,
}: {
  model: string;
  onModelChange: (m: string) => void;
  modelOptions: { id: string }[];
  selectedKey: string;
  onSelectedKeyChange: (k: string) => void;
  keys: { id: string; key: string; name?: string }[];
  controls: LlmChatControls | null;
}) {
  const hasMessages = controls?.hasMessages ?? false;
  return (
    <div className="flex flex-wrap items-center gap-2 px-4 py-2 border-b border-black/5 dark:border-white/5 bg-bg-subtle/30 shrink-0">
      <div className="flex items-center gap-1.5 min-w-0 flex-1">
        <label className="text-[11px] text-text-muted shrink-0">Model:</label>
        <select
          value={model}
          onChange={(e) => onModelChange(e.target.value)}
          className="min-w-0 flex-1 rounded-md border border-border bg-bg-subtle text-xs px-2 py-1 text-text-main focus:outline-none focus:ring-1 focus:ring-primary"
        >
          {modelOptions.length === 0 && <option value="">—</option>}
          {modelOptions.map((m) => (
            <option key={m.id} value={m.id}>
              {m.id}
            </option>
          ))}
        </select>
      </div>
      {keys.length > 0 && (
        <div className="flex items-center gap-1.5">
          <label className="text-[11px] text-text-muted shrink-0">Key:</label>
          <select
            value={selectedKey}
            onChange={(e) => onSelectedKeyChange(e.target.value)}
            className="rounded-md border border-border bg-bg-subtle text-xs px-2 py-1 text-text-main focus:outline-none focus:ring-1 focus:ring-primary"
          >
            <option value="">(default)</option>
            {keys.map((k) => (
              <option key={k.id} value={k.key}>
                {k.name ?? k.id}
              </option>
            ))}
          </select>
        </div>
      )}
      {hasMessages && (
        <button
          type="button"
          onClick={() => controls?.clear()}
          className="text-[11px] text-text-muted hover:text-text-main transition-colors flex items-center gap-1"
          title="Clear conversation"
        >
          <span className="material-symbols-outlined text-[14px]">delete_sweep</span>
          Clear
        </button>
      )}
    </div>
  );
}

function SlideOverTabs({ tab, onChange }: { tab: TabKey; onChange: (next: TabKey) => void }) {
  return (
    <div
      role="tablist"
      className="flex items-center gap-1 px-4 pt-2 border-b border-black/5 dark:border-white/5 shrink-0"
    >
      {TABS.map((t) => {
        const active = t.key === tab;
        return (
          <button
            key={t.key}
            role="tab"
            type="button"
            aria-selected={active}
            onClick={() => onChange(t.key)}
            className={`relative flex items-center gap-1.5 px-3 py-2 text-xs font-medium transition-colors ${
              active ? "text-accent" : "text-text-muted hover:text-text-main"
            }`}
          >
            <span className="material-symbols-outlined text-[16px]">{t.icon}</span>
            <span>{t.label}</span>
            {active && (
              <span
                aria-hidden
                className="absolute left-0 right-0 -bottom-px h-0.5 bg-accent rounded-t"
              />
            )}
          </button>
        );
      })}
    </div>
  );
}

function TabPlaceholder({ icon, title, body }: { icon: string; title: string; body: ReactNode }) {
  return (
    <div className="flex flex-col items-center justify-center gap-3 p-10 text-center flex-1 min-h-0 overflow-y-auto">
      <div className="size-12 rounded-full bg-accent/10 flex items-center justify-center">
        <span className="material-symbols-outlined text-accent text-[24px]">{icon}</span>
      </div>
      <h3 className="text-sm font-semibold text-text-main">{title}</h3>
      <div className="text-xs text-text-muted max-w-sm">{body}</div>
    </div>
  );
}

interface LogEntry {
  id: string | number;
  timestamp: string;
  model?: string;
  requestedModel?: string;
  provider?: string;
  status?: number;
  duration?: number;
  tokens?: { in?: number; out?: number };
  account?: string;
  apiKey?: string;
  apiKeyName?: string;
  apiKeyId?: string;
}

function formatRequester(log: LogEntry): { label: string; title: string } {
  const name = log.apiKeyName || log.account;
  const keyHint = log.apiKey || log.apiKeyId;
  const masked =
    typeof keyHint === "string" && keyHint.length > 8
      ? `${keyHint.slice(0, 4)}…${keyHint.slice(-4)}`
      : keyHint || "";
  if (name && masked) return { label: name, title: `${name} (${masked})` };
  if (name) return { label: name, title: name };
  if (masked) return { label: masked, title: keyHint || masked };
  return { label: "—", title: "unknown requester" };
}

type LogsState =
  | { status: "loading" }
  | { status: "ready"; logs: LogEntry[] }
  | { status: "error"; message: string };

function LogsTab({ providerId }: { providerId: string }) {
  const [state, setState] = useState<LogsState>({ status: "loading" });
  const [expanded, setExpanded] = useState<string | null>(null);
  const [refreshTick, setRefreshTick] = useState(0);

  useEffect(() => {
    let cancelled = false;
    const ctrl = new AbortController();

    async function load() {
      try {
        const url = `/api/usage/call-logs?provider=${encodeURIComponent(providerId)}&limit=20`;
        const res = await fetch(url, { signal: ctrl.signal });
        if (!res.ok) throw new Error(`HTTP ${res.status}`);
        const data = await res.json();
        if (cancelled) return;
        const logs: LogEntry[] = Array.isArray(data) ? data : (data?.logs ?? []);
        setState({ status: "ready", logs });
      } catch (err) {
        if (cancelled || (err as { name?: string })?.name === "AbortError") return;
        setState({ status: "error", message: (err as Error).message || "Failed to load logs" });
      }
    }

    void load();
    const interval = setInterval(load, 2000);

    return () => {
      cancelled = true;
      ctrl.abort();
      clearInterval(interval);
    };
  }, [providerId, refreshTick]);

  const handleRefresh = useCallback(() => setRefreshTick((n) => n + 1), []);

  if (state.status === "loading") {
    return (
      <div className="flex-1 min-h-0 flex items-center justify-center text-xs text-text-muted gap-2">
        <span className="material-symbols-outlined text-[18px] animate-spin">
          progress_activity
        </span>
        Loading logs…
      </div>
    );
  }

  if (state.status === "error") {
    return (
      <TabPlaceholder icon="error" title="Failed to load logs" body={<p>{state.message}</p>} />
    );
  }

  if (state.logs.length === 0) {
    return (
      <TabPlaceholder
        icon="receipt_long"
        title="No logs yet"
        body={
          <>
            <p>Send a test message from the Test tab — logs for this provider will appear here.</p>
            <a
              href={`/dashboard/logs?connection=${encodeURIComponent(providerId)}`}
              className="mt-2 inline-flex items-center gap-1 text-accent hover:underline"
              target="_blank"
              rel="noopener noreferrer"
            >
              Open full logs page
              <span className="material-symbols-outlined text-[14px]">open_in_new</span>
            </a>
          </>
        }
      />
    );
  }

  return (
    <div className="flex-1 min-h-0 flex flex-col">
      <div className="flex items-center justify-between px-4 py-2 border-b border-black/5 dark:border-white/5 shrink-0">
        <span className="inline-flex items-center gap-2 text-[10px] uppercase tracking-wider text-text-muted font-medium">
          <span className="inline-flex items-center gap-1.5">
            <span className="relative inline-flex h-2 w-2">
              <span className="absolute inline-flex h-full w-full rounded-full bg-emerald-500 opacity-75 animate-ping" />
              <span className="relative inline-flex h-2 w-2 rounded-full bg-emerald-500" />
            </span>
            <span className="text-emerald-500">Live</span>
          </span>
          <span aria-hidden>·</span>
          <span>tailing last {state.logs.length}</span>
        </span>
        <button
          type="button"
          onClick={handleRefresh}
          className="text-[10px] text-text-muted hover:text-text-main inline-flex items-center gap-1"
          title="Refresh now"
        >
          <span className="material-symbols-outlined text-[14px]">refresh</span>
          Refresh
        </button>
      </div>
      <ul className="flex-1 min-h-0 overflow-y-auto divide-y divide-border/40">
        {state.logs.map((log) => {
          const key = String(log.id);
          const isExpanded = expanded === key;
          const statusOk = typeof log.status === "number" && log.status >= 200 && log.status < 400;
          const statusColor = statusOk
            ? "text-emerald-600 dark:text-emerald-400"
            : typeof log.status === "number"
              ? "text-red-500"
              : "text-text-muted";
          const requester = formatRequester(log);
          return (
            <li key={key}>
              <button
                type="button"
                onClick={() => setExpanded(isExpanded ? null : key)}
                className="w-full flex items-center gap-3 px-4 py-2 text-left hover:bg-black/[0.03] dark:hover:bg-white/[0.03] transition-colors"
              >
                <span className={`text-[11px] font-mono shrink-0 w-10 ${statusColor}`}>
                  {log.status ?? "—"}
                </span>
                <span className="text-[11px] text-text-muted shrink-0 w-20 font-mono">
                  {formatRelativeTs(log.timestamp)}
                </span>
                <div className="flex-1 min-w-0 flex flex-col">
                  <span
                    className="text-xs truncate text-text-main"
                    title={log.model || log.requestedModel}
                  >
                    {log.model || log.requestedModel || "—"}
                  </span>
                  <span
                    className="text-[10px] text-text-muted truncate font-mono"
                    title={requester.title}
                  >
                    {requester.label}
                  </span>
                </div>
                <span className="text-[11px] text-text-muted shrink-0 font-mono w-14 text-right">
                  {formatDurationMs(log.duration)}
                </span>
                <span
                  className={`material-symbols-outlined text-text-muted text-[16px] shrink-0 transition-transform ${isExpanded ? "rotate-90" : ""}`}
                >
                  chevron_right
                </span>
              </button>
              {isExpanded && <LogDetail log={log} />}
            </li>
          );
        })}
      </ul>
      <div className="px-4 py-2 border-t border-black/5 dark:border-white/5 text-[10px] text-text-muted text-center shrink-0">
        <a
          href={`/dashboard/logs?connection=${encodeURIComponent(providerId)}`}
          className="inline-flex items-center gap-1 hover:text-text-main hover:underline"
          target="_blank"
          rel="noopener noreferrer"
        >
          Open full logs page
          <span className="material-symbols-outlined text-[12px]">open_in_new</span>
        </a>
      </div>
    </div>
  );
}

function LogDetail({ log }: { log: LogEntry }) {
  const requester = formatRequester(log);
  const tokensIn = log.tokens?.in;
  const tokensOut = log.tokens?.out;
  const rows: { label: string; value: string; mono?: boolean }[] = [
    { label: "Timestamp", value: new Date(log.timestamp).toLocaleString(), mono: true },
    { label: "Status", value: String(log.status ?? "—") },
    { label: "Duration", value: formatDurationMs(log.duration) },
    { label: "Model", value: log.model || "—", mono: true },
    { label: "Requested model", value: log.requestedModel || "—", mono: true },
    { label: "Provider", value: log.provider || "—", mono: true },
    { label: "Requester", value: requester.title, mono: true },
    {
      label: "Tokens",
      value:
        tokensIn != null || tokensOut != null ? `in ${tokensIn ?? 0} · out ${tokensOut ?? 0}` : "—",
    },
  ];
  return (
    <dl className="px-4 py-3 bg-bg-subtle/40 border-t border-black/5 dark:border-white/5 grid grid-cols-[max-content_1fr] gap-x-4 gap-y-1.5 text-[11px]">
      {rows.map((row) => (
        <div key={row.label} className="contents">
          <dt className="text-text-muted uppercase tracking-wider text-[10px] font-medium">
            {row.label}
          </dt>
          <dd className={`text-text-main min-w-0 break-words ${row.mono ? "font-mono" : ""}`}>
            {row.value}
          </dd>
        </div>
      ))}
    </dl>
  );
}

function formatRelativeTs(ts: string | undefined): string {
  if (!ts) return "—";
  const date = new Date(ts);
  if (isNaN(date.getTime())) return "—";
  const diff = (Date.now() - date.getTime()) / 1000;
  if (diff < 60) return `${Math.max(0, Math.floor(diff))}s ago`;
  if (diff < 3600) return `${Math.floor(diff / 60)}m ago`;
  if (diff < 86400) return `${Math.floor(diff / 3600)}h ago`;
  return date.toLocaleDateString();
}

function formatDurationMs(ms: number | undefined): string {
  if (ms == null) return "—";
  if (ms < 1000) return `${Math.round(ms)}ms`;
  return `${(ms / 1000).toFixed(2)}s`;
}