"use client";

import { FormEvent, useMemo, useState } from "react";

type Category = "Semua" | "Fashion" | "Beauty" | "Herbal";

type Product = {
  id: number;
  name: string;
  category: Exclude<Category, "Semua">;
  price: number;
  oldPrice?: number;
  image: string;
  position: string;
  badge?: string;
  description: string;
  rating: number;
  reviews: number;
};

const categories = [
  { name: "Fashion" as const, eyebrow: "Nyaman dipakai, mudah dipadukan", image: "/images/fashion.webp", count: "8 koleksi" },
  { name: "Beauty" as const, eyebrow: "Ritual sederhana untuk kulitmu", image: "/images/beauty.webp", count: "12 pilihan" },
  { name: "Herbal" as const, eyebrow: "Pilihan alami untuk keseharian", image: "/images/herbal.webp", count: "9 racikan" },
];

const products: Product[] = [
  { id: 1, name: "Luna Linen Set", category: "Fashion", price: 329000, oldPrice: 389000, image: "/images/fashion.webp", position: "55% center", badge: "Best seller", description: "Set blus dan celana linen-look yang ringan.", rating: 4.9, reviews: 128 },
  { id: 2, name: "Amara Pleated Dress", category: "Fashion", price: 379000, image: "/images/fashion.webp", position: "68% center", badge: "Baru", description: "Dress flowy dengan detail lipit yang anggun.", rating: 4.8, reviews: 74 },
  { id: 3, name: "Svara Knit Cardigan", category: "Fashion", price: 249000, image: "/images/fashion.webp", position: "82% center", description: "Outer rajut lembut untuk tampilan berlapis.", rating: 4.7, reviews: 93 },
  { id: 4, name: "Naya Daily Hijab", category: "Fashion", price: 79000, oldPrice: 99000, image: "/images/fashion.webp", position: "47% 18%", badge: "Hemat 20%", description: "Hijab polos ringan dengan warna netral.", rating: 4.9, reviews: 214 },
  { id: 5, name: "Dewdrop Barrier Serum", category: "Beauty", price: 189000, image: "/images/beauty.webp", position: "23% center", badge: "Favorit baru", description: "Serum harian bertekstur ringan dan nyaman.", rating: 4.9, reviews: 156 },
  { id: 6, name: "Velvet Cloud Sunscreen", category: "Beauty", price: 149000, image: "/images/beauty.webp", position: "48% center", description: "Sunscreen dengan hasil akhir lembut tanpa lengket.", rating: 4.8, reviews: 187 },
  { id: 7, name: "Petal Tint Lip Cream", category: "Beauty", price: 119000, oldPrice: 139000, image: "/images/beauty.webp", position: "67% center", badge: "Pilihan editor", description: "Warna hangat dengan tekstur velvet nyaman.", rating: 4.7, reviews: 142 },
  { id: 8, name: "Bloom Soft Cushion", category: "Beauty", price: 219000, image: "/images/beauty.webp", position: "87% center", description: "Cushion ringan untuk tampilan natural sehari-hari.", rating: 4.8, reviews: 111 },
  { id: 9, name: "Rimpang Jahe Merah", category: "Herbal", price: 98000, image: "/images/herbal.webp", position: "20% center", badge: "Pilihan pelanggan", description: "Campuran rempah dengan aroma hangat dan praktis.", rating: 4.9, reviews: 172 },
  { id: 10, name: "Sari Kunyit Asam", category: "Herbal", price: 89000, image: "/images/herbal.webp", position: "82% center", description: "Racikan kunyit asam dengan rasa segar seimbang.", rating: 4.8, reviews: 135 },
  { id: 11, name: "Teh Serai Pandan", category: "Herbal", price: 72000, oldPrice: 85000, image: "/images/herbal.webp", position: "55% center", badge: "Paket hemat", description: "Teh botanikal wangi untuk teman waktu santai.", rating: 4.7, reviews: 89 },
  { id: 12, name: "Madu Hutan Blend", category: "Herbal", price: 135000, image: "/images/herbal.webp", position: "67% center", description: "Madu blend dalam kemasan praktis untuk keluarga.", rating: 4.9, reviews: 203 },
];

const testimonials = [
  { quote: "Suka banget karena bisa cari outfit, skincare, sampai herbal dalam satu checkout. Packing-nya juga cantik.", name: "Nadia A.", city: "Bandung", category: "Fashion & Beauty" },
  { quote: "Warna bajunya sama seperti foto dan adminnya cepat bantu pilih ukuran. Pasti balik lagi.", name: "Rani P.", city: "Surabaya", category: "Fashion" },
  { quote: "Koleksi herbalnya terasa premium dan penjelasan produknya mudah dipahami. Belanja jadi tenang.", name: "Dita M.", city: "Jakarta", category: "Herbal" },
];

function money(value: number) {
  return new Intl.NumberFormat("id-ID", {
    style: "currency",
    currency: "IDR",
    maximumFractionDigits: 0,
  }).format(value);
}

function LeafMark() {
  return (
    <span className="leaf-mark" aria-hidden="true">
      <span />
      <span />
    </span>
  );
}

function Stars({ value }: { value: number }) {
  return <span className="stars" aria-label={`Rating ${value} dari 5`}>★★★★★</span>;
}

export default function Home() {
  const [activeCategory, setActiveCategory] = useState<Category>("Semua");
  const [search, setSearch] = useState("");
  const [sort, setSort] = useState("popular");
  const [cart, setCart] = useState<Record<number, number>>({});
  const [cartOpen, setCartOpen] = useState(false);
  const [menuOpen, setMenuOpen] = useState(false);
  const [favorites, setFavorites] = useState<number[]>([]);
  const [toast, setToast] = useState("");
  const [newsletterSent, setNewsletterSent] = useState(false);

  const visibleProducts = useMemo(() => {
    const query = search.trim().toLowerCase();
    const filtered = products.filter((product) => {
      const inCategory = activeCategory === "Semua" || product.category === activeCategory;
      const matches = !query || `${product.name} ${product.category} ${product.description}`.toLowerCase().includes(query);
      return inCategory && matches;
    });
    return [...filtered].sort((a, b) => {
      if (sort === "low") return a.price - b.price;
      if (sort === "high") return b.price - a.price;
      if (sort === "rating") return b.rating - a.rating;
      return a.id - b.id;
    });
  }, [activeCategory, search, sort]);

  const cartItems = products.filter((product) => cart[product.id]);
  const cartCount = Object.values(cart).reduce((sum, quantity) => sum + quantity, 0);
  const cartTotal = cartItems.reduce((sum, product) => sum + product.price * cart[product.id], 0);
  const shippingTarget = 250000;
  const shippingProgress = Math.min(100, (cartTotal / shippingTarget) * 100);

  function showToast(message: string) {
    setToast(message);
    window.setTimeout(() => setToast(""), 2400);
  }

  function addToCart(product: Product) {
    setCart((current) => ({ ...current, [product.id]: (current[product.id] || 0) + 1 }));
    showToast(`${product.name} masuk ke tas belanja`);
  }

  function changeQuantity(id: number, change: number) {
    setCart((current) => {
      const next = (current[id] || 0) + change;
      if (next <= 0) {
        const copy = { ...current };
        delete copy[id];
        return copy;
      }
      return { ...current, [id]: next };
    });
  }

  function chooseCategory(category: Category) {
    setActiveCategory(category);
    document.querySelector("#produk")?.scrollIntoView({ behavior: "smooth" });
  }

  function checkoutWhatsApp() {
    if (!cartItems.length) return;
    const lines = cartItems.map((item) => `• ${item.name} x${cart[item.id]} — ${money(item.price * cart[item.id])}`);
    const message = [
      "Halo Nayara, saya ingin memesan:",
      "",
      ...lines,
      "",
      `Total: ${money(cartTotal)}`,
      "",
      "Mohon bantu konfirmasi stok dan ongkir. Terima kasih.",
    ].join("\n");
    window.open(`https://wa.me/?text=${encodeURIComponent(message)}`, "_blank", "noopener,noreferrer");
  }

  function submitNewsletter(event: FormEvent<HTMLFormElement>) {
    event.preventDefault();
    setNewsletterSent(true);
  }

  return (
    <main>
      <div className="announcement">
        <p>Gratis ongkir mulai Rp250.000</p>
        <span aria-hidden="true">•</span>
        <p>Belanja aman &amp; mudah</p>
      </div>

      <header className="site-header">
        <a className="brand" href="#top" aria-label="Nayara Store - beranda">
          <LeafMark />
          <span>NAYARA</span>
          <small>STYLE • BEAUTY • WELLNESS</small>
        </a>
        <nav className={menuOpen ? "nav-open" : ""} aria-label="Navigasi utama">
          <a href="#kategori" onClick={() => setMenuOpen(false)}>Kategori</a>
          <a href="#produk" onClick={() => setMenuOpen(false)}>Produk</a>
          <a href="#cerita" onClick={() => setMenuOpen(false)}>Tentang</a>
          <a href="#faq" onClick={() => setMenuOpen(false)}>FAQ</a>
        </nav>
        <div className="header-actions">
          <button className="menu-button" onClick={() => setMenuOpen((open) => !open)} aria-label="Buka menu" aria-expanded={menuOpen}>☰</button>
          <button className="bag-button" onClick={() => setCartOpen(true)} aria-label={`Buka tas belanja, ${cartCount} barang`}>
            <span>Tas belanja</span>
            <span className="bag-count">{cartCount}</span>
          </button>
        </div>
      </header>

      <section className="hero" id="top">
        <div className="hero-copy">
          <p className="kicker">SATU TOKO, SEMUA YANG KAMU SUKA</p>
          <h1>Cantik, sehat, dan percaya diri—setiap hari.</h1>
          <p className="hero-subtitle">
            Temukan fashion pilihan, perawatan diri, dan produk herbal dalam
            satu pengalaman belanja yang hangat dan praktis.
          </p>
          <div className="hero-actions">
            <a className="button button-primary" href="#produk">
              Belanja sekarang <span aria-hidden="true">→</span>
            </a>
            <a className="text-link" href="#kategori">Jelajahi kategori</a>
          </div>
          <div className="hero-proof" aria-label="Keunggulan Nayara">
            <span><b>3</b> kategori pilihan</span>
            <span><b>4,9/5</b> kepuasan pelanggan</span>
            <span><b>7 hari</b> bantuan retur</span>
          </div>
        </div>
        <div className="hero-gallery" aria-label="Koleksi pilihan Nayara">
          <figure className="hero-photo hero-photo-main">
            <img src="/images/fashion.webp" alt="Koleksi fashion Nayara" />
            <figcaption>Everyday style</figcaption>
          </figure>
          <figure className="hero-photo hero-photo-top">
            <img src="/images/beauty.webp" alt="Koleksi kosmetik Nayara" />
            <figcaption>Gentle beauty</figcaption>
          </figure>
          <figure className="hero-photo hero-photo-bottom">
            <img src="/images/herbal.webp" alt="Koleksi herbal Nayara" />
            <figcaption>Daily wellness</figcaption>
          </figure>
          <span className="hero-seal">PILIHAN<br />UNTUKMU</span>
        </div>
      </section>

      <section className="benefit-strip" aria-label="Layanan toko">
        <div><span aria-hidden="true">◇</span><p><b>Produk dikurasi</b><small>Pilihan untuk rutinitasmu</small></p></div>
        <div><span aria-hidden="true">♧</span><p><b>Pengiriman rapi</b><small>Dikemas aman dan cantik</small></p></div>
        <div><span aria-hidden="true">♡</span><p><b>Admin responsif</b><small>Siap bantu sebelum checkout</small></p></div>
      </section>

      <section className="section categories-section" id="kategori">
        <div className="section-heading">
          <div>
            <p className="kicker">PILIH SESUAI KEBUTUHANMU</p>
            <h2>Tiga dunia, satu Nayara.</h2>
          </div>
          <p>Mulai dari outfit favorit sampai teman hangat untuk waktu istirahatmu.</p>
        </div>
        <div className="category-grid">
          {categories.map((category) => (
            <button className="category-card" onClick={() => chooseCategory(category.name)} key={category.name}>
              <img src={category.image} alt={`Koleksi ${category.name}`} />
              <span className="category-overlay" />
              <span className="category-count">{category.count}</span>
              <span className="category-copy">
                <small>{category.eyebrow}</small>
                <strong>{category.name}</strong>
                <span>Jelajahi koleksi →</span>
              </span>
            </button>
          ))}
        </div>
      </section>

      <section className="section catalog-section" id="produk">
        <div className="section-heading catalog-heading">
          <div>
            <p className="kicker">KATALOG NAYARA</p>
            <h2>Pilihan untuk versi terbaikmu.</h2>
          </div>
          <p>{visibleProducts.length} produk ditemukan</p>
        </div>

        <div className="catalog-toolbar">
          <div className="category-tabs" role="group" aria-label="Filter kategori">
            {(["Semua", "Fashion", "Beauty", "Herbal"] as Category[]).map((category) => (
              <button className={activeCategory === category ? "active" : ""} onClick={() => setActiveCategory(category)} key={category}>{category}</button>
            ))}
          </div>
          <div className="catalog-controls">
            <label className="search-field">
              <span aria-hidden="true">⌕</span>
              <input value={search} onChange={(event) => setSearch(event.target.value)} placeholder="Cari produk..." aria-label="Cari produk" />
            </label>
            <label className="sort-field">
              <span>Urutkan:</span>
              <select value={sort} onChange={(event) => setSort(event.target.value)} aria-label="Urutkan produk">
                <option value="popular">Terpopuler</option>
                <option value="low">Harga terendah</option>
                <option value="high">Harga tertinggi</option>
                <option value="rating">Rating terbaik</option>
              </select>
            </label>
          </div>
        </div>

        {visibleProducts.length ? (
          <div className="product-grid">
            {visibleProducts.map((product) => {
              const favorite = favorites.includes(product.id);
              return (
                <article className="product-card" key={product.id}>
                  <div className="product-image">
                    <img src={product.image} alt={product.name} style={{ objectPosition: product.position }} />
                    {product.badge && <span className="product-badge">{product.badge}</span>}
                    <button
                      className={favorite ? "favorite active" : "favorite"}
                      onClick={() => setFavorites((current) => favorite ? current.filter((id) => id !== product.id) : [...current, product.id])}
                      aria-label={favorite ? `Hapus ${product.name} dari favorit` : `Simpan ${product.name} ke favorit`}
                      aria-pressed={favorite}
                    >{favorite ? "♥" : "♡"}</button>
                    <button className="quick-add" onClick={() => addToCart(product)}>+ Tambah ke tas</button>
                  </div>
                  <div className="product-info">
                    <div className="product-meta">
                      <small>{product.category}</small>
                      <span><Stars value={product.rating} /> {product.rating} ({product.reviews})</span>
                    </div>
                    <h3>{product.name}</h3>
                    <p>{product.description}</p>
                    <div className="product-price">
                      <strong>{money(product.price)}</strong>
                      {product.oldPrice && <del>{money(product.oldPrice)}</del>}
                    </div>
                    <button className="mobile-add" onClick={() => addToCart(product)}>Tambah ke tas</button>
                  </div>
                </article>
              );
            })}
          </div>
        ) : (
          <div className="empty-state">
            <span aria-hidden="true">⌕</span>
            <h3>Produknya belum ketemu</h3>
            <p>Coba kata kunci lain atau tampilkan semua kategori.</p>
            <button className="button button-primary" onClick={() => { setSearch(""); setActiveCategory("Semua"); }}>Reset pencarian</button>
          </div>
        )}
      </section>

      <section className="editorial-banner" id="cerita">
        <div className="editorial-images">
          <img src="/images/beauty.webp" alt="Ritual perawatan Nayara" />
          <img src="/images/herbal.webp" alt="Pilihan herbal Nayara" />
        </div>
        <div className="editorial-copy">
          <p className="kicker">RITUAL KECIL, RASA YANG BERARTI</p>
          <h2>Rawat diri dengan ritme yang paling kamu suka.</h2>
          <p>
            Nayara menyatukan pilihan yang cantik dipandang, nyaman digunakan,
            dan mudah masuk ke rutinitas harianmu.
          </p>
          <a className="text-link" href="#produk">Temukan favoritmu</a>
        </div>
      </section>

      <section className="section reviews-section">
        <div className="section-heading">
          <div>
            <p className="kicker">CERITA DARI PELANGGAN</p>
            <h2>Disukai, dipakai, diceritakan.</h2>
          </div>
          <div className="rating-summary"><strong>4,9</strong><span><Stars value={4.9} /> dari 600+ ulasan</span></div>
        </div>
        <div className="testimonial-grid">
          {testimonials.map((testimonial) => (
            <figure className="testimonial" key={testimonial.name}>
              <Stars value={5} />
              <blockquote>“{testimonial.quote}”</blockquote>
              <figcaption>
                <span className="avatar">{testimonial.name.charAt(0)}</span>
                <span><b>{testimonial.name}</b><small>{testimonial.city} • {testimonial.category}</small></span>
              </figcaption>
            </figure>
          ))}
        </div>
      </section>

      <section className="faq-section" id="faq">
        <div className="faq-intro">
          <p className="kicker">BANTUAN BELANJA</p>
          <h2>Ada yang ingin ditanyakan?</h2>
          <p>Kami rangkum jawaban yang paling sering dicari sebelum checkout.</p>
        </div>
        <div className="faq-list">
          <details>
            <summary>Bagaimana cara memilih ukuran pakaian?<span>+</span></summary>
            <p>Lihat panduan ukuran pada deskripsi produk. Jika masih ragu, tulis tinggi dan berat badan saat menghubungi admin untuk dibantu memilih.</p>
          </details>
          <details>
            <summary>Apakah produk beauty cocok untuk semua kulit?<span>+</span></summary>
            <p>Setiap kulit berbeda. Periksa komposisi, petunjuk pakai, dan nomor izin edar pada kemasan, lalu lakukan patch test sebelum pemakaian penuh.</p>
          </details>
          <details>
            <summary>Bagaimana menggunakan produk herbal?<span>+</span></summary>
            <p>Ikuti petunjuk saji pada kemasan. Produk herbal bukan pengganti obat atau perawatan medis; konsultasikan dengan tenaga kesehatan bila diperlukan.</p>
          </details>
          <details>
            <summary>Kapan pesanan dikirim?<span>+</span></summary>
            <p>Pesanan yang terkonfirmasi sebelum pukul 14.00 diproses pada hari kerja yang sama. Nomor resi dikirim setelah paket diserahkan ke kurir.</p>
          </details>
          <details>
            <summary>Apakah produk bisa ditukar atau diretur?<span>+</span></summary>
            <p>Bisa untuk produk yang salah kirim atau cacat dengan video unboxing. Produk beauty dan herbal yang segelnya terbuka tidak dapat dikembalikan.</p>
          </details>
        </div>
      </section>

      <section className="newsletter">
        <div>
          <p className="kicker">NAYARA NOTES</p>
          <h2>Dapatkan kabar cantik di inbox-mu.</h2>
          <p>Info koleksi baru, inspirasi styling, dan penawaran spesial—secukupnya saja.</p>
        </div>
        {newsletterSent ? (
          <div className="newsletter-success"><span>✓</span><p><b>Terima kasih!</b><small>Kamu sudah masuk ke daftar Nayara Notes.</small></p></div>
        ) : (
          <form onSubmit={submitNewsletter}>
            <label className="sr-only" htmlFor="email">Alamat email</label>
            <input id="email" type="email" required placeholder="nama@email.com" />
            <button type="submit">Daftar sekarang →</button>
          </form>
        )}
      </section>

      <footer className="site-footer">
        <div className="footer-main">
          <div>
            <div className="brand footer-brand"><LeafMark /><span>NAYARA</span></div>
            <p>Fashion, beauty, dan herbal pilihan dalam satu tempat.</p>
          </div>
          <div className="footer-links"><b>Belanja</b><a href="#produk">Semua produk</a><button onClick={() => chooseCategory("Fashion")}>Fashion</button><button onClick={() => chooseCategory("Beauty")}>Beauty</button><button onClick={() => chooseCategory("Herbal")}>Herbal</button></div>
          <div className="footer-links"><b>Bantuan</b><a href="#faq">Cara belanja</a><a href="#faq">Pengiriman</a><a href="#faq">Retur produk</a><a href="#faq">Pertanyaan umum</a></div>
          <div className="footer-contact"><b>Butuh bantuan?</b><p>Pesanan bisa diteruskan ke WhatsApp dari tas belanja.</p><button onClick={() => setCartOpen(true)}>Buka tas belanja →</button></div>
        </div>
        <div className="footer-bottom"><p>© 2026 Nayara Store. Semua hak dilindungi.</p><p>Fashion • Beauty • Herbal</p></div>
      </footer>

      <div className={cartOpen ? "cart-backdrop open" : "cart-backdrop"} onClick={() => setCartOpen(false)} />
      <aside className={cartOpen ? "cart-drawer open" : "cart-drawer"} role="dialog" aria-modal="true" aria-label="Tas belanja" aria-hidden={!cartOpen}>
        <div className="cart-header">
          <div><p className="kicker">PESANANMU</p><h2>Tas belanja <span>({cartCount})</span></h2></div>
          <button onClick={() => setCartOpen(false)} aria-label="Tutup tas belanja">×</button>
        </div>
        {cartItems.length ? (
          <>
            <div className="shipping-progress">
              <p>{cartTotal >= shippingTarget ? "Hore, pesananmu dapat gratis ongkir!" : `Tambah ${money(shippingTarget - cartTotal)} lagi untuk gratis ongkir.`}</p>
              <span><i style={{ width: `${shippingProgress}%` }} /></span>
            </div>
            <div className="cart-items">
              {cartItems.map((item) => (
                <article className="cart-item" key={item.id}>
                  <img src={item.image} alt="" style={{ objectPosition: item.position }} />
                  <div>
                    <small>{item.category}</small>
                    <h3>{item.name}</h3>
                    <strong>{money(item.price)}</strong>
                    <div className="quantity">
                      <button onClick={() => changeQuantity(item.id, -1)} aria-label={`Kurangi ${item.name}`}>−</button>
                      <span>{cart[item.id]}</span>
                      <button onClick={() => changeQuantity(item.id, 1)} aria-label={`Tambah ${item.name}`}>+</button>
                    </div>
                  </div>
                  <button className="remove-item" onClick={() => changeQuantity(item.id, -cart[item.id])} aria-label={`Hapus ${item.name}`}>×</button>
                </article>
              ))}
            </div>
            <div className="cart-footer">
              <p><span>Subtotal</span><strong>{money(cartTotal)}</strong></p>
              <small>Ongkir dihitung setelah alamat dikonfirmasi.</small>
              <button className="button button-primary checkout-button" onClick={checkoutWhatsApp}>Lanjut lewat WhatsApp <span>→</span></button>
              <button className="continue-shopping" onClick={() => setCartOpen(false)}>Lanjut belanja</button>
            </div>
          </>
        ) : (
          <div className="empty-cart">
            <span aria-hidden="true">◇</span>
            <h3>Tasmu masih kosong</h3>
            <p>Yuk, pilih produk yang paling cocok untuk rutinitasmu.</p>
            <button className="button button-primary" onClick={() => { setCartOpen(false); document.querySelector("#produk")?.scrollIntoView({ behavior: "smooth" }); }}>Mulai belanja</button>
          </div>
        )}
      </aside>

      <div className={toast ? "toast show" : "toast"} role="status" aria-live="polite">
        <span>✓</span>{toast}
        <button onClick={() => setCartOpen(true)}>Lihat tas</button>
      </div>
    </main>
  );
}