"use client";

/**
 * TASK-0133 — Policies tab: the FIVE org policy controls.
 *
 *   require2FA              — org members must complete 2FA at login
 *   ssoEnforced             — password login blocked for SSO-enabled orgs
 *   disableGuestPublicShare — guest public shares are blocked (403 at the
 *                             share + public-access points)
 *   maxFileSizeMB           — org cap on single-file size (tightens the plan
 *                             cap; the effective value = min(org, plan))
 *   sessionLifetimeHours    — org cap on session lifetime (non-sliding; the
 *                             effective value is MAX across the orgs you are
 *                             in, per the session contract)
 *   allowExternalEmbeds     — the authoritative embed-preview gate
 *
 * Every change is server-side `assertOrgAdmin`-gated + audited
 * (`org.policy.updated`). The plan cap is shown next to `maxFileSizeMB` —
 * the server enforces min(org, plan), so an over-cap value is clamped.
 */
import { useState } from "react";
import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
import { orgAdminApi, type OrgPolicy } from "@/lib/org-admin";
import { isApiError } from "@/lib/api";
import { toast } from "@/stores/ui-store";
import { Section, Field, inputCls } from "@/components/settings/settings-shell";
import { ConfirmDialog } from "@/components/ui/confirm-dialog";

const TOGGLES: { key: keyof OrgPolicy; label: string; description: string }[] = [
  { key: "require2FA", label: "Require 2FA", description: "Members must complete two-factor authentication at login." },
  { key: "ssoEnforced", label: "Enforce SSO", description: "Password login is blocked when an SSO provider is configured." },
  { key: "disableGuestPublicShare", label: "Disable guest public shares", description: "Guests cannot create or open public shares (403)." },
  { key: "allowExternalEmbeds", label: "Allow external embeds", description: "Pages can be embedded on external sites (the embed preview enforces this)." },
];

export function AdminPoliciesTab({ orgId }: { orgId: string }) {
  const qc = useQueryClient();
  const policy = useQuery({
    queryKey: ["orgs", orgId, "admin", "policy"],
    queryFn: () => orgAdminApi.policy(orgId),
    retry: false,
  });

  const patch = useMutation({
    mutationFn: (body: Partial<OrgPolicy>) => orgAdminApi.policyPatch(orgId, body),
    onSuccess: () => {
      toast("success", "Policy updated");
      qc.invalidateQueries({ queryKey: ["orgs", orgId, "admin", "policy"] });
    },
    onError: (e) => toast("error", "Could not update policy", isApiError(e) ? e.message : undefined),
  });

  if (policy.isLoading || !policy.data) {
    return <p className="text-sm text-muted-foreground" role="status">Loading policy…</p>;
  }
  if (policy.isError) return <p className="text-sm text-destructive" role="alert">Could not load the policy.</p>;
  // Keyed by the loaded policy so the draft fields re-seed after each save
  // (and the hooks stay unconditional inside PolicyForm).
  return <PolicyForm key={JSON.stringify(policy.data.policy)} p={policy.data} patch={patch} />;
}

function PolicyForm({
  p,
  patch,
}: {
  p: { policy: OrgPolicy; effective: { maxFileSizeMB: number; billingPlan: string } };
  patch: { isPending: boolean; mutate: (body: Partial<OrgPolicy>) => void };
}) {
  const [confirm2FA, setConfirm2FA] = useState(false);
  const [maxFile, setMaxFile] = useState<number | null>(p.policy.maxFileSizeMB);
  const [sessionLife, setSessionLife] = useState<number | null>(p.policy.sessionLifetimeHours);

  return (
    <div className="space-y-6">
      <Section title="Security" description="These are enforced server-side at their respective API points.">
        <div className="space-y-4">
          {TOGGLES.map((t) => (
            <div key={t.key} className="flex items-start justify-between gap-4">
              <div>
                <div className="text-sm font-medium">{t.label}</div>
                <div className="text-xs text-muted-foreground">{t.description}</div>
              </div>
              <button
                type="button"
                role="switch"
                aria-checked={Boolean(p.policy[t.key])}
                aria-label={t.label}
                disabled={patch.isPending}
                onClick={() => {
                  if (t.key === "require2FA" && !p.policy.require2FA) {
                    setConfirm2FA(true);
                    return;
                  }
                  patch.mutate({ [t.key]: !p.policy[t.key] } as Partial<OrgPolicy>);
                }}
                className={
                  "relative h-5 w-9 shrink-0 rounded-full transition-colors disabled:opacity-50 " +
                  (p.policy[t.key] ? "bg-primary" : "bg-muted-foreground/30")
                }
              >
                <span
                  className={
                    "absolute top-0.5 size-4 rounded-full bg-background transition-transform " +
                    (p.policy[t.key] ? "translate-x-4" : "translate-x-0.5")
                  }
                />
              </button>
            </div>
          ))}
        </div>
      </Section>

      <Section
        title="Limits"
        description={`Plan: ${p.effective.billingPlan} (the server caps the effective max file size at the plan limit).`}
      >
        <div className="grid gap-4 sm:grid-cols-2">
          <Field label="Max file size (MB)" hint={`Effective: ${p.effective.maxFileSizeMB} MB (plan-capped)`}>
            <div className="flex gap-2">
              <input
                type="number"
                min={1}
                max={10240}
                value={maxFile ?? ""}
                onChange={(e) => setMaxFile(e.target.value === "" ? null : Number(e.target.value))}
                className={inputCls}
                aria-label="Max file size in megabytes"
              />
              <button
                type="button"
                onClick={() => patch.mutate({ maxFileSizeMB: maxFile ?? null })}
                disabled={patch.isPending || maxFile === p.policy.maxFileSizeMB}
                className="rounded-md border border-input px-3 py-1.5 text-sm font-medium hover:bg-muted disabled:opacity-50"
              >
                Save
              </button>
            </div>
          </Field>
          <Field label="Session lifetime (hours)" hint="1–720. The effective lifetime is the MAX across your orgs.">
            <div className="flex gap-2">
              <input
                type="number"
                min={1}
                max={720}
                value={sessionLife ?? ""}
                onChange={(e) => setSessionLife(e.target.value === "" ? null : Number(e.target.value))}
                className={inputCls}
                aria-label="Session lifetime in hours"
              />
              <button
                type="button"
                onClick={() => patch.mutate({ sessionLifetimeHours: sessionLife ?? null })}
                disabled={patch.isPending || sessionLife === p.policy.sessionLifetimeHours}
                className="rounded-md border border-input px-3 py-1.5 text-sm font-medium hover:bg-muted disabled:opacity-50"
              >
                Save
              </button>
            </div>
          </Field>
        </div>
      </Section>

      <ConfirmDialog
        open={confirm2FA}
        title="Require 2FA for all members?"
        description="Members without 2FA set up will be prompted on their next login. Existing sessions remain valid until they expire."
        confirmLabel="Require 2FA"
        destructive
        busy={patch.isPending}
        onConfirm={() => {
          setConfirm2FA(false);
          patch.mutate({ require2FA: true });
        }}
        onClose={() => setConfirm2FA(false)}
      />
    </div>
  );
}