stackpilot/frontend/src/components/stacks/SecretsPanel.tsx

import { useState } from "react";
import { useQuery, useMutation, useQueryClient } from "@tanstack/react-query";
import { KeyRound, Trash2, Link2, FileCog } from "lucide-react";
import { toast } from "sonner";
import { Badge, Button, Card, Input } from "@/components/ui";
import { secretsApi, type SecretEntry, type SecretKind } from "@/api/secrets";
import { editorApi } from "@/api/editor";
import { apiErrorMessage } from "@/api/client";

/**
 * Per-stack file-based secrets & configs. Create stores a file in the stack
 * dir; attach references it from a service in the compose file (redeploy to
 * apply). Admin-only on the backend.
 */
export function SecretsPanel({
  stackId,
  yaml,
  agentId,
  isAdmin,
  onChanged,
}: {
  stackId: string;
  yaml: string;
  agentId?: number;
  isAdmin: boolean;
  onChanged?: () => void;
}) {
  const qc = useQueryClient();
  const key = ["secrets", agentId ?? "local", stackId];

  const list = useQuery({
    queryKey: key,
    queryFn: () => secretsApi.list(stackId, agentId),
    enabled: isAdmin,
  });
  const services = useQuery({
    queryKey: ["editor-services", stackId, agentId, yaml.length],
    queryFn: () => editorApi.services(yaml),
    enabled: isAdmin,
  });

  const [kind, setKind] = useState<SecretKind>("secret");
  const [name, setName] = useState("");
  const [content, setContent] = useState("");

  const invalidate = () => qc.invalidateQueries({ queryKey: key });

  const create = useMutation({
    mutationFn: () => secretsApi.write(stackId, { kind, name: name.trim(), content }, agentId),
    onSuccess: () => {
      toast.success(`${kind} "${name}" saved`);
      setName(""); setContent("");
      invalidate();
    },
    onError: (e) => toast.error(apiErrorMessage(e)),
  });

  const remove = useMutation({
    mutationFn: (s: SecretEntry) => secretsApi.remove(stackId, s.kind, s.name, agentId),
    onSuccess: () => { toast.success("Deleted"); invalidate(); },
    onError: (e) => toast.error(apiErrorMessage(e)),
  });

  const attach = useMutation({
    mutationFn: (v: { s: SecretEntry; service: string; target?: string }) =>
      secretsApi.attach(stackId, { kind: v.s.kind, name: v.s.name, service: v.service, target: v.target }, agentId),
    onSuccess: () => { toast.success("Attached — redeploy the stack to apply"); onChanged?.(); },
    onError: (e) => toast.error(apiErrorMessage(e)),
  });

  const detach = useMutation({
    mutationFn: (v: { s: SecretEntry; service: string }) =>
      secretsApi.detach(stackId, { kind: v.s.kind, name: v.s.name, service: v.service }, agentId),
    onSuccess: () => { toast.success("Detached — redeploy the stack to apply"); onChanged?.(); },
    onError: (e) => toast.error(apiErrorMessage(e)),
  });

  if (!isAdmin)
    return (
      <Card>
        <p className="text-sm text-slate-500">Secrets are visible to admins only.</p>
      </Card>
    );

  const items = list.data ?? [];
  const svcList = services.data ?? [];

  return (
    <div className="space-y-4 overflow-auto">
      <Card className="space-y-3">
        <div className="flex items-center gap-2">
          <KeyRound className="h-4 w-4 text-accent dark:text-accent-dark" />
          <span className="font-medium">New secret / config</span>
        </div>
        <div className="flex flex-wrap items-end gap-2">
          <label className="text-sm">
            <span className="mb-1 block text-slate-500">Type</span>
            <select
              value={kind}
              onChange={(e) => setKind(e.target.value as SecretKind)}
              className="rounded-md border border-slate-300 bg-transparent px-2 py-2 text-sm dark:border-slate-600"
            >
              <option value="secret">Secret (/run/secrets)</option>
              <option value="config">Config (mounted file)</option>
            </select>
          </label>
          <label className="text-sm">
            <span className="mb-1 block text-slate-500">Name</span>
            <Input value={name} onChange={(e) => setName(e.target.value)} placeholder="db_password" />
          </label>
        </div>
        <textarea
          value={content}
          onChange={(e) => setContent(e.target.value)}
          rows={4}
          placeholder="secret content…"
          className="w-full rounded-md border border-slate-300 bg-transparent p-2 font-mono text-sm dark:border-slate-600"
        />
        <Button
          onClick={() => create.mutate()}
          loading={create.isPending}
          disabled={!name.trim() || !content}
        >
          Save
        </Button>
      </Card>

      <Card className="p-0">
        {items.length === 0 ? (
          <p className="p-4 text-sm text-slate-500">No secrets or configs yet.</p>
        ) : (
          <ul className="divide-y divide-slate-200 dark:divide-slate-700">
            {items.map((s) => (
              <SecretRow
                key={`${s.kind}/${s.name}`}
                s={s}
                services={svcList}
                onDelete={() => remove.mutate(s)}
                onAttach={(service, target) => attach.mutate({ s, service, target })}
                onDetach={(service) => detach.mutate({ s, service })}
              />
            ))}
          </ul>
        )}
      </Card>
    </div>
  );
}

function SecretRow({
  s,
  services,
  onDelete,
  onAttach,
  onDetach,
}: {
  s: SecretEntry;
  services: string[];
  onDelete: () => void;
  onAttach: (service: string, target?: string) => void;
  onDetach: (service: string) => void;
}) {
  const [service, setService] = useState(services[0] ?? "");
  const [target, setTarget] = useState("");

  return (
    <li className="flex flex-wrap items-center gap-3 p-3">
      {s.kind === "config" ? (
        <FileCog className="h-4 w-4 shrink-0 text-slate-400" />
      ) : (
        <KeyRound className="h-4 w-4 shrink-0 text-slate-400" />
      )}
      <div className="min-w-0">
        <span className="font-mono">{s.name}</span>
        <Badge>{s.kind}</Badge>
      </div>
      <span className="text-xs text-slate-500">{s.size} B</span>

      <div className="ml-auto flex flex-wrap items-center gap-2">
        <select
          value={service}
          onChange={(e) => setService(e.target.value)}
          className="rounded-md border border-slate-300 bg-transparent px-2 py-1 text-sm dark:border-slate-600"
        >
          {services.length === 0 && <option value="">no services</option>}
          {services.map((sv) => (
            <option key={sv} value={sv}>{sv}</option>
          ))}
        </select>
        {s.kind === "config" && (
          <Input
            value={target}
            onChange={(e) => setTarget(e.target.value)}
            placeholder="/etc/app.conf"
            className="w-40"
          />
        )}
        <Button
          variant="outline"
          className="px-2 py-1"
          disabled={!service || (s.kind === "config" && !target)}
          onClick={() => onAttach(service, target || undefined)}
          title="Attach to service"
        >
          <Link2 className="h-4 w-4" />
        </Button>
        <Button
          variant="outline"
          className="px-2 py-1"
          disabled={!service}
          onClick={() => onDetach(service)}
          title="Detach from service"
        >
          detach
        </Button>
        <Button variant="outline" className="px-2 py-1" onClick={onDelete} title="Delete file">
          <Trash2 className="h-4 w-4 text-red-500" />
        </Button>
      </div>
    </li>
  );
}