"use client";

import { FormEvent, useEffect, useRef, useState } from "react";
import Image from "next/image";
import AutumnLeaves from "./components/AutumnLeaves";
import PortfolioBrowser from "./portfolio/PortfolioBrowser";
import { getApiBaseUrl, type HomePortfolioTopic, type SiteBanner } from "./lib/portfolio";

const FACEBOOK_URL = "https://www.facebook.com/miyamura.izumi0311/";
const ZALO_URL = "https://zalo.me/0862094906";

export default function Home({ portfolioTopics, banners }: { portfolioTopics: HomePortfolioTopic[]; banners: SiteBanner[] }) {
  const [menuOpen, setMenuOpen] = useState(false);
  const [joinOpen, setJoinOpen] = useState(false);
  const [contactMenuOpen, setContactMenuOpen] = useState(false);
  const [formState, setFormState] = useState<"idle" | "sending" | "success" | "error">("idle");
  const dialogRef = useRef<HTMLDialogElement>(null);
  const heroBanner = banners.find((banner) => banner.kind === "TET") ?? banners.find((banner) => banner.kind === "EVERYDAY") ?? null;

  useEffect(() => {
    const dialog = dialogRef.current;
    if (!dialog) return;
    if (joinOpen && !dialog.open) dialog.showModal();
    if (!joinOpen && dialog.open) dialog.close();
  }, [joinOpen]);

  useEffect(() => {
    if (!menuOpen) return;
    function handleKeyDown(event: KeyboardEvent) {
      if (event.key === "Escape") setMenuOpen(false);
    }
    document.addEventListener("keydown", handleKeyDown);
    return () => {
      document.removeEventListener("keydown", handleKeyDown);
    };
  }, [menuOpen]);

  useEffect(() => {
    const reveal = new IntersectionObserver((entries) => {
      entries.forEach((entry) => {
        if (entry.isIntersecting) {
          entry.target.classList.add("is-visible");
          reveal.unobserve(entry.target);
        }
      });
    }, { threshold: 0.12 });
    document.querySelectorAll("[data-reveal]").forEach((element) => reveal.observe(element));
    return () => reveal.disconnect();
  }, [portfolioTopics.length]);

  async function submitContact(event: FormEvent<HTMLFormElement>) {
    event.preventDefault();
    if (formState === "sending") return;
    setFormState("sending");
    const form = event.currentTarget;
    const values = new FormData(form);
    try {
      const apiUrl = getApiBaseUrl();
      const response = await fetch(`${apiUrl}/contact`, {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({
          name: values.get("name"),
          method: values.get("method"),
          detail: values.get("detail"),
          message: values.get("message"),
        }),
      });
      if (!response.ok) throw new Error("Contact request was not accepted");
      setFormState("success");
      form.reset();
    } catch {
      setFormState("error");
    }
  }

  return (
    <main>
      <AutumnLeaves />
      <header className={`masthead${menuOpen ? " masthead--menu-open" : ""}`}>
        <a className="wordmark" href="#top" aria-label="JUNX DESIGN, về đầu trang">JUNX <span>DESIGN</span></a>
        <button className={`menu-backdrop${menuOpen ? " is-open" : ""}`} type="button" aria-label="Đóng menu" aria-hidden={!menuOpen} tabIndex={menuOpen ? 0 : -1} onClick={() => setMenuOpen(false)} />
        <nav id="home-mobile-navigation" className={`main-nav ${menuOpen ? "is-open" : ""}`} aria-label="Điều hướng chính">
          <div className="main-nav__items">
          <a href="#top" onClick={() => setMenuOpen(false)}>Trang chủ</a>
          <button className="nav-link" onClick={() => { setJoinOpen(true); setMenuOpen(false); }}>Đăng ký CTV</button>
          <a href="#contact" onClick={() => setMenuOpen(false)}>Liên hệ</a>
          <a className="nav-pending" href={FACEBOOK_URL} target="_blank" rel="noopener noreferrer">Facebook</a>
          </div>
        </nav>
        <button className="menu-toggle" aria-expanded={menuOpen} aria-controls="home-mobile-navigation" aria-label={menuOpen ? "Đóng menu" : "Mở menu"} onClick={() => setMenuOpen(!menuOpen)}>
          <span></span><span></span>
        </button>
      </header>

      <section className="hero" id="top">
        <div className="hero__copy">
          <p className="eyebrow"><span className="eyebrow__dot" /> JUNX DESIGN · PORTFOLIO</p>
        <h1 aria-label="Thiết kế hình ảnh nổi bật cho thương hiệu của bạn.">
          <span className="hero-title--wide" aria-hidden="true">
            <span className="hero-title__line"><span className="hero-title__lead">Thiết kế hình ảnh</span></span>{" "}
            <span className="hero-title__line"><em className="hero-title__key">nổi bật<svg className="hero-title__underline" viewBox="0 0 200 16" focusable="false" aria-hidden="true"><path d="M4 11C42 4 78 7 111 10s57 4 85-4" /></svg></em> cho</span>{" "}
            <span className="hero-title__line"><span className="hero-title__tail">thương hiệu của bạn.</span></span>
          </span>
          <span className="hero-title--narrow" aria-hidden="true">
            <span className="hero-title__line"><span className="hero-title__lead">Thiết kế hình ảnh</span></span>{" "}
            <span className="hero-title__line"><em className="hero-title__key">nổi bật<svg className="hero-title__underline" viewBox="0 0 200 16" focusable="false" aria-hidden="true"><path d="M4 11C42 4 78 7 111 10s57 4 85-4" /></svg></em> cho</span>{" "}
            <span className="hero-title__line"><span className="hero-title__tail">thương hiệu</span></span>{" "}
            <span className="hero-title__line"><span className="hero-title__tail">của bạn.</span></span>
          </span>
        </h1>
          <p className="hero__note">Hình ảnh chỉn chu, giúp thương hiệu của bạn được nhớ đến.</p>
        </div>
        <div className="hero-art" aria-label={heroBanner?.alt ?? (heroBanner ? "Banner JUNX DESIGN" : "Khu vực banner JUNX DESIGN, đang chờ ảnh chính thức")}>
          <div className={`hero-art__frame${heroBanner ? " hero-art__frame--image" : ""}`}>
            {heroBanner ? <Image className="hero-art__image" src={heroBanner.imageUrl} alt={heroBanner.alt ?? (heroBanner.kind === "TET" ? "Banner Tết JUNX DESIGN" : "Banner JUNX DESIGN")} fill sizes="(max-width: 767px) 100vw, 50vw" priority quality={90} /> : <>
              <div className="hero-art__sun" />
              <div className="hero-art__ribbon">JUNX<br />DESIGN</div>
            </>}
            <span className="hero-art__corner hero-art__corner--tl" />
            <span className="hero-art__corner hero-art__corner--br" />
            {heroBanner && <div className="hero-art__caption"><span>{heroBanner.kind === "TET" ? "BANNER TẾT" : "BANNER THƯỜNG NGÀY"}</span><span>JUNX DESIGN</span></div>}
            {!heroBanner && <div className="hero-art__caption"><span>BANNER CHÍNH</span><span>ẢNH SẼ ĐƯỢC CẬP NHẬT</span></div>}
          </div>
          <span className="hero__index">01 / 04</span>
        </div>
      </section>

      <section className="partners section-wrap" data-reveal aria-labelledby="partners-title">
        <div className="section-heading section-heading--compact">
          <p className="eyebrow">CÙNG NHỮNG THƯƠNG HIỆU TIN TƯỞNG</p>
          <h2 id="partners-title">Đối tác & khách hàng</h2>
        </div>
        <div className="partners__empty">
          <span className="partners__mark" aria-hidden="true">✳</span>
          <p>Logo đối tác sẽ xuất hiện tại đây khi được cập nhật.</p>
        </div>
        <button className="text-action" disabled aria-disabled="true">Xem thêm <span>↗</span></button>
      </section>

      <section className="shortcuts" aria-label="Lối tắt dịch vụ">
        <div className="shortcut shortcut--pending" aria-label="YTB / TikTok Tin Dùng, URL sẽ cập nhật"><span className="shortcut__index">01</span><span className="shortcut__name">YTB / TikTok<br />Tin Dùng</span><span className="shortcut__pending">SẮP CẬP NHẬT</span></div>
        <div className="shortcut shortcut--pending" aria-label="Website CTV, URL sẽ cập nhật"><span className="shortcut__index">02</span><span className="shortcut__name">Website<br />CTV</span><span className="shortcut__pending">SẮP CẬP NHẬT</span></div>
        <a className="shortcut shortcut--accent" href="#contact"><span className="shortcut__index">03</span><span className="shortcut__name">Trao đổi<br />dự án</span><span className="shortcut__arrow">↗</span></a>
      </section>

      <section className="work section-wrap" id="work">
        <div className="work__intro" data-reveal>
          <p className="eyebrow">TÁC PHẨM JUNX DESIGN</p>
          <h2>Thiết kế tạo<br />nên <em>ấn tượng.</em></h2>
          <p className="work__description">Một vài không gian trưng bày để bạn khám phá phong cách hình ảnh của JUNX.</p>
        </div>
        <div className="gallery-list">
          {portfolioTopics.map((topic, index) => (
            <section className="gallery-section" key={topic.id} data-reveal>
              <div className="gallery-section__head"><h3>{topic.name}</h3><span>{String(index + 1).padStart(2, "0")}</span></div>
              {topic.items.length > 0 ? <PortfolioBrowser
                initialItems={topic.items}
                initialPagination={{ page: 1, pageSize: topic.items.length, total: topic.items.length, totalPages: 1 }}
                initialFilters={{ category: "", theme: "", type: "", q: "", page: 1 }}
                initialError={null}
                taxonomy={{ categories: [], themes: [], designTypes: [], error: null }}
                topic={{ id: topic.id, name: topic.name, slug: topic.slug, sortOrder: topic.sortOrder, categories: [], designTypes: [] }}
                homePreview
              /> : <div className="gallery-empty"><span className="gallery-empty__symbol" aria-hidden="true">✳</span><p>Chưa có tác phẩm trong chủ đề này.</p><span className="gallery-empty__hint">Các thiết kế mới sẽ xuất hiện tại đây.</span></div>}
              <a className="text-action" href={`/portfolio/${encodeURIComponent(topic.slug)}`}>Xem tất cả <span>↗</span></a>
            </section>
          ))}
        </div>
      </section>

      <section className="contact section-wrap" id="contact" data-reveal>
        <div className="contact__heading">
          <p className="eyebrow">BẮT ĐẦU MỘT DỰ ÁN</p>
          <h2>Cùng tạo nên<br /><em>điều đáng nhớ.</em></h2>
          <p>Gửi lời nhắn cho JUNX DESIGN qua Facebook hoặc Zalo.</p>
          <div className="contact__links"><a href={FACEBOOK_URL} target="_blank" rel="noopener noreferrer">Facebook ↗</a><a href={ZALO_URL} target="_blank" rel="noopener noreferrer">Zalo ↗</a></div>
        </div>
        <form className="contact-form" onSubmit={submitContact}>
          <label htmlFor="contact-name">Tên của bạn</label>
          <input id="contact-name" name="name" autoComplete="name" placeholder="Tên bạn" required />
          <label htmlFor="contact-method">Kênh liên hệ</label>
          <select id="contact-method" name="method" defaultValue="" required>
            <option value="" disabled>Chọn Zalo, điện thoại hoặc email</option>
            <option>Zalo</option><option>Điện thoại</option><option>Email</option>
          </select>
          <label htmlFor="contact-detail">Thông tin liên hệ</label>
          <input id="contact-detail" name="detail" placeholder="Số điện thoại, email hoặc Zalo" required />
          <label htmlFor="contact-message">Lời nhắn</label>
          <textarea id="contact-message" name="message" rows={3} placeholder="Bạn đang cần thiết kế gì?" required />
          <button className="submit-button" type="submit" data-state={formState} disabled={formState === "sending"}>{formState === "sending" ? "Đang gửi…" : formState === "success" ? "Đã gửi" : "Gửi lời nhắn"} <span>↗</span></button>
          <p className={`form-feedback ${formState === "error" ? "is-error" : ""}`} role="status">
            {formState === "success" ? "Cảm ơn bạn. JUNX DESIGN đã nhận được lời nhắn." : formState === "sending" ? "Đang gửi lời nhắn của bạn…" : formState === "error" ? "Chưa gửi được lời nhắn. Vui lòng thử lại hoặc liên hệ qua Facebook/Zalo." : "Thông tin của bạn chỉ được dùng để phản hồi yêu cầu này."}
          </p>
        </form>
      </section>

      <footer className="footer">
        <div className="footer__main"><a className="footer__wordmark" href="#top">JUNX DESIGN</a><p>Thiết kế hình ảnh nổi bật cho thương hiệu của bạn.</p><a href="#contact">Liên hệ ↗</a></div>
        <div className="footer__meta"><span>© JUNX DESIGN</span><span>VIỆT NAM</span></div>
      </footer>

      <div className="contact-float-wrap">
        {contactMenuOpen && <div className="contact-popover" aria-label="Các cách liên hệ">
          <a href={FACEBOOK_URL} target="_blank" rel="noopener noreferrer">Facebook <span>↗</span></a>
          <a href={ZALO_URL} target="_blank" rel="noopener noreferrer">Zalo <span>↗</span></a>
          <a href="#contact" onClick={() => setContactMenuOpen(false)}>Mở form liên hệ <span>↗</span></a>
        </div>}
        <button className="contact-float" onClick={() => setContactMenuOpen(!contactMenuOpen)} aria-expanded={contactMenuOpen} aria-label={contactMenuOpen ? "Đóng lựa chọn liên hệ" : "Mở lựa chọn liên hệ"}>JX<span>{contactMenuOpen ? "−" : "+"}</span></button>
      </div>

      <dialog ref={dialogRef} className="dialog" aria-labelledby="dialog-title" onClose={() => setJoinOpen(false)} onClick={(event) => { if (event.target === event.currentTarget) setJoinOpen(false); }}>
          <button className="dialog__close" autoFocus onClick={() => setJoinOpen(false)} aria-label="Đóng">×</button>
          <p className="eyebrow">JUNX DESIGN · CỘNG TÁC</p>
          <h2 id="dialog-title">Đăng ký <em>CTV</em></h2>
          <p>Luồng đăng ký sẽ sẵn sàng sau khi hệ thống tài khoản và email được cấu hình.</p>
          <button className="submit-button" onClick={() => setJoinOpen(false)}>Đã hiểu</button>
      </dialog>
    </main>
  );
}