"use client";

/**
 * InviteDialog — compact members + invite dialog (open from page-level
 * surfaces, e.g. a page's share popover).
 *
 * Uses hooks/use-members.ts for the invite call (the real route
 * POST /workspaces/:id/members/invites with UPPERCASE wire roles — the core
 * `workspaceApi.invite` path `/workspaces/:id/invites` 404s, flagged to the
 * core agent) and `useWorkspaceMembers` for the member list. There is no
 * endpoint to list pending invitations, so the dialog surfaces the members
 * list only.
 */
import { useState } from "react";
import { Loader2, Mail, UserPlus } from "lucide-react";
import { toast } from "@/stores/ui-store";
import { useWorkspaceMembers } from "@/hooks/use-workspace";
import { useInviteMember, ASSIGNABLE_ROLES, roleLabel } from "@/hooks/use-members";
import { UserAvatar } from "@/components/database/cell-renderer";
import { Dialog } from "@/components/dialogs/dialog";

export interface InviteDialogProps {
  open: boolean;
  workspaceId: string;
  workspaceName?: string;
  onClose: () => void;
}

export function InviteDialog({ open, workspaceId, workspaceName, onClose }: InviteDialogProps) {
  const members = useWorkspaceMembers(workspaceId);
  const invite = useInviteMember({ workspaceId });

  const [email, setEmail] = useState("");
  const [role, setRole] = useState<string>("MEMBER");

  const submit = () => {
    if (!email.trim()) return;
    invite.mutate(
      { email: email.trim(), role: role as (typeof ASSIGNABLE_ROLES)[number] },
      {
        onSuccess: () => {
          toast("success", "Invitation sent", email.trim());
          setEmail("");
        },
        onError: (e) => toast("error", "Invite failed", (e as Error).message)
      }
    );
  };

  return (
    <Dialog
      open={open}
      title="Members"
      description={workspaceName ? `Manage access to ${workspaceName}` : "Manage workspace access"}
      onClose={onClose}
      width="max-w-md"
    >
      <div className="space-y-5">
        {/* invite form */}
        <div>
          <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) => e.key === "Enter" && submit()}
            />
            <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)}
              aria-label="Role"
            >
              {ASSIGNABLE_ROLES.map((r) => (
                <option key={r} value={r}>
                  {roleLabel(r)}
                </option>
              ))}
            </select>
            <button
              type="button"
              className="inline-flex items-center gap-1 rounded-md bg-primary px-2.5 py-1.5 text-sm font-medium text-primary-foreground hover:opacity-90 disabled:opacity-50"
              disabled={!email.trim() || invite.isPending}
              onClick={submit}
            >
              {invite.isPending ? <Loader2 className="size-3.5 animate-spin" /> : <UserPlus className="size-3.5" />}
              Invite
            </button>
          </div>
        </div>

        {/* members */}
        <div>
          <p className="mb-1.5 text-xs font-medium text-muted-foreground">
            Members ({members.data?.length ?? 0})
          </p>
          {members.isLoading && <p className="text-sm text-muted-foreground">Loading…</p>}
          <ul className="space-y-1">
            {(members.data ?? []).map((m) => (
              <li key={m.userId} className="flex items-center gap-2.5 rounded-md px-2 py-1.5">
                <UserAvatar user={{ id: m.user.id, name: m.user.name, avatarUrl: m.user.image ?? null }} size={26} />
                <div className="min-w-0 flex-1">
                  <p className="truncate text-sm">{m.user.name}</p>
                  <p className="truncate text-xs text-muted-foreground">{m.user.email}</p>
                </div>
                <span className="rounded-full bg-muted px-2 py-0.5 text-[11px] font-medium text-muted-foreground">
                  {roleLabel(m.role)}
                </span>
              </li>
            ))}
          </ul>
        </div>
      </div>
    </Dialog>
  );
}