import { CircleGauge, Flame, Layers3, Ruler, SlidersHorizontal } from "lucide-react";
import { asPublicLocale, localizeSeriesName, localizeSurface } from "@/lib/product-i18n";
import { getCatalogTechnicalFacts } from "@/lib/product-technical-facts";

interface ProductTechnicalProfileProps {
  locale: string;
  product: {
    name: string;
    widthCm: number | null;
    surface: string | null;
    burnerCount: number | null;
    series: { name: string } | null;
  };
  features: string[];
  options: string[];
}

const copy = {
  tr: {
    eyebrow: "Teknik profil",
    title: "Konfigürasyon, tek bakışta.",
    intro: "Bu özet yalnız yayımlanmış model kaydındaki bilgileri gösterir. Nihai donanım ve opsiyonlar sipariş öncesinde model koduyla doğrulanır.",
    width: "Ürün genişliği",
    surface: "Üst yüzey",
    system: "Pişirme sistemi",
    layout: "Yerleşim",
    gas: "Gazlı pişirme",
    hybrid: "Gaz + elektrikli Ceran",
    electric: "Tam elektrikli Ceran",
    burners: "{count} kayıtlı gaz gözü",
    modelDependent: "Model kaydına göre",
    registered: "Kayıtlı özellikler",
    options: "Kayıtlı opsiyonlar",
    listed: "{count} özellik listelenmiş",
    listedOptions: "{count} opsiyon listelenmiş",
    confirm: "Bu model kaydında opsiyon listesi yok",
    factsEyebrow: "Katalog doğrulama notları",
    factsTitle: "Standart, modele bağlı ve opsiyonel ayrımı.",
    factsIntro: "Bu alan SKU kaydındaki kesin özelliklerden ayrıdır. Seri düzeyindeki yapılandırma olanaklarını ve sipariş öncesinde teyit edilmesi gereken noktaları gösterir.",
  },
  en: {
    eyebrow: "Technical profile",
    title: "Configuration at a glance.",
    intro: "This summary uses only data published for this model. Final equipment and options are confirmed against the model code before ordering.",
    width: "Product width",
    surface: "Top surface",
    system: "Cooking system",
    layout: "Layout",
    gas: "Gas cooking",
    hybrid: "Gas + electric Ceran",
    electric: "Fully electric Ceran",
    burners: "{count} recorded gas burners",
    modelDependent: "According to model record",
    registered: "Recorded features",
    options: "Recorded options",
    listed: "{count} features listed",
    listedOptions: "{count} options listed",
    confirm: "No options are listed in this model record",
    factsEyebrow: "Catalogue verification notes",
    factsTitle: "Standard, model-dependent and optional — clearly separated.",
    factsIntro: "This area is separate from the confirmed SKU record. It shows series-level configuration possibilities and the points that require confirmation before ordering.",
  },
  ru: {
    eyebrow: "Технический профиль",
    title: "Конфигурация одним взглядом.",
    intro: "В сводке используются только опубликованные данные модели. Окончательная комплектация и опции подтверждаются по коду модели до заказа.",
    width: "Ширина изделия",
    surface: "Верхняя поверхность",
    system: "Система приготовления",
    layout: "Компоновка",
    gas: "Газовое приготовление",
    hybrid: "Газ + электрический Ceran",
    electric: "Полностью электрический Ceran",
    burners: "Газовых конфорок в записи: {count}",
    modelDependent: "Согласно данным модели",
    registered: "Зарегистрированные функции",
    options: "Зарегистрированные опции",
    listed: "Указано функций: {count}",
    listedOptions: "Указано опций: {count}",
    confirm: "В записи этой модели список опций отсутствует",
    factsEyebrow: "Примечания к каталогу",
    factsTitle: "Стандарт, зависимость от модели и опции — отдельно.",
    factsIntro: "Этот раздел отделён от подтверждённых данных SKU. Здесь показаны возможности конфигурации серии и пункты, требующие подтверждения до заказа.",
  },
};

export default function ProductTechnicalProfile({ locale, product, features, options }: ProductTechnicalProfileProps) {
  const selected = asPublicLocale(locale);
  const t = copy[selected];
  const rawSeriesName = product.series?.name ?? "Norden";
  const seriesName = localizeSeriesName(rawSeriesName);
  const hybrid = /2\+2\s+Ceran/i.test(product.name);
  const electric = rawSeriesName === "VTC";
  const system = electric ? t.electric : hybrid ? t.hybrid : t.gas;
  const catalogFacts = getCatalogTechnicalFacts(product, selected);
  const format = (template: string, value: number) => template.replace("{count}", String(value));

  const metrics = [
    { icon: Ruler, label: t.width, value: product.widthCm ? `${product.widthCm} ${selected === "ru" ? "см" : "cm"}` : t.modelDependent },
    { icon: Layers3, label: t.surface, value: localizeSurface(product.surface, selected) ?? t.modelDependent },
    { icon: Flame, label: t.system, value: system },
    { icon: CircleGauge, label: t.layout, value: product.burnerCount ? format(t.burners, product.burnerCount) : t.modelDependent },
    { icon: SlidersHorizontal, label: t.registered, value: features.length ? format(t.listed, features.length) : t.modelDependent },
    { icon: SlidersHorizontal, label: t.options, value: options.length ? format(t.listedOptions, options.length) : t.confirm },
  ];

  return (
    <section className="relative overflow-hidden rounded-[2rem] border border-border bg-surface-1 px-6 py-10 md:px-10 md:py-14">
      <div className="pointer-events-none absolute -right-4 top-0 text-[clamp(5rem,14vw,12rem)] font-semibold uppercase leading-none tracking-[-0.08em] text-fg-primary/[0.025]">{seriesName}</div>
      <div className="relative grid gap-10 lg:grid-cols-[0.8fr_1.2fr]">
        <div>
          <span className="eyebrow">{t.eyebrow}</span>
          <h2 className="max-w-md text-3xl font-medium tracking-[-0.035em] md:text-5xl">{t.title}</h2>
          <p className="mt-6 max-w-lg text-sm leading-7 text-fg-secondary">{t.intro}</p>
        </div>
        <dl className="grid grid-cols-1 border-t border-border sm:grid-cols-2 lg:border-l lg:border-t-0">
          {metrics.map(({ icon: Icon, label, value }) => (
            <div key={label} className="min-h-32 border-b border-border p-5 sm:odd:border-r lg:p-6">
              <dt className="flex items-center gap-2 text-[10px] uppercase tracking-[0.18em] text-ember"><Icon size={14} />{label}</dt>
              <dd className="mt-4 max-w-xs text-sm font-medium leading-6 text-fg-primary md:text-base">{value}</dd>
            </div>
          ))}
        </dl>
      </div>
      <div className="relative mt-12 border-t border-border pt-10 md:mt-14 md:pt-12">
        <div className="grid gap-6 lg:grid-cols-[0.8fr_1.2fr] lg:gap-10">
          <div>
            <span className="eyebrow">{t.factsEyebrow}</span>
            <h3 className="max-w-lg text-2xl font-medium tracking-[-0.035em] md:text-4xl">{t.factsTitle}</h3>
            <p className="mt-5 max-w-xl text-sm leading-7 text-fg-secondary">{t.factsIntro}</p>
          </div>
          <div className="grid gap-3 sm:grid-cols-2">
            {catalogFacts.map((fact) => (
              <article key={fact.title} className="rounded-2xl border border-border bg-surface-0 p-5 md:p-6">
                <span className="inline-flex rounded-full border border-accent-border px-3 py-1 text-[9px] uppercase tracking-[0.15em] text-ember">
                  {fact.status}
                </span>
                <h4 className="mt-5 text-lg font-medium tracking-[-0.02em] text-fg-primary">{fact.title}</h4>
                <p className="mt-3 text-sm leading-6 text-fg-secondary">{fact.body}</p>
              </article>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}