"use client";

import { useState, type FormEvent } from "react";
import { useRouter } from "next/navigation";
import type { AuthUser } from "@/types/user";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { useToast } from "@/components/ui/toast";
import { clientFetch } from "@/lib/api/client";

export function ProfileForm({ user }: { user: AuthUser }) {
  const router = useRouter();
  const [name, setName] = useState(user.name);
  const [phone, setPhone] = useState(user.phone ?? "");
  const [message, setMessage] = useState<string | null>(null);
  const [error, setError] = useState<string | null>(null);
  const [isSubmitting, setIsSubmitting] = useState(false);
  const { toast } = useToast();

  async function handleSubmit(formEvent: FormEvent<HTMLFormElement>) {
    formEvent.preventDefault();
    setMessage(null);
    setError(null);
    setIsSubmitting(true);

    const res = await clientFetch("/api/profile", {
      method: "PUT",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify({ name, phone: phone || null }),
    });

    setIsSubmitting(false);
    const body = await res.json().catch(() => null);

    if (!res.ok) {
      const errorMessage = body?.message ?? "Failed to update profile.";
      setError(errorMessage);
      toast(errorMessage, "error");
      return;
    }

    const successMessage = body?.message ?? "Profile updated successfully.";
    setMessage(successMessage);
    toast(successMessage, "success");
    router.refresh(); // reflect the new name in the navbar (AuthStatus Server Component)
  }

  return (
    <form onSubmit={handleSubmit} className="mt-6 flex flex-col gap-4">
      <label className="flex flex-col gap-1 text-sm font-medium">
        Full Name
        <Input required value={name} onChange={(e) => setName(e.target.value)} />
      </label>

      <label className="flex flex-col gap-1 text-sm font-medium">
        Email
        {/* Disabled/read-only display — kept as a plain input rather than the
            shared Input primitive, since its muted colors are a deliberately
            different visual treatment, not a size/shape variant. */}
        <input
          disabled
          value={user.email}
          className="rounded-lg border border-kolabora-neutral-dark/10 bg-kolabora-neutral-dark/5 px-3 py-2 text-base font-normal text-kolabora-neutral-dark/70"
        />
      </label>

      <label className="flex flex-col gap-1 text-sm font-medium">
        Phone Number
        <Input value={phone} onChange={(e) => setPhone(e.target.value)} />
      </label>

      {message && <p className="text-sm text-green-600">{message}</p>}
      {error && <p className="text-sm text-red-600">{error}</p>}

      <Button type="submit" size="lg" loading={isSubmitting} className="mt-2 self-start">
        Save Changes
      </Button>
    </form>
  );
}