"use client";

/**
 * ShareDialog — page-level sharing (core PageShare model):
 *   PUT /pages/:id/share  { level: view|edit|public, password?, expiresAt? }
 *     → { url, slug, level, expiresAt }
 *   POST /pages/:id/invites { email, role }
 *
 * Level semantics (core share page): view = read-only, edit = editable,
 * public = anyone-with-link. Password + expiry are optional hardening.
 *
 * Reusable from the top bar / page menu; reads + writes the shared link
 * state under ["pages", pageId, "share"] (same cache key the /share route
 * page uses).
 */
import { useMemo, useState } from "react";
import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
import { Check, Copy, Link2, Loader2, Lock, Mail } from "lucide-react";
import { apiFetch, pageApi } from "@/lib/api";
import { toast } from "@/stores/ui-store";
import { User, WorkspaceRole } from "@/lib/types";
import { Dialog } from "@/components/dialogs/dialog";

const LEVELS: { value: "view" | "edit" | "public"; label: string; description: string }[] = [
  { value: "view", label: "Can view", description: "Read-only access to this page." },
  { value: "edit", label: "Can edit", description: "Can edit this page and its sub-pages." },
  { value: "public", label: "Anyone with the link", description: "No sign-in required." }
];

const ROLES: { value: WorkspaceRole; label: string }[] = [
  { value: "member", label: "Member" },
  { value: "guest", label: "Guest (read-only)" }
];

export interface ShareDialogProps {
  open: boolean;
  pageId: string;
  pageTitle?: string;
  /** For the invite-by-email affordance (members list is not needed here). */
  members?: User[];
  onClose: () => void;
}

export function ShareDialog({ open, pageId, pageTitle, members, onClose }: ShareDialogProps) {
  const qc = useQueryClient();
  const [level, setLevel] = useState<"view" | "edit" | "public">("view");
  const [password, setPassword] = useState("");
  const [copied, setCopied] = useState(false);
  const [email, setEmail] = useState("");
  const [role, setRole] = useState<WorkspaceRole>("member");

  const share = useQuery({
    queryKey: ["pages", pageId, "share"],
    queryFn: async () => {
      try {
        return await pageApi.share(pageId, { level: "view" });
      } catch {
        return null;
      }
    },
    enabled: open && !!pageId,
    retry: false
  });

  const saveShare = useMutation({
    mutationFn: (input: { level: "view" | "edit" | "public"; password?: string | null }) =>
      pageApi.share(pageId, input),
    onSuccess: (data) => {
      qc.setQueryData(["pages", pageId, "share"], data);
      setLevel(data.level);
      toast("success", "Share settings saved");
    },
    onError: (e) => toast("error", "Save failed", (e as Error).message)
  });

  const invite = useMutation({
    mutationFn: (input: { email: string; role: WorkspaceRole }) =>
      apiFetch<{ id: string }>(`/pages/${pageId}/invites`, { method: "POST", body: input }),
    onSuccess: () => {
      toast("success", "Invitation sent", email);
      setEmail("");
    },
    onError: (e) => toast("error", "Invite failed", (e as Error).message)
  });

  const shareUrl = useMemo(() => {
    if (share.data?.url) return share.data.url;
    if (typeof window === "undefined" || !pageId) return "";
    return `${window.location.origin}/share/${pageId}`;
  }, [share.data, pageId]);

  const copyLink = async () => {
    try {
      await navigator.clipboard.writeText(shareUrl);
      setCopied(true);
      setTimeout(() => setCopied(false), 2000);
    } catch {
      toast("error", "Copy failed", "Select the link text and copy manually.");
    }
  };

  const levelChanged = share.data ? share.data.level !== level : true;
  const passwordChanged = share.data ? (share.data.password ?? "") !== password : !!password;

  return (
    <Dialog open={open} title="Share" description={pageTitle ? `Share “${pageTitle}”` : "Share this page"} onClose={onClose} width="max-w-md">
      <div className="space-y-5">
        {/* link */}
        <div>
          <label className="mb-1.5 block text-xs font-medium text-muted-foreground">Share link</label>
          <div className="flex items-center gap-2">
            <div className="flex min-w-0 flex-1 items-center gap-1.5 rounded-md border border-input bg-muted/30 px-2.5 py-1.5 text-sm">
              <Link2 className="size-3.5 shrink-0 text-muted-foreground" aria-hidden />
              <span className="truncate">{shareUrl || "No link yet"}</span>
            </div>
            <button
              type="button"
              className="inline-flex items-center gap-1 rounded-md border px-2.5 py-1.5 text-sm hover:bg-muted"
              onClick={copyLink}
              disabled={!shareUrl}
            >
              {copied ? <Check className="size-3.5 text-emerald-600" /> : <Copy className="size-3.5" />}
              {copied ? "Copied" : "Copy"}
            </button>
          </div>
        </div>

        {/* level */}
        <div>
          <label className="mb-1.5 block text-xs font-medium text-muted-foreground">Who can access</label>
          <div className="space-y-1.5">
            {LEVELS.map((l) => (
              <label
                key={l.value}
                className={
                  "flex cursor-pointer items-start gap-2.5 rounded-md border p-2.5 " +
                  (level === l.value ? "border-primary bg-primary/5" : "border-border hover:bg-muted/50")
                }
              >
                <input
                  type="radio"
                  name="share-level"
                  className="mt-0.5 size-3.5 accent-[oklch(var(--primary))]"
                  checked={level === l.value}
                  onChange={() => setLevel(l.value)}
                />
                <span>
                  <span className="block text-sm font-medium">{l.label}</span>
                  <span className="block text-xs text-muted-foreground">{l.description}</span>
                </span>
              </label>
            ))}
          </div>
        </div>

        {/* password (optional) */}
        <div>
          <label className="mb-1.5 flex items-center gap-1 text-xs font-medium text-muted-foreground">
            <Lock className="size-3" aria-hidden /> Password (optional)
          </label>
          <input
            className="w-full rounded-md border border-input bg-background px-2.5 py-1.5 text-sm outline-none focus-visible:ring-1 focus-visible:ring-ring"
            placeholder="No password"
            value={password}
            onChange={(e) => setPassword(e.target.value)}
          />
        </div>

        <button
          type="button"
          className="w-full rounded-md bg-primary px-3 py-1.5 text-sm font-medium text-primary-foreground hover:opacity-90 disabled:opacity-50"
          disabled={saveShare.isPending || (!levelChanged && !passwordChanged)}
          onClick={() =>
            saveShare.mutate({ level, password: password || null })
          }
        >
          {saveShare.isPending ? (
            <span className="inline-flex items-center gap-1.5">
              <Loader2 className="size-3.5 animate-spin" /> Saving…
            </span>
          ) : (
            "Save share settings"
          )}
        </button>

        {/* invite by email */}
        <div className="border-t border-border pt-4">
          <label className="mb-1.5 flex items-center gap-1 text-xs font-medium text-muted-foreground">
            <Mail className="size-3" aria-hidden /> Invite by email
          </label>
          <div className="flex items-center gap-1.5">
            <input
              type="email"
              className="min-w-0 flex-1 rounded-md border border-input bg-background px-2.5 py-1.5 text-sm outline-none focus-visible:ring-1 focus-visible:ring-ring"
              placeholder="name@example.com"
              value={email}
              onChange={(e) => setEmail(e.target.value)}
              onKeyDown={(e) => {
                if (e.key === "Enter" && email.trim()) invite.mutate({ email: email.trim(), role });
              }}
            />
            <select
              className="rounded-md border border-input bg-background px-1.5 py-1.5 text-sm outline-none"
              value={role}
              onChange={(e) => setRole(e.target.value as WorkspaceRole)}
              aria-label="Invite role"
            >
              {ROLES.map((r) => (
                <option key={r.value} value={r.value}>
                  {r.label}
                </option>
              ))}
            </select>
            <button
              type="button"
              className="rounded-md border px-2.5 py-1.5 text-sm hover:bg-muted disabled:opacity-50"
              disabled={!email.trim() || invite.isPending}
              onClick={() => invite.mutate({ email: email.trim(), role })}
            >
              {invite.isPending ? <Loader2 className="size-3.5 animate-spin" /> : "Invite"}
            </button>
          </div>
          {members && members.length > 0 && (
            <p className="mt-1.5 text-[11px] text-muted-foreground">
              Already a member: {members.slice(0, 4).map((m) => m.name).join(", ")}
              {members.length > 4 ? ` +${members.length - 4} more` : ""}
            </p>
          )}
        </div>
      </div>
    </Dialog>
  );
}