govoplan-campaign/webui/src/features/campaigns/components/CampaignAccessCard.tsx

import { useEffect, useMemo, useState } from "react";
import type { ApiSettings, CampaignListItem } from "../../../types";
import {
  getCampaignShares,
  getCampaignShareTargets,
  revokeCampaignShare,
  updateCampaignOwner,
  upsertCampaignShare,
  type CampaignShare,
  type CampaignShareTargets
} from "../../../api/campaigns";
import Button from "../../../components/Button";
import Card from "../../../components/Card";
import ConfirmDialog from "../../../components/ConfirmDialog";
import DataGrid, { type DataGridColumn } from "../../../components/table/DataGrid";
import Dialog from "../../../components/Dialog";
import FormField from "../../../components/FormField";
import StatusBadge from "../../../components/StatusBadge";

type TargetType = "user" | "group";

export default function CampaignAccessCard({
  settings,
  campaign,
  onChanged,
  onError
}: {
  settings: ApiSettings;
  campaign: CampaignListItem;
  onChanged: () => Promise<void>;
  onError: (message: string) => void;
}) {
  const [available, setAvailable] = useState<boolean | null>(null);
  const [targets, setTargets] = useState<CampaignShareTargets>({ users: [], groups: [] });
  const [shares, setShares] = useState<CampaignShare[]>([]);
  const [ownerOpen, setOwnerOpen] = useState(false);
  const [shareOpen, setShareOpen] = useState(false);
  const [revokeTarget, setRevokeTarget] = useState<CampaignShare | null>(null);
  const [ownerType, setOwnerType] = useState<TargetType>(campaign.owner_group_id ? "group" : "user");
  const [ownerId, setOwnerId] = useState(campaign.owner_group_id || campaign.owner_user_id || "");
  const [shareType, setShareType] = useState<TargetType>("user");
  const [shareTargetId, setShareTargetId] = useState("");
  const [sharePermission, setSharePermission] = useState<"read" | "write">("read");
  const [busy, setBusy] = useState(false);

  async function load() {
    try {
      const [nextTargets, nextShares] = await Promise.all([
        getCampaignShareTargets(settings, campaign.id),
        getCampaignShares(settings, campaign.id)
      ]);
      setTargets(nextTargets);
      setShares(nextShares.filter((item) => !item.revoked_at));
      setAvailable(true);
    } catch (err) {
      const message = err instanceof Error ? err.message : String(err);
      if (message.startsWith("403 ")) setAvailable(false);
      else onError(message);
    }
  }

  useEffect(() => {
    setOwnerType(campaign.owner_group_id ? "group" : "user");
    setOwnerId(campaign.owner_group_id || campaign.owner_user_id || "");
    void load();
  }, [campaign.id, campaign.owner_group_id, campaign.owner_user_id, settings.accessToken, settings.apiBaseUrl]);

  const targetOptions = ownerType === "user" ? targets.users : targets.groups;
  const shareTargetOptions = shareType === "user" ? targets.users : targets.groups;
  const targetMap = useMemo(() => new Map([
    ...targets.users.map((item) => [`user:${item.id}`, item] as const),
    ...targets.groups.map((item) => [`group:${item.id}`, item] as const)
  ]), [targets]);

  const ownerLabel = campaign.owner_group_id
    ? targetMap.get(`group:${campaign.owner_group_id}`)?.name || "Group owner"
    : targetMap.get(`user:${campaign.owner_user_id || ""}`)?.name || "User owner";

  async function saveOwner() {
    if (!ownerId) return;
    setBusy(true);
    try {
      await updateCampaignOwner(settings, campaign.id, ownerType === "user"
        ? { owner_user_id: ownerId, owner_group_id: null }
        : { owner_user_id: null, owner_group_id: ownerId });
      setOwnerOpen(false);
      await onChanged();
      await load();
    } catch (err) { onError(err instanceof Error ? err.message : String(err)); }
    finally { setBusy(false); }
  }

  async function saveShare() {
    if (!shareTargetId) return;
    setBusy(true);
    try {
      await upsertCampaignShare(settings, campaign.id, { target_type: shareType, target_id: shareTargetId, permission: sharePermission });
      setShareOpen(false);
      setShareTargetId("");
      await load();
    } catch (err) { onError(err instanceof Error ? err.message : String(err)); }
    finally { setBusy(false); }
  }

  async function revoke() {
    if (!revokeTarget) return;
    setBusy(true);
    try {
      await revokeCampaignShare(settings, campaign.id, revokeTarget.id);
      setRevokeTarget(null);
      await load();
    } catch (err) { onError(err instanceof Error ? err.message : String(err)); }
    finally { setBusy(false); }
  }

  const columns = useMemo<DataGridColumn<CampaignShare>[]>(() => [
    {
      id: "target",
      header: "Shared with",
      width: "minmax(220px, 1fr)",
      minWidth: 190,
      resizable: true,
      sticky: "start",
      sortable: true,
      filterable: true,
      value: (row) => targetMap.get(`${row.target_type}:${row.target_id}`)?.name || row.target_id,
      render: (row) => {
        const target = targetMap.get(`${row.target_type}:${row.target_id}`);
        return <div><strong>{target?.name || row.target_id}</strong><div className="muted small-note">{row.target_type}{target?.secondary ? ` · ${target.secondary}` : ""}</div></div>;
      }
    },
    { id: "permission", header: "Access", width: 120, resizable: false, sortable: true, filterable: true, value: (row) => row.permission, render: (row) => <StatusBadge status={row.permission === "write" ? "active" : "built"} label={row.permission === "write" ? "Can edit" : "Can view"} /> },
    { id: "actions", header: "Actions", width: 110, resizable: false, sticky: "end", align: "right", render: (row) => <Button variant="danger" onClick={() => setRevokeTarget(row)}>Remove</Button> }
  ], [targetMap]);

  if (available === false) return null;

  return (
    <>
      <Card title="Ownership and sharing" actions={<div className="button-row compact-actions"><Button onClick={() => setOwnerOpen(true)} disabled={available !== true}>Change owner</Button><Button onClick={() => setShareOpen(true)} disabled={available !== true}>Share</Button></div>}>
        <p><strong>Owner:</strong> {ownerLabel}</p>
        <p className="muted small-note">Permissions define what a role may do; ownership and explicit shares determine which campaigns that permission applies to.</p>
        <DataGrid id={`campaign-${campaign.id}-shares`} rows={shares} columns={columns} getRowKey={(row) => row.id} emptyText={available === null ? "Loading campaign access…" : "This campaign has no explicit shares."} />
      </Card>

      <Dialog open={ownerOpen} title="Change campaign owner" onClose={() => !busy && setOwnerOpen(false)} footer={<><Button onClick={() => setOwnerOpen(false)} disabled={busy}>Cancel</Button><Button variant="primary" onClick={() => void saveOwner()} disabled={busy || !ownerId}>Save owner</Button></>}>
        <FormField label="Owner type"><select value={ownerType} onChange={(event) => { const next = event.target.value as TargetType; setOwnerType(next); setOwnerId((next === "user" ? targets.users : targets.groups)[0]?.id || ""); }}><option value="user">User</option><option value="group">Group</option></select></FormField>
        <FormField label="Owner"><select value={ownerId} onChange={(event) => setOwnerId(event.target.value)}>{targetOptions.map((item) => <option key={item.id} value={item.id}>{item.name}{item.secondary ? ` · ${item.secondary}` : ""}</option>)}</select></FormField>
      </Dialog>

      <Dialog open={shareOpen} title="Share campaign" onClose={() => !busy && setShareOpen(false)} footer={<><Button onClick={() => setShareOpen(false)} disabled={busy}>Cancel</Button><Button variant="primary" onClick={() => void saveShare()} disabled={busy || !shareTargetId}>Save share</Button></>}>
        <FormField label="Target type"><select value={shareType} onChange={(event) => { const next = event.target.value as TargetType; setShareType(next); setShareTargetId((next === "user" ? targets.users : targets.groups)[0]?.id || ""); }}><option value="user">User</option><option value="group">Group</option></select></FormField>
        <FormField label="User or group"><select value={shareTargetId} onChange={(event) => setShareTargetId(event.target.value)}><option value="">Select…</option>{shareTargetOptions.map((item) => <option key={item.id} value={item.id}>{item.name}{item.secondary ? ` · ${item.secondary}` : ""}</option>)}</select></FormField>
        <FormField label="Access"><select value={sharePermission} onChange={(event) => setSharePermission(event.target.value as "read" | "write")}><option value="read">Can view</option><option value="write">Can edit and operate</option></select></FormField>
      </Dialog>

      <ConfirmDialog open={Boolean(revokeTarget)} title="Remove campaign share" message="Remove this user's or group's explicit access to the campaign? Ownership and other group shares still apply." confirmLabel="Remove share" tone="danger" busy={busy} onCancel={() => setRevokeTarget(null)} onConfirm={() => void revoke()} />
    </>
  );
}