"use client";

import { useEffect, useState } from "react";
import { useRouter } from "next/navigation";
import { Select } from "@/components/life/Controls";
import Icon from "@/components/ui/Icon";
import { updateProfile, type User } from "@/lib/api/auth";
import { useAuth } from "@/store/auth";
import { useCitiesStore } from "@/store/cities";
import { AuthCard, Field, FormAlert, Submit, readError, type FieldErrors } from "./Form";

/** Signed-in home: edit profile, sign out. Guests are sent to /login and come back here. */
export default function AccountPanel() {
  const router = useRouter();
  const { user, status, setUser, signOut } = useAuth();

  useEffect(() => {
    if (status === "guest") router.replace("/login?next=%2Faccount");
  }, [status, router]);

  if (!user) {
    return (
      <section className="wrap acct" aria-busy="true">
        <div className="acct-card">
          <div className="lf-skel acct-skel" />
        </div>
      </section>
    );
  }

  return (
    <AuthCard
      title={`Hello, ${user.first_name || user.name}`}
      lead={
        <>
          Signed in as <strong>{user.email}</strong>
          {user.email_verified_at && (
            <span className="acct-badge">
              <Icon name="verified" /> Verified
            </span>
          )}
        </>
      }
    >
      <ProfileForm key={user.id} user={user} onSaved={setUser} />
      <div className="acct-foot">
        <button
          type="button"
          className="btn btn-outline btn-sm"
          onClick={async () => {
            await signOut();
            router.replace("/");
          }}
        >
          <Icon name="logout" />
          Sign out
        </button>
      </div>
    </AuthCard>
  );
}

function ProfileForm({ user, onSaved }: { user: User; onSaved: (u: User) => void }) {
  const cities = useCitiesStore();
  const [f, setF] = useState({ first_name: user.first_name ?? "", last_name: user.last_name ?? "", phone: user.phone ?? "", city_id: user.city_id ? String(user.city_id) : "" });
  const [busy, setBusy] = useState(false);
  const [errors, setErrors] = useState<FieldErrors>({});
  const [message, setMessage] = useState<string | null>(null);
  const [saved, setSaved] = useState(false);

  useEffect(() => {
    if (cities.status === "idle") void cities.load();
  }, [cities.status, cities.load]);

  const set = (k: keyof typeof f) => (v: string) => {
    setF((p) => ({ ...p, [k]: v }));
    setSaved(false);
    setErrors(({ [k]: _drop, ...rest }) => rest);
  };

  const submit = async (e: React.FormEvent) => {
    e.preventDefault();
    setBusy(true);
    setErrors({});
    setMessage(null);
    try {
      onSaved(await updateProfile({ first_name: f.first_name.trim(), last_name: f.last_name.trim(), phone: f.phone.trim() || null, city_id: f.city_id ? Number(f.city_id) : null }));
      setSaved(true);
    } catch (err) {
      const r = readError(err);
      setErrors(r.fields);
      setMessage(r.message);
    } finally {
      setBusy(false);
    }
  };

  return (
    <form className="acct-form" onSubmit={submit} noValidate>
      <h2 className="lfd-h2">Profile</h2>
      <div className="acct-row">
        <Field label="First name" value={f.first_name} onChange={set("first_name")} error={errors.first_name} autoComplete="given-name" />
        <Field label="Last name" value={f.last_name} onChange={set("last_name")} error={errors.last_name} autoComplete="family-name" />
      </div>
      <Field label="Phone (optional)" type="tel" value={f.phone} onChange={set("phone")} error={errors.phone} autoComplete="tel" />
      <div className="acct-field">
        <Select label="Home city (optional)" value={f.city_id} options={[{ value: "", label: "Not set" }, ...cities.items.map((c) => ({ value: String(c.id), label: c.name }))]} onChange={set("city_id")} />
        {errors.city_id && <small className="iv-err">{errors.city_id[0]}</small>}
      </div>
      {message && <FormAlert>{message}</FormAlert>}
      {saved && <FormAlert tone="ok">Your profile is saved.</FormAlert>}
      <Submit busy={busy}>Save changes</Submit>
    </form>
  );
}