"use client";

import { useState } from "react";
import AiBioGenerator from "@/components/shared/ai-bio-generator";

interface Props {
  user: {
    id: number;
    email: string;
    username: string | null;
    email_verified_at: Date | null;
    gender: string | null;
    born_at: Date | null;
    status: string | null;
  };
}

export default function AccountInformationForm({ user }: Props) {
  const [saving, setSaving] = useState(false);
  const [message, setMessage] = useState<{ type: "success" | "error"; text: string } | null>(null);
  // Hydrate from server props. Earlier this fired a heavy useEffect→fetch
  // round-trip that re-loaded the entire profile (20+ Prisma includes).
  const [form, setForm] = useState({
    email: user.email || "",
    username: user.username || "",
    gender: user.gender || "",
    born_at: user.born_at ? user.born_at.toISOString().slice(0, 10) : "",
    status: user.status || "",
  });

  function update(field: string, value: string) {
    setForm((prev) => ({ ...prev, [field]: value }));
  }

  const [verifiedAt, setVerifiedAt] = useState<Date | null>(user.email_verified_at);

  async function handleSubmit(e: React.FormEvent) {
    e.preventDefault();
    setSaving(true);
    setMessage(null);
    try {
      const res = await fetch("/api/profile", {
        method: "PUT",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify(form),
      });
      if (!res.ok) throw new Error("Failed to save");
      const data = await res.json();
      // The Verified badge mirrors the server's reply so it disappears in the
      // same render that triggered re-verification.
      if (data?.user?.email_verified_at !== undefined) {
        setVerifiedAt(data.user.email_verified_at ? new Date(data.user.email_verified_at) : null);
      }
      setMessage({
        type: "success",
        text: data?.verification_pending
          ? "Email updated. Check your new inbox for a verification link."
          : "Account information updated successfully.",
      });
    } catch {
      setMessage({ type: "error", text: "Failed to update account information." });
    } finally {
      setSaving(false);
    }
  }

  return (
    <form onSubmit={handleSubmit} className="bg-surface rounded-lg p-6 space-y-4">
      {message && (
        <div className={`p-3 rounded-lg text-sm ${message.type === "success" ? "bg-green-900/30 text-green-400" : "bg-red-900/30 text-red-400"}`}>
          {message.text}
        </div>
      )}
      <div>
        <label className="block text-sm font-medium text-text mb-1">Email</label>
        <input
          type="email"
          required
          value={form.email}
          onChange={(e) => update("email", e.target.value)}
          className="w-full bg-background border border-surface-light rounded-lg px-4 py-2.5 text-text focus:outline-none focus:ring-2 focus:ring-primary"
        />
        {verifiedAt && (
          <p className="text-xs text-green-400 mt-1">Verified</p>
        )}
      </div>
      <div>
        <label className="block text-sm font-medium text-text mb-1">Username</label>
        <input
          type="text"
          required
          value={form.username}
          onChange={(e) => update("username", e.target.value)}
          className="w-full bg-background border border-surface-light rounded-lg px-4 py-2.5 text-text focus:outline-none focus:ring-2 focus:ring-primary"
        />
      </div>
      <div>
        <label className="block text-sm font-medium text-text mb-1">Gender</label>
        <select
          value={form.gender}
          onChange={(e) => update("gender", e.target.value)}
          className="w-full bg-background border border-surface-light rounded-lg px-4 py-2.5 text-text focus:outline-none focus:ring-2 focus:ring-primary"
        >
          <option value="">Select</option>
          <option value="Female">Female</option>
          <option value="Male">Male</option>
          <option value="Trans">Trans</option>
        </select>
      </div>
      <div>
        <label className="block text-sm font-medium text-text mb-1">Date of Birth</label>
        <input
          type="date"
          value={form.born_at}
          onChange={(e) => update("born_at", e.target.value)}
          className="w-full bg-background border border-surface-light rounded-lg px-4 py-2.5 text-text focus:outline-none focus:ring-2 focus:ring-primary"
        />
      </div>
      <div>
        <label className="block text-sm font-medium text-text mb-1">Bio / Status</label>
        <textarea
          value={form.status}
          onChange={(e) => update("status", e.target.value.slice(0, 500))}
          rows={3}
          maxLength={500}
          className="w-full bg-background border border-surface-light rounded-lg px-4 py-2.5 text-text focus:outline-none focus:ring-2 focus:ring-primary"
        />
        <div className="mt-1 flex items-center justify-between text-xs text-text-muted">
          <AiBioGenerator />
          <span>{form.status?.length ?? 0} / 500</span>
        </div>
      </div>
      <button type="submit" disabled={saving} className="bg-primary hover:bg-primary-dark text-white px-6 py-2.5 rounded-lg font-semibold transition-colors disabled:opacity-50">
        {saving ? "Saving..." : "Save Changes"}
      </button>
    </form>
  );
}