"use client";
import { useState } from "react";
import { signIn } from "next-auth/react";
import { useRouter } from "next/navigation";
import Link from "next/link";
import { useI18n } from "@/lib/i18n";
import { useTheme } from "@/app/providers";
import { LanguageSelector } from "@/components/ui/LanguageSelector";

export default function RegisterPage() {
  const router = useRouter();
  const { t } = useI18n();
  const { theme, toggleTheme } = useTheme();

  const [name, setName] = useState("");
  const [email, setEmail] = useState("");
  const [password, setPassword] = useState("");
  const [error, setError] = useState("");
  const [loading, setLoading] = useState(false);

  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault();
    setError("");
    setLoading(true);

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

      if (!res.ok) {
        let msg = "Registration failed.";
        try {
          const data = await res.json();
          msg = data.error || msg;
        } catch {
          msg = "Database connection failed. Please ensure PostgreSQL is running or use Demo Mode.";
        }
        setError(msg);
        setLoading(false);
        return;
      }

      await signIn("credentials", { email, password, redirect: false });
      router.push("/");
    } catch {
      setError("Network or server error. Check database status or try Demo Mode.");
      setLoading(false);
    }
  };

  return (
    <div className="auth-page">
      <div className="auth-card">
        {/* Top bar: Lang & Theme switcher */}
        <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", marginBottom: 20 }}>
          <div className="auth-logo" style={{ marginBottom: 0 }}>
            <div className="auth-logo-icon">✓</div>
            <span className="auth-logo-name">{t("appName")}</span>
          </div>
          <div style={{ display: "flex", alignItems: "center", gap: 6 }}>
            <LanguageSelector />

            <button
              className="icon-btn"
              onClick={toggleTheme}
              title={`${t("theme")}: ${theme}`}
              style={{ width: 28, height: 28 }}
            >
              {theme === "system" ? (
                <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
                  <rect x="2" y="3" width="20" height="14" rx="2" ry="2" /><line x1="8" y1="21" x2="16" y2="21" /><line x1="12" y1="17" x2="12" y2="21" />
                </svg>
              ) : theme === "light" ? (
                <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
                  <circle cx="12" cy="12" r="5" /><line x1="12" y1="1" x2="12" y2="3" /><line x1="12" y1="21" x2="12" y2="23" />
                </svg>
              ) : (
                <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
                  <path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z" />
                </svg>
              )}
            </button>
          </div>
        </div>

        <h1 className="auth-title">{t("createAccount")}</h1>
        <p className="auth-subtitle">{t("createAccountSubtitle")}</p>

        {/* Demo Mode Action Banner */}
        <div
          style={{
            background: "var(--accent-light)",
            border: "1px dashed var(--accent)",
            borderRadius: "var(--radius-md)",
            padding: "12px 14px",
            marginBottom: 20,
            display: "flex",
            flexDirection: "column",
            gap: 6,
          }}
        >
          <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between" }}>
            <span style={{ fontSize: 13, fontWeight: 700, color: "var(--accent)" }}>✨ {t("demoBadge")}</span>
            <span style={{ fontSize: 11, color: "var(--text-tertiary)" }}>No PostgreSQL needed</span>
          </div>
          <p style={{ fontSize: 12, color: "var(--text-secondary)", lineHeight: 1.4 }}>
            Explore full 3-panel UI, sub-tasks, and markdown notes directly in browser storage.
          </p>
          <Link
            href="/demo"
            className="btn btn-primary btn-sm"
            style={{ marginTop: 4, width: "100%", textAlign: "center" }}
            id="try-demo-btn"
          >
            🚀 {t("tryDemoMode")}
          </Link>
        </div>

        <form onSubmit={handleSubmit}>
          <div className="form-group">
            <label className="form-label">{t("displayName")}</label>
            <input
              id="name"
              type="text"
              className="form-input"
              placeholder="Your name"
              value={name}
              onChange={(e) => setName(e.target.value)}
              required
              autoFocus
            />
          </div>
          <div className="form-group">
            <label className="form-label">{t("email")}</label>
            <input
              id="reg-email"
              type="email"
              className="form-input"
              placeholder="you@example.com"
              value={email}
              onChange={(e) => setEmail(e.target.value)}
              required
            />
          </div>
          <div className="form-group">
            <label className="form-label">{t("password")}</label>
            <input
              id="reg-password"
              type="password"
              className="form-input"
              placeholder={t("min8Chars")}
              value={password}
              onChange={(e) => setPassword(e.target.value)}
              required
              minLength={8}
            />
          </div>
          {error && <p className="form-error" style={{ marginBottom: "12px" }}>{error}</p>}
          <button id="register-btn" type="submit" className="btn btn-primary w-full" disabled={loading} style={{ height: "44px" }}>
            {loading ? t("creatingBtn") : t("createBtn")}
          </button>
        </form>
        <p className="auth-footer">
          {t("alreadyHaveAccount")}{" "}
          <Link href="/login" className="auth-link">{t("signIn")}</Link>
        </p>
      </div>
    </div>
  );
}