"use client";
import * as React from "react";
import { useRouter } from "next/navigation";
import { MailPlus, Send, Trash2, UserPlus } from "lucide-react";
import { allowEmails, resendInvite, revokeAllow } from "@/actions/access";
import type { AdminActionResult } from "@/actions/admin";
import { Button } from "@/components/ui/button";
import { Input, Textarea } from "@/components/ui/input";
import { Field, Hint, Label } from "@/components/ui/label";
import { Switch } from "@/components/ui/switch";
import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle } from "@/components/ui/dialog";
import { ActionButton, ResultMessage } from "./action-button";

export function AddEmailsDialog({ variant = "primary" }: { variant?: "primary" | "outline" }) {
  const router = useRouter();
  const [open, setOpen] = React.useState(false);
  const [pending, start] = React.useTransition();
  const [emails, setEmails] = React.useState("");
  const [note, setNote] = React.useState("");
  const [sendInvite, setSendInvite] = React.useState(true);
  const [result, setResult] = React.useState<AdminActionResult<{ added: number; existing: number; invited: number }> | null>(null);

  const count = emails.split(/[\s,;]+/).filter((s) => s.includes("@")).length;

  const reset = () => {
    setEmails("");
    setNote("");
    setSendInvite(true);
    setResult(null);
  };

  return (
    <>
      <Button variant={variant} size="sm" onClick={() => setOpen(true)}>
        <UserPlus className="size-3.5" /> Add emails
      </Button>
      <Dialog
        open={open}
        onOpenChange={(v) => {
          setOpen(v);
          if (!v) reset();
        }}
      >
        <DialogContent size="md">
          <DialogHeader>
            <DialogTitle>Add emails to the access list</DialogTitle>
            <DialogDescription>Only listed addresses can create an account. Paste one or many emails separated by commas, spaces or new lines.</DialogDescription>
          </DialogHeader>
          <form
            className="grid gap-3"
            onSubmit={(e) => {
              e.preventDefault();
              start(async () => {
                const r = await allowEmails({ emails, note, sendInvite });
                setResult(r);
                if (r.ok) {
                  router.refresh();
                  if (!r.warning) {
                    setOpen(false);
                    reset();
                  } else {
                    setEmails("");
                  }
                }
              });
            }}
          >
            <Field>
              <Label htmlFor="access-emails">Emails</Label>
              <Textarea id="access-emails" value={emails} onChange={(e) => setEmails(e.target.value)} placeholder={"ada@example.com\ngrace@example.com, linus@example.com"} className="min-h-[120px] font-mono text-[12.5px]" required autoFocus />
              <Hint>{count === 0 ? "Addresses are lower-cased and de-duplicated." : `${count} address${count === 1 ? "" : "es"} detected. Existing entries are kept (the note is updated when provided).`}</Hint>
            </Field>
            <Field>
              <Label htmlFor="access-note">
                Note <span className="font-normal text-fg-subtle">(optional)</span>
              </Label>
              <Input id="access-note" value={note} onChange={(e) => setNote(e.target.value)} placeholder="e.g. Acme data team, pilot Q4" maxLength={280} />
              <Hint>Internal only — never shown to the invitee.</Hint>
            </Field>
            <div className="flex items-start gap-3 rounded-md border border-border bg-bg-subtle/60 px-3 py-2.5">
              <Switch id="access-send" checked={sendInvite} onCheckedChange={setSendInvite} aria-label="Send invitation email" />
              <div className="grid gap-0.5">
                <Label htmlFor="access-send">Send invitation email</Label>
                <Hint>Each address receives “You&apos;re invited to Fetcha” with a link to the signup page, pre-filled with their email. You can resend it later.</Hint>
              </div>
            </div>
            {result && result.ok ? (
              <p role="status" className="text-[12.5px] text-success">
                {result.data ? `${result.data.added} added, ${result.data.existing} already listed${sendInvite ? `, ${result.data.invited} invitation${result.data.invited === 1 ? "" : "s"} sent` : ""}.` : "Saved."}
              </p>
            ) : null}
            <ResultMessage result={result && (!result.ok || result.warning) ? result : null} />
            <DialogFooter>
              <Button type="button" variant="outline" onClick={() => setOpen(false)}>
                {result?.ok ? "Close" : "Cancel"}
              </Button>
              <Button type="submit" variant="primary" loading={pending} disabled={count === 0}>
                {sendInvite ? (
                  <>
                    <Send className="size-3.5" /> Add and invite
                  </>
                ) : (
                  <>
                    <UserPlus className="size-3.5" /> Add to list
                  </>
                )}
              </Button>
            </DialogFooter>
          </form>
        </DialogContent>
      </Dialog>
    </>
  );
}

export function ResendInviteButton({ email, invitedBefore }: { email: string; invitedBefore: boolean }) {
  return (
    <ActionButton
      variant="outline"
      size="xs"
      aria-label={`${invitedBefore ? "Resend" : "Send"} invitation to ${email}`}
      action={() => resendInvite(email)}
      confirm={{
        title: `${invitedBefore ? "Resend" : "Send"} the invitation to ${email}?`,
        description: "An email with a link to the signup page (pre-filled with this address) is sent from hello@fetcha.co.",
        confirmLabel: invitedBefore ? "Resend invite" : "Send invite",
        variant: "primary",
      }}
    >
      <MailPlus className="size-3.5" /> {invitedBefore ? "Resend invite" : "Send invite"}
    </ActionButton>
  );
}

export function RemoveAllowButton({ email, hasAccount }: { email: string; hasAccount: boolean }) {
  return (
    <ActionButton
      variant="ghost"
      size="icon-sm"
      aria-label={`Remove ${email} from the access list`}
      disabled={hasAccount}
      title={hasAccount ? "This address already has an account; ban the user instead." : undefined}
      action={() => revokeAllow(email)}
      confirm={{ title: `Remove ${email}?`, description: "The address will no longer be able to create an account. Existing accounts are not affected.", confirmLabel: "Remove" }}
    >
      <Trash2 className="size-3.5 text-fg-subtle" />
    </ActionButton>
  );
}