"use client";

import { useRouter } from "next/navigation";
import { useState } from "react";
import toast from "react-hot-toast";
import Header from "@/app/components/layout/Header";
import Footer from "@/app/components/layout/Footer";
import StepShell from "@/app/components/astrologer/StepShell";
import { saveBasicProfile, friendlyErrorMessage } from "@/app/lib/astrologer";

interface BasicForm {
  name: string;
  display_name: string;
  gender: string;
  marital_status: string;
  date_of_birth: string;
  bio: string;
  primary_skills: string;
  primary_language: string;
  experience_years: string;
  daily_hours: string;
  address: string;
  city: string;
  pincode: string;
  state: string;
  country: string;
}

const EMPTY: BasicForm = {
  name: "",
  display_name: "",
  gender: "",
  marital_status: "",
  date_of_birth: "",
  bio: "",
  primary_skills: "",
  primary_language: "",
  experience_years: "",
  daily_hours: "",
  address: "",
  city: "",
  pincode: "",
  state: "",
  country: "India",
};

export default function BasicDetailsPage() {
  const router = useRouter();

  const [form, setForm] = useState<BasicForm>(EMPTY);
  const [loading, setLoading] = useState(false);

  const update = (patch: Partial<BasicForm>) =>
    setForm((prev) => ({ ...prev, ...patch }));

  const handleSave = async () => {
    const token = localStorage.getItem("astrologerToken");

    if (!token) {
      router.replace("/astrologer/signin");
      return;
    }

    if (!form.name || !form.display_name || !form.gender || !form.date_of_birth) {
      toast.error("Please fill all required fields");
      return;
    }

    try {
      setLoading(true);

      const payload = {
        ...form,
        experience_years: Number(form.experience_years) || 0,
        daily_hours: Number(form.daily_hours) || 0,
      };

      const response = await saveBasicProfile(payload, token);

      if (!response.success) {
        toast.error(friendlyErrorMessage(response.message, "Unable to save. Please try again."));
        return;
      }

      toast.success("Saved");

      router.push("/astrologer/profile/progress");
    } catch (error: any) {
      toast.error(friendlyErrorMessage(error.response?.data?.message, "Something went wrong."));
    } finally {
      setLoading(false);
    }
  };

  return (
    <>
    <Header />
    <StepShell step={1} title="Basic Details" loading={loading} onSave={handleSave}>
      <h6 className="mb-3">Who you are</h6>

      <div className="mb-3">
        <label className="form-label fw-semibold">Full name *</label>
        <input
          className="form-control form-control-lg"
          value={form.name}
          onChange={(e) => update({ name: e.target.value })}
        />
      </div>

      <div className="mb-3">
        <label className="form-label fw-semibold">Display name *</label>
        <input
          className="form-control form-control-lg"
          value={form.display_name}
          onChange={(e) => update({ display_name: e.target.value })}
        />
        <small className="terms-text-color">Shown to users on your card.</small>
      </div>

      <div className="row g-3 mb-3">
        <div className="col-6">
          <label className="form-label fw-semibold">Gender *</label>
          <select
            className="form-control form-control-lg"
            value={form.gender}
            onChange={(e) => update({ gender: e.target.value })}
          >
            <option value="">Select</option>
            <option value="Male">Male</option>
            <option value="Female">Female</option>
            <option value="Other">Other</option>
          </select>
        </div>

        <div className="col-6">
          <label className="form-label fw-semibold">Marital status</label>
          <select
            className="form-control form-control-lg"
            value={form.marital_status}
            onChange={(e) => update({ marital_status: e.target.value })}
          >
            <option value="">Select</option>
            <option value="Single">Single</option>
            <option value="Married">Married</option>
          </select>
        </div>
      </div>

      <div className="mb-3">
        <label className="form-label fw-semibold">Date of birth *</label>
        <input
          type="date"
          className="form-control form-control-lg"
          value={form.date_of_birth}
          onChange={(e) => update({ date_of_birth: e.target.value })}
        />
      </div>

      <div className="mb-4">
        <label className="form-label fw-semibold">Bio</label>
        <textarea
          className="form-control form-control-lg"
          rows={3}
          value={form.bio}
          onChange={(e) => update({ bio: e.target.value })}
        />
        <small className="terms-text-color">
          Two or three lines. No contact details.
        </small>
      </div>

      <h6 className="mb-3">Practice</h6>

      <div className="row g-3 mb-3">
        <div className="col-6">
          <label className="form-label fw-semibold">Primary skill *</label>
          <input
            className="form-control form-control-lg"
            value={form.primary_skills}
            onChange={(e) => update({ primary_skills: e.target.value })}
          />
        </div>

        <div className="col-6">
          <label className="form-label fw-semibold">Primary language *</label>
          <input
            className="form-control form-control-lg"
            value={form.primary_language}
            onChange={(e) => update({ primary_language: e.target.value })}
          />
        </div>
      </div>

      <div className="row g-3 mb-4">
        <div className="col-6">
          <label className="form-label fw-semibold">Experience</label>
          <div className="input-group input-group-lg">
            <input
              type="number"
              className="form-control"
              value={form.experience_years}
              onChange={(e) => update({ experience_years: e.target.value })}
            />
            <span className="input-group-text">yrs</span>
          </div>
        </div>

        <div className="col-6">
          <label className="form-label fw-semibold">Daily hours</label>
          <div className="input-group input-group-lg">
            <input
              type="number"
              className="form-control"
              value={form.daily_hours}
              onChange={(e) => update({ daily_hours: e.target.value })}
            />
            <span className="input-group-text">hrs</span>
          </div>
        </div>
      </div>

      <h6 className="mb-3">Where you are</h6>

      <div className="mb-3">
        <label className="form-label fw-semibold">Address</label>
        <input
          placeholder="type here.."
          className="form-control form-control-lg"
          value={form.address}
          onChange={(e) => update({ address: e.target.value })}
        />
      </div>

      <div className="row g-3 mb-3">
        <div className="col-6">
          <label className="form-label fw-semibold">City</label>
          <input
            placeholder="type here.."
            className="form-control form-control-lg"
            value={form.city}
            onChange={(e) => update({ city: e.target.value })}
          />
        </div>

        <div className="col-6">
          <label className="form-label fw-semibold">Pincode</label>
          <input
            inputMode="numeric"
            maxLength={6}
            placeholder="0"
            className="form-control form-control-lg"
            value={form.pincode}
            onChange={(e) =>
              update({ pincode: e.target.value.replace(/\D/g, "").slice(0, 6) })
            }
          />
        </div>
      </div>

      <div className="row g-3">
        <div className="col-6">
          <label className="form-label fw-semibold">State</label>
          <input
            placeholder="type here.."
            className="form-control form-control-lg"
            value={form.state}
            onChange={(e) => update({ state: e.target.value })}
          />
        </div>

        <div className="col-6">
          <label className="form-label fw-semibold">Country</label>
          <input
            className="form-control form-control-lg"
            value={form.country}
            onChange={(e) => update({ country: e.target.value })}
          />
        </div>
      </div>
    </StepShell>
    <Footer />
    </>
  );
}