"use client";

import { FormEvent, useState } from "react";
import type { Product } from "@/lib/types";
import { DEFAULT_LANGUAGE, LANGUAGES, Language, translations } from "@/lib/i18n";

type Status = "idle" | "loading" | "success" | "not-found" | "error";

export default function Home() {
  const [query, setQuery] = useState("");
  const [status, setStatus] = useState<Status>("idle");
  const [product, setProduct] = useState<Product | null>(null);
  const [errorMessage, setErrorMessage] = useState<string>("");
  const [language, setLanguage] = useState<Language>(DEFAULT_LANGUAGE);
  const t = translations[language];

  async function runSearch(id: string, lang: Language) {
    if (!id) return;

    setStatus("loading");
    setProduct(null);
    setErrorMessage("");

    try {
      const response = await fetch(
        `/api/product/${encodeURIComponent(id)}?lang=${lang}`
      );
      const data = await response.json();

      if (response.status === 404) {
        setStatus("not-found");
        return;
      }

      if (!response.ok) {
        setStatus("error");
        setErrorMessage(data.error ?? t.genericError);
        return;
      }

      setProduct(data.product);
      setStatus("success");
    } catch {
      setStatus("error");
      setErrorMessage(t.networkError);
    }
  }

  function handleSubmit(event: FormEvent<HTMLFormElement>) {
    event.preventDefault();
    runSearch(query.trim(), language);
  }

  function handleDemoSearch() {
    const demoId = "10750058";
    setQuery(demoId);
    runSearch(demoId, language);
  }

  function handleLanguageChange(next: Language) {
    setLanguage(next);
    // Ha már van kikeresett termék (vagy folyamatban van egy keresés),
    // nyelvváltáskor újra lekérjük ugyanazt az azonosítót az új nyelven,
    // hogy a termékadatok (név, USP) is frissüljenek.
    const trimmed = query.trim();
    if (trimmed && (status === "success" || status === "not-found")) {
      runSearch(trimmed, next);
    }
  }

  return (
    <div className="min-h-dvh bg-melinda-charcoal px-4 py-6 sm:px-6 sm:py-8 lg:px-10">
      <div className="mx-auto max-w-6xl">
        <header className="mb-6 flex flex-col gap-4 border-b border-melinda-gold/20 pb-6 sm:flex-row sm:items-center sm:justify-between">
          {/* eslint-disable-next-line @next/next/no-img-element */}
          <img
            src="https://melindainstal1.cdn.shoprenter.hu/custom/melindainstal1/image/data/Logo-MI_Slogan-1.svg?v=1758089525"
            alt="Melinda Instal"
            className="h-7 w-auto sm:h-8"
          />

          <div className="flex w-full flex-col gap-3 sm:w-auto sm:flex-row sm:items-center">
            <LanguageSwitcher value={language} onChange={handleLanguageChange} />

            <form
              onSubmit={handleSubmit}
              className="flex w-full gap-2 sm:max-w-xs"
            >
              <input
                value={query}
                onChange={(e) => setQuery(e.target.value)}
                placeholder={t.searchPlaceholder}
                className="flex-1 rounded-lg border border-melinda-gold/30 bg-melinda-charcoal-light px-3 py-2 text-sm text-zinc-50 outline-none placeholder:text-zinc-500"
              />
              <button
                type="submit"
                disabled={status === "loading" || !query.trim()}
                className="whitespace-nowrap rounded-lg bg-melinda-gold px-4 py-2 text-sm font-semibold text-melinda-charcoal transition-colors hover:bg-melinda-gold-dark disabled:cursor-not-allowed disabled:opacity-40"
              >
                {status === "loading" ? t.searchButtonLoading : t.searchButton}
              </button>
            </form>
          </div>
        </header>

        {status === "not-found" && (
          <p className="rounded-lg border border-melinda-gold/30 bg-melinda-charcoal-light px-4 py-3 text-sm text-melinda-gold">
            {t.notFound(query.trim())}
          </p>
        )}

        {status === "error" && (
          <p className="rounded-lg bg-red-950/40 px-4 py-3 text-sm text-red-300">
            {errorMessage}
          </p>
        )}

        {status === "idle" && (
          <div className="flex flex-col items-center gap-5 rounded-2xl border border-melinda-gold/20 bg-melinda-charcoal-light px-6 py-16 text-center sm:py-24">
            <span className="flex h-14 w-14 items-center justify-center rounded-full bg-melinda-gold/10">
              <svg
                viewBox="0 0 24 24"
                fill="currentColor"
                aria-hidden="true"
                className="h-7 w-7 text-melinda-gold"
              >
                <path d="M12 2c-1.2 3-4 4.4-4 8.4a4 4 0 008 0c0-1.1-.4-2.1-1-3 .4 2-.9 3.2-2 3.2-1.4 0-2.1-1.6-1.1-3.2.8-1.6 1.1-3.2.1-5.4zM6 12.4a6 6 0 1012 0c0-3-2-5.2-3-8.4 1 4.4-1 6.6-3 6.6s-3-2.2-2-5.6c-2.2 2.2-4 4.4-4 7.4z" />
              </svg>
            </span>

            <div>
              <h2 className="text-xl font-semibold text-zinc-50 sm:text-2xl">
                {t.idleTitle}
              </h2>
              <p className="mx-auto mt-2 max-w-md text-sm text-zinc-400">
                {t.idleDescription}
              </p>
            </div>

            <button
              type="button"
              onClick={handleDemoSearch}
              className="rounded-lg border border-melinda-gold/40 bg-melinda-charcoal px-4 py-2 text-xs font-medium uppercase tracking-wide text-melinda-gold transition-colors hover:bg-melinda-gold/10"
            >
              {t.demoButton}
            </button>
          </div>
        )}

        {status === "loading" && (
          <p className="py-16 text-center text-sm text-zinc-500 sm:py-24">
            {t.loading}
          </p>
        )}

        {status === "success" && product && (
          <ProductDetail product={product} labels={t} />
        )}
      </div>
    </div>
  );
}

function LanguageSwitcher({
  value,
  onChange,
}: {
  value: Language;
  onChange: (language: Language) => void;
}) {
  return (
    <div
      role="group"
      aria-label="Nyelv / Limbă"
      className="flex shrink-0 gap-1 rounded-lg border border-melinda-gold/30 bg-melinda-charcoal-light p-1"
    >
      {LANGUAGES.map((lang) => (
        <button
          key={lang.code}
          type="button"
          onClick={() => onChange(lang.code)}
          aria-pressed={value === lang.code}
          className={`rounded-md px-3 py-1.5 text-xs font-semibold transition-colors ${
            value === lang.code
              ? "bg-melinda-gold text-melinda-charcoal"
              : "text-melinda-gold hover:bg-melinda-gold/10"
          }`}
        >
          {lang.label}
        </button>
      ))}
    </div>
  );
}

function ProductDetail({
  product,
  labels,
}: {
  product: Product;
  labels: (typeof translations)[Language];
}) {
  return (
    <div>
      {/* Teljes szélességű fejléc: név, cikkszám, brand */}
      <div className="rounded-xl border border-melinda-gold/20 bg-melinda-charcoal-light px-5 py-4">
        <h2 className="text-2xl font-semibold text-zinc-50 sm:text-3xl">
          {product.name}
        </h2>
        <p className="mt-1.5 text-sm text-zinc-400">
          {labels.itemIdLabel}:{" "}
          <span className="text-zinc-100">{product.productId}</span>
          {product.brand && (
            <>
              {" "}
              · {labels.brandLabel}:{" "}
              <span className="text-zinc-100">{product.brand}</span>
            </>
          )}
        </p>
      </div>

      {/* Kép és a "Miért jó választás?" csempék egymás mellett */}
      <div className="mt-6 grid grid-cols-1 gap-6 lg:grid-cols-[minmax(0,1fr)_minmax(0,1.4fr)]">
        <div className="overflow-hidden rounded-2xl border border-melinda-gold/30 bg-melinda-charcoal-light">
          {/* eslint-disable-next-line @next/next/no-img-element */}
          <img
            src={product.imageUrl}
            alt={product.name}
            className="aspect-square w-full object-contain p-6 sm:p-10"
          />
        </div>

        {product.benefits && product.benefits.length > 0 && (
          <div>
            <h3 className="text-lg font-semibold text-zinc-50">
              {labels.benefitsHeading}
            </h3>
            <div className="mt-4 grid grid-cols-1 gap-3 sm:grid-cols-2">
              {product.benefits.map((benefit) => (
                <div
                  key={benefit.title}
                  className="rounded-xl border border-melinda-gold/30 bg-melinda-charcoal-light p-4"
                >
                  <p className="text-sm font-semibold text-melinda-gold">
                    {benefit.title}
                  </p>
                  <p className="mt-1.5 text-sm leading-6 text-zinc-400">
                    {benefit.description}
                  </p>
                </div>
              ))}
            </div>
          </div>
        )}
      </div>

      {/* Kiegészítő termékek: teljes szélességű vízszintes kártyasor */}
      {product.relatedProducts && product.relatedProducts.length > 0 && (
        <div className="mt-8">
          <h3 className="text-sm font-semibold uppercase tracking-wide text-melinda-gold">
            {labels.relatedProductsHeading}
          </h3>
          <div className="mt-3 grid grid-cols-2 gap-3 sm:grid-cols-3 lg:grid-cols-4">
            {product.relatedProducts.map((rp) => (
              <div
                key={rp.productId}
                className="flex flex-col items-center gap-2 rounded-xl border border-melinda-gold/20 bg-melinda-charcoal-light p-3 text-center"
              >
                {/* eslint-disable-next-line @next/next/no-img-element */}
                <img
                  src={rp.imageUrl}
                  alt={rp.name}
                  className="h-16 w-16 rounded-lg bg-melinda-charcoal object-contain p-1.5"
                />
                <p className="line-clamp-2 text-sm font-medium text-zinc-50">
                  {rp.name}
                </p>
                <p className="line-clamp-2 text-xs text-zinc-400">
                  {rp.description}
                </p>
                <p className="text-[11px] uppercase tracking-wide text-melinda-gold">
                  {rp.category} · {rp.productId}
                </p>
              </div>
            ))}
          </div>
        </div>
      )}
    </div>
  );
}