"use client";

import { FormEvent, useState } from "react";
import { useRouter } from "next/navigation";
import { Loader2, UserPlus } from "lucide-react";
import { Button } from "@/components/ui/button";
import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogHeader,
  DialogTitle,
} from "@/components/ui/dialog";
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";
import { notify } from "@/lib/notifications/store";

interface SecretRegisterDialogProps {
  open: boolean;
  onOpenChange: (open: boolean) => void;
}

export function SecretRegisterDialog({ open, onOpenChange }: SecretRegisterDialogProps) {
  const router = useRouter();
  const [email, setEmail] = useState("");
  const [password, setPassword] = useState("");
  const [name, setName] = useState("");
  const [loading, setLoading] = useState(false);

  async function handleSubmit(event: FormEvent) {
    event.preventDefault();
    setLoading(true);

    try {
      const res = await fetch("/api/auth/register", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({
          email,
          password,
          name: name.trim() || undefined,
        }),
      });
      const data = await res.json();

      if (!res.ok) {
        notify({ type: "error", title: data.error ?? "註冊失敗" });
        setLoading(false);
        return;
      }

      notify({ type: "success", title: "新帳號已建立", message: "已切換至新帳號" });
      onOpenChange(false);
      setEmail("");
      setPassword("");
      setName("");

      if (data.needsThreadsBind) {
        router.replace("/matrix?bind_threads=1");
        return;
      }
      router.replace("/matrix");
    } catch {
      notify({ type: "error", title: "連線失敗，請稍後再試" });
      setLoading(false);
    }
  }

  return (
    <Dialog open={open} onOpenChange={onOpenChange}>
      <DialogContent>
        <DialogHeader>
          <DialogTitle>註冊新帳號</DialogTitle>
          <DialogDescription>建立新的巡樓使用者帳號（建立後會自動切換登入）。</DialogDescription>
        </DialogHeader>
        <form className="space-y-4" onSubmit={handleSubmit}>
          <div className="space-y-2">
            <Label htmlFor="secret-register-name">名稱（選填）</Label>
            <Input
              id="secret-register-name"
              value={name}
              onChange={(event) => setName(event.target.value)}
              placeholder="你的名字"
              autoComplete="name"
            />
          </div>
          <div className="space-y-2">
            <Label htmlFor="secret-register-email">Email</Label>
            <Input
              id="secret-register-email"
              type="email"
              value={email}
              onChange={(event) => setEmail(event.target.value)}
              placeholder="you@example.com"
              autoComplete="email"
              required
            />
          </div>
          <div className="space-y-2">
            <Label htmlFor="secret-register-password">密碼</Label>
            <Input
              id="secret-register-password"
              type="password"
              value={password}
              onChange={(event) => setPassword(event.target.value)}
              placeholder="至少 6 個字元"
              autoComplete="new-password"
              required
            />
          </div>
          <Button className="w-full" type="submit" disabled={loading}>
            {loading ? <Loader2 className="h-4 w-4 animate-spin" /> : <UserPlus className="h-4 w-4" />}
            註冊
          </Button>
        </form>
      </DialogContent>
    </Dialog>
  );
}