"use client";

import { useEffect, useState } from "react";

type HistoryState = {
  verified: boolean;
  phone: string | null;
  email: string | null;
  emailVerified: boolean;
  orders: { order_id: string; status: string; status_ru: string; paid: boolean; total: number; delivery_fee: number; due: string | null; created_at: string; track_url: string }[];
  bookings: { rid: string; dt: string; persons: number; status: string; name: string; created_at: string }[];
  error?: string;
};

function formatPhone(phone: string) {
  return `+${phone[0]} (${phone.slice(1, 4)}) ${phone.slice(4, 7)}-${phone.slice(7, 9)}-${phone.slice(9)}`;
}

export function AccountPanel() {
  const [history, setHistory] = useState<HistoryState | null>(null);
  const [phone, setPhone] = useState("");
  const [code, setCode] = useState("");
  const [codeSent, setCodeSent] = useState(false);
  const [cooldown, setCooldown] = useState(0);
  const [busy, setBusy] = useState(false);
  const [message, setMessage] = useState("");
  const [email, setEmail] = useState("");
  const [emailCode, setEmailCode] = useState("");
  const [emailCodeSent, setEmailCodeSent] = useState(false);
  const [emailCooldown, setEmailCooldown] = useState(0);

  async function loadHistory() {
    try {
      const response = await fetch("/api/account/history", { cache: "no-store" });
      if (response.ok) setHistory(await response.json());
    } catch { /* keep previous state */ }
  }

  useEffect(() => { loadHistory(); }, []);
  useEffect(() => {
    if (cooldown <= 0) return;
    const timer = window.setTimeout(() => setCooldown((value) => value - 1), 1000);
    return () => window.clearTimeout(timer);
  }, [cooldown]);
  useEffect(() => {
    if (emailCooldown <= 0) return;
    const timer = window.setTimeout(() => setEmailCooldown((value) => value - 1), 1000);
    return () => window.clearTimeout(timer);
  }, [emailCooldown]);

  async function requestEmailCode(event: React.FormEvent) {
    event.preventDefault();
    if (busy || emailCooldown > 0) return;
    setBusy(true); setMessage("");
    try {
      const response = await fetch("/api/account/email/request", { method: "POST", headers: { "content-type": "application/json" }, body: JSON.stringify({ email }) });
      const body = await response.json();
      if (!response.ok) throw new Error(body.message || "Не удалось отправить код.");
      setEmailCodeSent(true); setEmailCooldown(60); setMessage("Код отправлен на почту.");
    } catch (error) { setMessage(error instanceof Error ? error.message : "Не удалось отправить код."); }
    finally { setBusy(false); }
  }

  async function verifyEmailCode(event: React.FormEvent) {
    event.preventDefault();
    if (busy) return;
    setBusy(true); setMessage("");
    try {
      const response = await fetch("/api/account/email/verify", { method: "POST", headers: { "content-type": "application/json" }, body: JSON.stringify({ email, code: emailCode }) });
      const body = await response.json();
      if (!response.ok) throw new Error(body.message || "Не удалось проверить код.");
      setMessage("Почта подтверждена.");
      setEmailCode(""); setEmailCodeSent(false);
      await loadHistory();
    } catch (error) { setMessage(error instanceof Error ? error.message : "Не удалось проверить код."); }
    finally { setBusy(false); }
  }

  async function requestCode(event: React.FormEvent) {
    event.preventDefault();
    if (busy || cooldown > 0) return;
    setBusy(true); setMessage("");
    try {
      const response = await fetch("/api/account/phone/request", { method: "POST", headers: { "content-type": "application/json" }, body: JSON.stringify({ phone }) });
      const body = await response.json();
      if (!response.ok) throw new Error(body.message || "Не удалось отправить код.");
      setCodeSent(true); setCooldown(60); setMessage("Код отправлен по SMS.");
    } catch (error) { setMessage(error instanceof Error ? error.message : "Не удалось отправить код."); }
    finally { setBusy(false); }
  }

  async function verifyCode(event: React.FormEvent) {
    event.preventDefault();
    if (busy) return;
    setBusy(true); setMessage("");
    try {
      const response = await fetch("/api/account/phone/verify", { method: "POST", headers: { "content-type": "application/json" }, body: JSON.stringify({ phone, code }) });
      const body = await response.json();
      if (!response.ok) throw new Error(body.message || "Не удалось проверить код.");
      setMessage("Телефон подтверждён.");
      setCode(""); setCodeSent(false);
      await loadHistory();
    } catch (error) { setMessage(error instanceof Error ? error.message : "Не удалось проверить код."); }
    finally { setBusy(false); }
  }

  return <div className="grid gap-6">
    <section className="card grid gap-4 p-5">
      <div><p className="eyebrow">Телефон</p><h2 className="mt-1 text-2xl">{history?.verified && history.phone ? formatPhone(history.phone) : "Подтверждение номера"}</h2></div>
      {history?.verified && history.phone ? (
        <p className="text-sm text-kiln-milk/60">Номер подтверждён — история заказов и броней доступна ниже. SMS для входа больше не отправляется.</p>
      ) : (
        <>
          <p className="text-sm text-kiln-milk/60">Подтвердите телефон, чтобы увидеть историю заказов и броней. Код отправляется один раз.</p>
          <form className="grid gap-3 sm:grid-cols-[1fr_auto]" onSubmit={requestCode}>
            <input className="input" type="tel" inputMode="tel" placeholder="+7 (___) ___-__-__" value={phone} onChange={(event) => setPhone(event.target.value)} required pattern={"^[0-9+()\\-\\s]{10,32}$"} />
            <button className="button button-secondary" disabled={busy || cooldown > 0 || phone.length < 10}>{cooldown > 0 ? `Повтор через ${cooldown} с` : "Отправить код"}</button>
          </form>
          {codeSent ? (
            <form className="grid gap-3 sm:grid-cols-[1fr_auto]" onSubmit={verifyCode}>
              <input className="input" inputMode="numeric" placeholder="Код из SMS" value={code} onChange={(event) => setCode(event.target.value)} required minLength={4} maxLength={10} />
              <button className="button button-primary" disabled={busy || code.length < 4}>Подтвердить</button>
            </form>
          ) : null}
        </>
      )}
      {message ? <p className="text-sm text-kiln-flame">{message}</p> : null}
    </section>
    <section className="card grid gap-4 p-5">
      <div><p className="eyebrow">Почта</p><h2 className="mt-1 text-2xl">{history?.emailVerified && history.email ? history.email : "Подтверждение почты"}</h2></div>
      {history?.emailVerified && history.email ? (
        <p className="text-sm text-kiln-milk/60">Почта подтверждена — на неё приходят подтверждения заказов и броней.</p>
      ) : (
        <>
          <p className="text-sm text-kiln-milk/60">Подтвердите почту, чтобы получать подтверждения заказов и броней.</p>
          <form className="grid gap-3 sm:grid-cols-[1fr_auto]" onSubmit={requestEmailCode}>
            <input className="input" type="email" placeholder="email@example.ru" value={email} onChange={(event) => setEmail(event.target.value)} required />
            <button className="button button-secondary" disabled={busy || emailCooldown > 0 || email.length < 5}>{emailCooldown > 0 ? `Повтор через ${emailCooldown} с` : emailCodeSent ? "Отправить ещё раз" : "Отправить код"}</button>
          </form>
          {emailCodeSent ? (
            <form className="grid gap-3 sm:grid-cols-[1fr_auto]" onSubmit={verifyEmailCode}>
              <input className="input" inputMode="numeric" placeholder="Код из письма" value={emailCode} onChange={(event) => setEmailCode(event.target.value)} required minLength={4} maxLength={10} />
              <button className="button button-primary" disabled={busy || emailCode.length < 4}>Подтвердить</button>
            </form>
          ) : null}
        </>
      )}
    </section>
    {history?.verified ? (
      <>
        <section className="card grid gap-3 p-5">
          <div><p className="eyebrow">История</p><h2 className="mt-1 text-2xl">Заказы</h2></div>
          {history.error ? <p className="text-sm text-kiln-flame">История временно недоступна. Попробуйте позже.</p> : null}
          {!history.error && !history.orders.length ? <p className="text-sm text-kiln-milk/60">Заказов пока нет.</p> : null}
          {history.orders.map((order) => <div key={order.order_id} className="flex flex-wrap items-center justify-between gap-2 border-b border-white/10 pb-2 text-sm last:border-0">
            <span>№{order.order_id} · {order.status_ru}{order.due ? ` · ко времени ${new Date(order.due).toLocaleString("ru-RU")}` : ""}</span>
            <span className="flex items-center gap-3"><strong>{order.total} ₽</strong>{order.paid ? <span className="text-kiln-flame">оплачен</span> : null}{order.track_url ? <a className="text-kiln-flame underline" href={order.track_url} target="_blank" rel="noreferrer">отслеживание</a> : null}</span>
          </div>)}
        </section>
        <section className="card grid gap-3 p-5">
          <div><p className="eyebrow">История</p><h2 className="mt-1 text-2xl">Брони</h2></div>
          {!history.bookings.length ? <p className="text-sm text-kiln-milk/60">Броней пока нет.</p> : null}
          {history.bookings.map((booking) => <div key={booking.rid} className="flex flex-wrap items-center justify-between gap-2 border-b border-white/10 pb-2 text-sm last:border-0">
            <span>№{booking.rid} · {new Date(booking.dt).toLocaleString("ru-RU")} · {booking.persons} чел.</span>
            <span>{booking.status}</span>
          </div>)}
        </section>
      </>
    ) : null}
  </div>;
}