legal-ai/web-ui/src/app/settings/_components/environment-tab.tsx

"use client";

import { useState, useMemo } from "react";
import { RefreshCw, AlertCircle } from "lucide-react";
import { Card, CardContent } from "@/components/ui/card";
import { Button } from "@/components/ui/button";
import { Skeleton } from "@/components/ui/skeleton";
import { Badge } from "@/components/ui/badge";
import {
  useMcpEnv,
  useMcpRedeploy,
  type McpEnvVar,
  type EnvCategory,
} from "@/lib/api/settings";
import { toast } from "sonner";
import { EnvVarRow } from "./env-var-row";

const CATEGORY_LABELS: Record<EnvCategory, string> = {
  multimodal: "Multimodal",
  rerank: "Rerank",
  halacha: "Halacha",
  general: "כללי",
  credentials: "אישורים",
  connection: "חיבורים",
};

const CATEGORY_ORDER: EnvCategory[] = [
  "multimodal", "rerank", "halacha", "general", "credentials", "connection",
];

export function EnvironmentTab() {
  const { data, isPending, error } = useMcpEnv();
  const redeploy = useMcpRedeploy();
  const [pendingRedeploy, setPendingRedeploy] = useState(false);

  const grouped = useMemo(() => {
    if (!data?.vars) return new Map<EnvCategory, McpEnvVar[]>();
    const m = new Map<EnvCategory, McpEnvVar[]>();
    for (const v of data.vars) {
      const arr = m.get(v.category) ?? [];
      arr.push(v);
      m.set(v.category, arr);
    }
    return m;
  }, [data]);

  function handleRedeploy() {
    redeploy.mutate(undefined, {
      onSuccess: (res) => {
        toast.success(res.message);
        setPendingRedeploy(false);
      },
      onError: (err) => toast.error(`Redeploy נכשל: ${err.message}`),
    });
  }

  if (isPending) return <Skeleton className="h-96 w-full" />;
  if (error) {
    return (
      <Card className="bg-surface border-danger/40">
        <CardContent className="p-6 flex items-center gap-3 text-danger">
          <AlertCircle className="w-5 h-5" />
          <span>שגיאה בטעינת env vars: {error.message}</span>
        </CardContent>
      </Card>
    );
  }
  if (!data) return null;

  const coolifyAvailable = data.errors.length === 0;
  const driftCount = data.vars.filter((v) => v.drift).length;
  const duplicatesCount = data.vars.filter((v) => v.has_duplicates).length;

  return (
    <div className="space-y-4">
      <Card className="bg-surface border-rule">
        <CardContent className="px-6 py-4 flex items-center justify-between gap-4 flex-wrap">
          <div className="flex items-center gap-3 flex-wrap text-sm">
            <Badge variant="outline">
              Coolify app: <code dir="ltr" className="ms-1">{data.coolify_app_uuid.slice(0, 8)}…</code>
            </Badge>
            {driftCount > 0 && (
              <Badge variant="outline" className="text-warn border-warn/40">
                {driftCount} drift
              </Badge>
            )}
            {duplicatesCount > 0 && (
              <Badge variant="outline" className="text-warn border-warn/40">
                {duplicatesCount} duplicates
              </Badge>
            )}
            {data.errors.length > 0 && (
              <Badge variant="outline" className="text-danger border-danger/40">
                {data.errors.join(", ")}
              </Badge>
            )}
          </div>
          <Button
            onClick={handleRedeploy}
            disabled={redeploy.isPending}
            variant={pendingRedeploy ? "default" : "outline"}
            size="sm"
          >
            <RefreshCw className={redeploy.isPending ? "w-3.5 h-3.5 animate-spin" : "w-3.5 h-3.5"} data-icon="inline-start" />
            {redeploy.isPending ? "Redeploying..." : "Redeploy now"}
          </Button>
        </CardContent>
      </Card>

      {CATEGORY_ORDER.map((cat) => {
        const vars = grouped.get(cat);
        if (!vars || vars.length === 0) return null;
        return (
          <Card key={cat} className="bg-surface border-rule">
            <CardContent className="px-6 py-5">
              <h2 className="text-navy text-lg mb-4 flex items-center gap-2">
                {CATEGORY_LABELS[cat]}
                <Badge variant="outline" className="text-[0.7rem] tabular-nums">
                  {vars.length}
                </Badge>
              </h2>
              <div className="space-y-3">
                {vars.map((v) => (
                  <EnvVarRow
                    key={v.key}
                    spec={v}
                    coolifyAppUuid={data.coolify_app_uuid}
                    coolifyAvailable={coolifyAvailable}
                    onPendingRedeploy={() => setPendingRedeploy(true)}
                  />
                ))}
              </div>
            </CardContent>
          </Card>
        );
      })}
    </div>
  );
}