"use client";

import { useState } from "react";
import { useRouter } from "next/navigation";

export default function OnboardingPage() {
  const router = useRouter();
  const [step, setStep] = useState(1);
  const [loading, setLoading] = useState(false);
  const [form, setForm] = useState({
    familyName: "",
    memberName: "",
    childName: "",
    birthDate: "",
    sex: "" as "male" | "female" | "other",
  });

  const handleSubmit = async () => {
    setLoading(true);
    try {
      const res = await fetch("/api/onboarding", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify(form),
      });
      if (res.ok) {
        router.push("/");
      }
    } catch (e) {
      console.error(e);
    }
    setLoading(false);
  };

  return (
    <div className="min-h-screen flex items-center justify-center bg-gradient-to-br from-rose-50 to-amber-50 p-4">
      <div className="w-full max-w-md">
        <div className="text-center mb-8">
          <span className="text-4xl">👶</span>
          <h1 className="text-2xl font-bold mt-4">Welcome to Tia</h1>
          <p className="text-gray-600">Let's set up your family</p>
        </div>

        <div className="bg-white rounded-3xl shadow-lg p-6 space-y-4">
          {step === 1 && (
            <>
              <label className="block">
                <span className="text-sm font-medium">Family Name</span>
                <input
                  type="text"
                  value={form.familyName}
                  onChange={(e) => setForm({ ...form, familyName: e.target.value })}
                  placeholder="The Gupta Family"
                  className="w-full p-3 border rounded-xl mt-1"
                />
              </label>
              <label className="block">
                <span className="text-sm font-medium">Your Name</span>
                <input
                  type="text"
                  value={form.memberName}
                  onChange={(e) => setForm({ ...form, memberName: e.target.value })}
                  placeholder="Mama"
                  className="w-full p-3 border rounded-xl mt-1"
                />
              </label>
              <button
                onClick={() => setStep(2)}
                disabled={!form.familyName || !form.memberName}
                className="w-full p-3 bg-rose-400 text-white rounded-xl font-medium disabled:opacity-50"
              >
                Next
              </button>
            </>
          )}

          {step === 2 && (
            <>
              <label className="block">
                <span className="text-sm font-medium">Baby's Name</span>
                <input
                  type="text"
                  value={form.childName}
                  onChange={(e) => setForm({ ...form, childName: e.target.value })}
                  placeholder="Tia"
                  className="w-full p-3 border rounded-xl mt-1"
                />
              </label>
              <label className="block">
                <span className="text-sm font-medium">Birth Date</span>
                <input
                  type="date"
                  value={form.birthDate}
                  onChange={(e) => setForm({ ...form, birthDate: e.target.value })}
                  className="w-full p-3 border rounded-xl mt-1"
                />
              </label>
              <label className="block">
                <span className="text-sm font-medium">Sex</span>
                <div className="flex gap-2 mt-1">
                  {(["male", "female", "other"] as const).map((s) => (
                    <button
                      key={s}
                      type="button"
                      onClick={() => setForm({ ...form, sex: s })}
                      className={`flex-1 p-3 rounded-xl border capitalize ${
                        form.sex === s
                          ? "bg-rose-400 text-white border-rose-400"
                          : "bg-white"
                      }`}
                    >
                      {s}
                    </button>
                  ))}
                </div>
              </label>
              <div className="flex gap-2">
                <button
                  type="button"
                  onClick={() => setStep(1)}
                  className="flex-1 p-3 border rounded-xl font-medium"
                >
                  Back
                </button>
                <button
                  onClick={handleSubmit}
                  disabled={!form.childName || !form.birthDate || !form.sex || loading}
                  className="flex-1 p-3 bg-rose-400 text-white rounded-xl font-medium disabled:opacity-50"
                >
                  {loading ? "Creating..." : "Get Started"}
                </button>
              </div>
            </>
          )}
        </div>
      </div>
    </div>
  );
}