src/app/(dashboard)/dashboard/cli-code/CliCodePageClient.tsx

"use client";

import { useCallback, useEffect, useMemo, useState } from "react";
import { useTranslations } from "next-intl";
import Link from "next/link";
import { Button, CardSkeleton, Input } from "@/shared/components";
import { CLI_TOOLS } from "@/shared/constants/cliTools";
import { EXPECTED_CODE_COUNT } from "@/shared/schemas/cliCatalog";
import { CliToolCard, CliConceptCard, CliComparisonCard } from "@/shared/components/cli";
import { useToolBatchStatuses } from "@/shared/hooks/cli/useToolBatchStatuses";
import type { CliCatalogEntry } from "@/shared/schemas/cliCatalog";

// ── Static catalogue slice ────────────────────────────────────────────────────

const CODE_TOOLS: [string, CliCatalogEntry][] = Object.entries(CLI_TOOLS).filter(
  ([, tool]) => tool.category === "code" && tool.baseUrlSupport !== "none"
) as [string, CliCatalogEntry][];

// Cardinality guard (D15) — non-blocking, log only
if (CODE_TOOLS.length !== EXPECTED_CODE_COUNT) {
  console.warn(
    `[CliCodePage] Expected ${EXPECTED_CODE_COUNT} code tools, found ${CODE_TOOLS.length}. ` +
      "Check F1 catalog edits."
  );
}

// ── Types ─────────────────────────────────────────────────────────────────────

type DetectionFilter = "all" | "installed" | "not_installed";
type BaseUrlFilter = "all" | "full" | "partial";

interface ProviderConnection {
  isActive?: boolean;
  [key: string]: unknown;
}

interface ProvidersResponse {
  connections?: ProviderConnection[];
}

// ── Component ─────────────────────────────────────────────────────────────────

interface CliCodePageClientProps {
  machineId: string;
}

export default function CliCodePageClient({ machineId: _machineId }: CliCodePageClientProps) {
  const t = useTranslations("cliCode");
  const tCommon = useTranslations("cliCommon");

  // ── Batch statuses ──────────────────────────────────────────────────────────
  const { statuses, loading, refetch } = useToolBatchStatuses();

  // ── Providers ───────────────────────────────────────────────────────────────
  const [hasActiveProviders, setHasActiveProviders] = useState<boolean>(false);
  const [providersLoading, setProvidersLoading] = useState<boolean>(true);

  useEffect(() => {
    let cancelled = false;
    fetch("/api/providers")
      .then<ProvidersResponse>((res) => (res.ok ? res.json() : Promise.resolve({ connections: [] })))
      .then((data) => {
        if (cancelled) return;
        const active = (data.connections ?? []).filter((c) => c.isActive !== false);
        setHasActiveProviders(active.length > 0);
      })
      .catch(() => {
        if (!cancelled) setHasActiveProviders(false);
      })
      .finally(() => {
        if (!cancelled) setProvidersLoading(false);
      });
    return () => {
      cancelled = true;
    };
  }, []);

  // ── Filters ─────────────────────────────────────────────────────────────────
  const [search, setSearch] = useState<string>("");
  const [detectionFilter, setDetectionFilter] = useState<DetectionFilter>("all");
  const [baseUrlFilter, setBaseUrlFilter] = useState<BaseUrlFilter>("all");

  const handleSearchChange = useCallback((e: React.ChangeEvent<HTMLInputElement>) => {
    setSearch(e.target.value);
  }, []);

  const handleDetectionChange = useCallback((e: React.ChangeEvent<HTMLSelectElement>) => {
    setDetectionFilter(e.target.value as DetectionFilter);
  }, []);

  const handleBaseUrlChange = useCallback((e: React.ChangeEvent<HTMLSelectElement>) => {
    setBaseUrlFilter(e.target.value as BaseUrlFilter);
  }, []);

  // ── Filtered tools ──────────────────────────────────────────────────────────
  const filteredTools = useMemo<[string, CliCatalogEntry][]>(() => {
    const q = search.trim().toLowerCase();

    return CODE_TOOLS.filter(([id, tool]) => {
      // Search filter
      if (q) {
        const haystack =
          `${tool.name} ${tool.vendor} ${tool.description}`.toLowerCase();
        if (!haystack.includes(q)) return false;
      }

      // Detection filter
      if (detectionFilter !== "all") {
        const installed = statuses?.[id]?.detection.installed ?? false;
        if (detectionFilter === "installed" && !installed) return false;
        if (detectionFilter === "not_installed" && installed) return false;
      }

      // Base URL filter
      if (baseUrlFilter !== "all") {
        if (tool.baseUrlSupport !== baseUrlFilter) return false;
      }

      return true;
    });
  }, [search, detectionFilter, baseUrlFilter, statuses]);

  // ── Render ───────────────────────────────────────────────────────────────────
  const isLoadingOverall = loading || providersLoading;

  return (
    <div className="flex flex-col gap-6">
      {/* Concept card */}
      <CliConceptCard currentType="code" />

      {/* Comparison card */}
      <CliComparisonCard currentType="code" />

      {/* Header bar */}
      <div className="flex flex-col sm:flex-row sm:items-center gap-3 flex-wrap">
        {/* Title + subtitle */}
        <div className="flex-1 min-w-0">
          <h1 className="text-lg font-semibold text-text-main leading-tight">{t("pageTitle")}</h1>
          <p className="text-sm text-text-muted mt-0.5">{t("pageSubtitle")}</p>
        </div>

        {/* Refresh button */}
        <Button
          variant="secondary"
          size="sm"
          onClick={refetch}
          icon="refresh"
          aria-label={tCommon("card.refreshDetection")}
        >
          {tCommon("card.refreshDetection")}
        </Button>
      </div>

      {/* Filter row */}
      <div className="flex flex-col sm:flex-row gap-3 items-start sm:items-center">
        <div className="flex-1 min-w-0">
          <Input
            placeholder={t("searchPlaceholder")}
            value={search}
            onChange={handleSearchChange}
            icon="search"
          />
        </div>

        {/* Detection filter */}
        <div className="flex flex-col gap-1 min-w-[150px]">
          <label className="text-[11px] text-text-muted uppercase tracking-wide">
            {t("filterDetectionLabel")}
          </label>
          <select
            value={detectionFilter}
            onChange={handleDetectionChange}
            className="h-8 px-2 text-sm rounded-lg border border-black/10 dark:border-white/10 bg-surface text-text-main focus:outline-none focus:ring-2 focus:ring-primary/30"
          >
            <option value="all">{t("detectionAll")}</option>
            <option value="installed">{t("detectionInstalled")}</option>
            <option value="not_installed">{t("detectionNotFound")}</option>
          </select>
        </div>

        {/* Base URL filter */}
        <div className="flex flex-col gap-1 min-w-[150px]">
          <label className="text-[11px] text-text-muted uppercase tracking-wide">
            {t("filterBaseUrlLabel")}
          </label>
          <select
            value={baseUrlFilter}
            onChange={handleBaseUrlChange}
            className="h-8 px-2 text-sm rounded-lg border border-black/10 dark:border-white/10 bg-surface text-text-main focus:outline-none focus:ring-2 focus:ring-primary/30"
          >
            <option value="all">{t("baseUrlAll")}</option>
            <option value="full">{t("baseUrlFull")}</option>
            <option value="partial">{t("baseUrlPartial")}</option>
          </select>
        </div>
      </div>

      {/* Empty state — no active providers */}
      {!providersLoading && !hasActiveProviders && (
        <div className="rounded-lg border border-amber-500/40 bg-amber-500/5 p-4 flex items-start gap-3">
          <span className="material-symbols-outlined text-amber-500 flex-shrink-0">warning</span>
          <div className="flex-1 min-w-0">
            <p className="text-sm font-medium text-amber-600 dark:text-amber-400">
              {tCommon("detail.noActiveProviders")}
            </p>
            <p className="text-xs text-text-muted mt-0.5">
              {tCommon("detail.noActiveProvidersDesc")}
            </p>
            <Link
              href="/dashboard/providers"
              className="inline-flex items-center gap-1 mt-2 text-xs text-primary font-medium hover:underline"
            >
              {tCommon("detail.openProviders")}
            </Link>
          </div>
        </div>
      )}

      {/* Grid */}
      {isLoadingOverall ? (
        <div className="grid grid-cols-1 lg:grid-cols-2 gap-4">
          {Array.from({ length: 6 }).map((_, i) => (
            <CardSkeleton key={i} />
          ))}
        </div>
      ) : (
        <div className="grid grid-cols-1 lg:grid-cols-2 gap-4">
          {filteredTools.map(([id, tool]) => (
            <CliToolCard
              key={id}
              tool={tool}
              batchStatus={statuses?.[id] ?? null}
              detailHref={`/dashboard/cli-code/${id}`}
              hasActiveProviders={hasActiveProviders}
            />
          ))}
        </div>
      )}
    </div>
  );
}