import { useLocation } from "react-router-dom"

import { GlassCard } from "@/components/ui-pp/GlassCard"
import { t, tr, ui } from "@/i18n/ui"
import { foodById } from "@/lib/catalog"
import { useLanguage } from "@/lib/language"
import type { BuilderHandoffState } from "@/types/domain"

export function BuilderScreen() {
  const { lang } = useLanguage()
  const location = useLocation()
  const handoff = location.state as BuilderHandoffState | null
  const ingredientIds = handoff?.ingredientIds ?? []

  return (
    <div className="flex flex-col gap-4">
      <GlassCard className="p-4">
        <p className="type-label text-[var(--ink-faint)]">
          {t(ui.stubs.comingSoon, lang)}
        </p>
        <h1 className="type-display mt-2 text-[var(--ink)]">
          {t(ui.stubs.builderTitle, lang)}
        </h1>
        <p className="type-body mt-2 text-[var(--ink-soft)]">
          {t(ui.stubs.builderBody, lang)}
        </p>
      </GlassCard>

      {ingredientIds.length > 0 ? (
        <GlassCard className="p-4">
          <p className="type-body-emphasis text-[var(--ink)]">
            {t(ui.stubs.builderHandoff, lang)}
          </p>
          <ul className="mt-3 flex flex-wrap gap-2">
            {ingredientIds.map((id) => {
              const item = foodById[id]
              if (!item) return null
              return (
                <li
                  key={id}
                  className="type-caption rounded-[var(--radius-pill)] px-3 py-2 font-bold text-[var(--ink)] ring-1 ring-[var(--border)]"
                  style={{ background: "var(--glass-fill)" }}
                >
                  {tr(item.name, lang)}
                </li>
              )
            })}
          </ul>
        </GlassCard>
      ) : null}
    </div>
  )
}