"use client";

/**
 * FilePermissionsDialog — file-level permission overrides (TASK-0104 §2).
 *
 * Targets the FILE `Permission` grants table (`GET/PUT /files/:id/permissions`),
 * NOT the page-share model: explicit grants on a single file, where the
 * DEFAULT is inherit (no explicit grant) and `NONE` is an EXPLICIT DENY
 * (overrides inheritance/role). Styled on ShareDialog (grant rows + add row).
 *
 * The API REPLACES the grant set on every save (full-desired-set PUT), so the
 * dialog edits a local copy of the grants and persists atomically. The
 * frontend is never trusted for authorization — the API enforces EDIT on the
 * file; this UI only renders and sends.
 */
import { useEffect, useMemo, useRef, useState } from "react";
import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
import { Loader2, Plus, Shield, Trash2 } from "lucide-react";
import { toast } from "@/stores/ui-store";
import { workspaceApi } from "@/lib/api";
import {
  filesApi,
  type FileGrant,
  type FilePermissionGrantInput,
} from "@/lib/files/api";
import { Dialog } from "@/components/dialogs/dialog";
import type { Team, WorkspaceMember } from "@/lib/types";

export type FilePermissionLevel = "NONE" | "VIEW" | "COMMENT" | "EDIT" | "FULL_ACCESS";

const LEVELS: { value: FilePermissionLevel; label: string; description: string }[] = [
  { value: "NONE", label: "No access", description: "Explicit deny — overrides inheritance." },
  { value: "VIEW", label: "Can view", description: "Read/download this file only." },
  { value: "COMMENT", label: "Can comment", description: "View + comment on this file." },
  { value: "EDIT", label: "Can edit", description: "Rename, replace, manage versions." },
  { value: "FULL_ACCESS", label: "Full access", description: "Everything, including purge + permissions." }
];

/** Role grants use the role NAME as granteeId (backend contract). */
const ROLES: { id: string; label: string }[] = [
  { id: "OWNER", label: "Owners" },
  { id: "ADMIN", label: "Admins" },
  { id: "MEMBER", label: "Members" },
  { id: "GUEST", label: "Guests" }
];

type GranteeType = "user" | "team" | "role";
interface GranteeOption {
  type: GranteeType;
  id: string;
  label: string;
  sub?: string;
}

export interface FilePermissionsDialogProps {
  open: boolean;
  fileId: string;
  fileName?: string;
  workspaceId: string;
  onClose: () => void;
}

export function FilePermissionsDialog({ open, fileId, fileName, workspaceId, onClose }: FilePermissionsDialogProps) {
  const qc = useQueryClient();

  const members = useQuery({
    queryKey: ["workspaces", workspaceId, "members"],
    queryFn: () => workspaceApi.members(workspaceId),
    enabled: open && workspaceId.length > 0,
    staleTime: 60_000
  });
  const teams = useQuery({
    queryKey: ["workspaces", workspaceId, "teams"],
    queryFn: () => workspaceApi.teams(workspaceId),
    enabled: open && workspaceId.length > 0,
    staleTime: 60_000
  });

  const grantsQuery = useQuery({
    queryKey: ["files", fileId, "permissions"],
    queryFn: () => filesApi.listPermissions(fileId, { workspaceId }),
    enabled: open && !!fileId,
    retry: false
  });

  // Local editable copy (the PUT replaces the whole set). Initialized ONCE
  // per open from the server grants — when the query first resolves — so an
  // unsaved edit is never clobbered by a refetch, and a fast "Save" before
  // the list loads can't wipe the real grants (Save stays disabled until
  // initialized).
  const [grants, setGrants] = useState<FilePermissionGrantInput[]>([]);
  const initializedRef = useRef(false);
  useEffect(() => {
    if (!open) {
      initializedRef.current = false;
      setGrants([]);
      return;
    }
    if (!initializedRef.current && grantsQuery.data) {
      initializedRef.current = true;
      setGrants(
        grantsQuery.data.map((g) => ({ granteeType: g.granteeType, granteeId: g.granteeId, level: g.level }))
      );
    }
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [open, grantsQuery.data]);
  // "Loaded" = the grants list actually resolved (Save/Add stay disabled on
  // an error, e.g. 403 no-edit-access, so a stale/empty set can't be pushed).
  const grantsLoaded = open && initializedRef.current;

  const [newType, setNewType] = useState<GranteeType>("user");
  const [newId, setNewId] = useState("");
  const [newLevel, setNewLevel] = useState<FilePermissionLevel>("VIEW");

  const options = useMemo<GranteeOption[]>(() => {
    const out: GranteeOption[] = [];
    const m: WorkspaceMember[] = members.data ?? [];
    for (const mem of m) out.push({ type: "user", id: mem.userId, label: mem.user.name, sub: mem.user.email });
    const t: Team[] = teams.data ?? [];
    for (const team of t) out.push({ type: "team", id: team.id, label: team.name, sub: "Team" });
    for (const r of ROLES) out.push({ type: "role", id: r.id, label: r.label, sub: "Role" });
    return out;
  }, [members.data, teams.data]);

  const save = useMutation({
    mutationFn: (input: FilePermissionGrantInput[]) => filesApi.setPermissions(fileId, input, { workspaceId }),
    onSuccess: (data) => {
      qc.setQueryData(["files", fileId, "permissions"], data);
      setGrants(data.map((g: FileGrant) => ({ granteeType: g.granteeType, granteeId: g.granteeId, level: g.level })));
      toast("success", "Permissions saved");
    },
    onError: (e) => toast("error", "Save failed", e instanceof Error ? e.message : undefined)
  });

  const reset = useMutation({
    mutationFn: () => filesApi.setPermissions(fileId, [], { workspaceId }),
    onSuccess: (data) => {
      qc.setQueryData(["files", fileId, "permissions"], data);
      setGrants([]);
      toast("success", "All overrides removed", "The file inherits workspace permissions.");
    },
    onError: (e) => toast("error", "Reset failed", e instanceof Error ? e.message : undefined)
  });

  const removeGrant = (idx: number) => setGrants((g) => g.filter((_, i) => i !== idx));
  const setLevel = (idx: number, level: FilePermissionLevel) =>
    setGrants((g) => g.map((grant, i) => (i === idx ? { ...grant, level } : grant)));

  const addGrant = () => {
    const opt = options.find((o) => o.type === newType && o.id === newId);
    if (!opt) return;
    // one grant per grantee: re-level the existing row instead of duplicating
    if (grants.some((g) => g.granteeType === newType && g.granteeId === newId)) {
      setGrants((g) => g.map((grant) => (grant.granteeType === newType && grant.granteeId === newId ? { ...grant, level: newLevel } : grant)));
      return;
    }
    setGrants((g) => [...g, { granteeType: newType, granteeId: newId, level: newLevel }]);
    setNewId("");
  };

  const granteeLabel = (g: FilePermissionGrantInput): string => {
    const opt = options.find((o) => o.type === g.granteeType && o.id === g.granteeId);
    return opt ? opt.label : g.granteeId;
  };

  return (
    <Dialog
      open={open}
      onClose={onClose}
      title="File permissions"
      description={
        <>
          Explicit overrides for <span className="font-medium text-foreground">{fileName ?? "this file"}</span>.
          No override = inherit workspace permissions. &ldquo;No access&rdquo; is an explicit deny.
        </>
      }
      width="max-w-xl"
      footer={
        <>
          <button
            type="button"
            onClick={onClose}
            disabled={save.isPending}
            className="rounded-md border border-border bg-background px-3 py-1.5 text-sm font-medium hover:bg-accent disabled:opacity-50"
          >
            Cancel
          </button>
          <button
            type="button"
            onClick={() => save.mutate(grants)}
            disabled={save.isPending || !grantsLoaded}
            className="rounded-md bg-primary px-3 py-1.5 text-sm font-medium text-primary-foreground hover:opacity-90 disabled:opacity-50"
          >
            {save.isPending ? "Saving…" : "Save changes"}
          </button>
        </>
      }
    >
      <div className="space-y-4">
        {/* existing grants (error → no placeholder; the message below explains) */}
        {!grantsLoaded && !grantsQuery.isError ? (
          <p className="flex items-center gap-2 rounded-md border border-dashed border-border px-3 py-4 text-center text-sm text-muted-foreground">
            <Loader2 className="size-4 animate-spin" aria-hidden />
            Loading permissions…
          </p>
        ) : grantsLoaded && grants.length === 0 ? (
          <p className="rounded-md border border-dashed border-border px-3 py-4 text-center text-sm text-muted-foreground">
            No explicit grants — this file inherits workspace permissions.
          </p>
        ) : (
          <ul className="space-y-2">
            {grants.map((g, idx) => {
              const denied = g.level === "NONE";
              return (
                <li key={`${g.granteeType}:${g.granteeId}`} className="flex items-center gap-2">
                  <span className="flex size-8 shrink-0 items-center justify-center rounded bg-muted text-muted-foreground">
                    <Shield className="size-4" aria-hidden />
                  </span>
                  <span className="min-w-0 flex-1 truncate text-sm font-medium">
                    {granteeLabel(g)}
                    <span className="ml-1.5 text-xs font-normal text-muted-foreground">
                      ({g.granteeType === "role" ? "role" : g.granteeType === "team" ? "team" : "member"})
                    </span>
                  </span>
                  <select
                    value={g.level}
                    onChange={(e) => setLevel(idx, e.target.value as FilePermissionLevel)}
                    aria-label={`Permission level for ${granteeLabel(g)}`}
                    className={`rounded-md border px-2 py-1.5 text-sm ${denied ? "border-red-300 bg-red-50 text-red-700 dark:border-red-900 dark:bg-red-950 dark:text-red-300" : "border-border bg-background"}`}
                  >
                    {LEVELS.map((l) => (
                      <option key={l.value} value={l.value}>
                        {l.label}
                      </option>
                    ))}
                  </select>
                  <button
                    type="button"
                    onClick={() => removeGrant(idx)}
                    aria-label={`Remove grant for ${granteeLabel(g)}`}
                    className="rounded p-1.5 text-muted-foreground hover:bg-accent hover:text-foreground"
                  >
                    <Trash2 className="size-4" aria-hidden />
                  </button>
                </li>
              );
            })}
          </ul>
        )}

        {/* add a grant */}
        <div className="rounded-md border border-border p-3">
          <p className="mb-2 text-sm font-medium">Add an override</p>
          <div className="flex flex-wrap items-center gap-2">
            <select
              value={newType}
              onChange={(e) => {
                setNewType(e.target.value as GranteeType);
                setNewId("");
              }}
              aria-label="Grantee type"
              className="rounded-md border border-border bg-background px-2 py-1.5 text-sm"
            >
              <option value="user">Member</option>
              <option value="team">Team</option>
              <option value="role">Role</option>
            </select>
            <select
              value={newId}
              onChange={(e) => setNewId(e.target.value)}
              aria-label="Grantee"
              className="min-w-40 flex-1 rounded-md border border-border bg-background px-2 py-1.5 text-sm"
            >
              <option value="" disabled>
                {members.isLoading || teams.isLoading ? "Loading…" : "Choose…"}
              </option>
              {options
                .filter((o) => o.type === newType)
                .map((o) => (
                  <option key={`${o.type}:${o.id}`} value={o.id}>
                    {o.label}
                    {o.sub ? ` — ${o.sub}` : ""}
                  </option>
                ))}
            </select>
            <select
              value={newLevel}
              onChange={(e) => setNewLevel(e.target.value as FilePermissionLevel)}
              aria-label="Permission level"
              className="rounded-md border border-border bg-background px-2 py-1.5 text-sm"
            >
              {LEVELS.map((l) => (
                <option key={l.value} value={l.value}>
                  {l.label}
                </option>
              ))}
            </select>
            <button
              type="button"
              onClick={addGrant}
              disabled={!newId || !grantsLoaded || save.isPending}
              className="flex items-center gap-1 rounded-md border px-2.5 py-1.5 text-sm font-medium hover:bg-muted disabled:opacity-50"
            >
              <Plus className="size-3.5" aria-hidden />
              Add
            </button>
          </div>
          {(() => {
            const lvl = LEVELS.find((l) => l.value === newLevel);
            return lvl ? <p className="mt-1.5 text-[11px] text-muted-foreground">{lvl.description}</p> : null;
          })()}
        </div>

        {/* reset (remove all overrides → back to inherit) */}
        {grants.length > 0 && (
          <div className="flex items-center justify-between gap-2">
            <p className="text-[11px] text-muted-foreground">
              Removing all overrides restores inherited permissions.
            </p>
            <button
              type="button"
              onClick={() => reset.mutate()}
              disabled={reset.isPending || save.isPending}
              className="shrink-0 rounded-md border border-red-300 px-2.5 py-1.5 text-sm font-medium text-red-600 hover:bg-red-50 disabled:opacity-50 dark:border-red-900 dark:text-red-400 dark:hover:bg-red-950"
            >
              {reset.isPending ? "Working…" : "Remove all overrides"}
            </button>
          </div>
        )}

        {grantsQuery.isError && (
          <p className="text-sm text-red-600 dark:text-red-400">
            Could not load permissions ({grantsQuery.error instanceof Error ? grantsQuery.error.message : "unknown"}).
            You may not have edit access to this file.
          </p>
        )}
        {save.isPending && (
          <p className="flex items-center gap-2 text-sm text-muted-foreground">
            <Loader2 className="size-4 animate-spin" aria-hidden /> Saving…
          </p>
        )}
      </div>
    </Dialog>
  );
}