"use client";

import { useTranslations } from "next-intl";
import { cn } from "@/lib/utils";
import type { CafeTheme } from "@/lib/cafe-theme";
import { normalizeMenuTexture, resolveThemeColors } from "@/lib/cafe-theme";
import { qrMenuTextureShellProps } from "@/lib/qr-menu-texture";

const PREVIEW_SAMPLES = [
  { name: "اسپرسو", price: "۸۵٬۰۰۰ ت" },
  { name: "کاپوچینو", price: "۱۲۰٬۰۰۰ ت" },
] as const;

type GuestMenuTemplatePreviewProps = {
  theme: CafeTheme;
  cafeName?: string;
};

export function GuestMenuTemplatePreview({
  theme,
  cafeName = "کافه نمونه",
}: GuestMenuTemplatePreviewProps) {
  const t = useTranslations("settings.appearance");
  const colors = resolveThemeColors(theme);
  const style = theme.menuStyle;
  const textureShell = qrMenuTextureShellProps(
    normalizeMenuTexture(theme.menuTexture),
    colors.background
  );

  return (
    <div className="flex flex-col items-center gap-3">
      <p className="text-xs text-muted-foreground">{t("guestMenuPreviewHint")}</p>
      <div
        className="relative w-[220px] overflow-hidden rounded-[1.75rem] border-[6px] border-neutral-800 bg-neutral-900 shadow-xl"
        dir="rtl"
      >
        <div
          className="h-[380px] overflow-hidden"
          data-qr-texture={textureShell["data-qr-texture"]}
          style={textureShell.style}
        >
          <div
            className="border-b px-3 py-3 text-center"
            style={{ backgroundColor: colors.surface }}
          >
            <div
              className="mx-auto mb-1 size-8 rounded-full"
              style={{ backgroundColor: colors.primary }}
            />
            <p className="text-[11px] font-bold" style={{ color: colors.text }}>
              {cafeName}
            </p>
            <p className="text-[9px]" style={{ color: colors.textMuted }}>
              {t(`menuStyles.${style}`)} · {t(`menuTextures.${normalizeMenuTexture(theme.menuTexture)}`)}
            </p>
          </div>
          {style === "classic" ? (
            <div className="flex h-[calc(100%-4.5rem)]">
              <div
                className="flex w-12 flex-col gap-1 border-e py-2"
                style={{ backgroundColor: colors.surface }}
              >
                {["☕", "🍰", "🥤"].map((icon, i) => (
                  <div
                    key={icon}
                    className={cn(
                      "mx-auto flex size-8 items-center justify-center rounded-md text-xs",
                      i === 0 ? "text-white" : ""
                    )}
                    style={i === 0 ? { backgroundColor: colors.primary } : undefined}
                  >
                    {icon}
                  </div>
                ))}
              </div>
              <PreviewItems colors={colors} layout="list" />
            </div>
          ) : style === "grid" ? (
            <div className="grid grid-cols-2 gap-1.5 p-2">
              {PREVIEW_SAMPLES.map((item) => (
                <PreviewCard key={item.name} item={item} colors={colors} />
              ))}
            </div>
          ) : style === "magazine" ? (
            <div className="space-y-2 p-2">
              {PREVIEW_SAMPLES.map((item) => (
                <div
                  key={item.name}
                  className="overflow-hidden rounded-lg border shadow-sm"
                  style={{
                    borderColor: `${colors.textMuted}33`,
                    backgroundColor: colors.surface,
                  }}
                >
                  <div
                    className="h-14"
                    style={{ backgroundColor: colors.secondary }}
                  />
                  <div className="p-1.5">
                    <p className="text-[10px] font-semibold">{item.name}</p>
                    <p className="text-[9px]" style={{ color: colors.primary }}>
                      {item.price}
                    </p>
                  </div>
                </div>
              ))}
            </div>
          ) : (
            <PreviewItems
              colors={colors}
              layout={style === "compact" ? "compact" : "list"}
            />
          )}
        </div>
      </div>
    </div>
  );
}

function PreviewItems({
  colors,
  layout,
}: {
  colors: ReturnType<typeof resolveThemeColors>;
  layout: "list" | "compact";
}) {
  return (
    <div className="flex-1 space-y-1.5 p-2">
      {PREVIEW_SAMPLES.map((item) => (
        <div
          key={item.name}
          className={cn(
            "flex items-center justify-between rounded border px-2 shadow-sm",
            layout === "compact" ? "py-1" : "py-1.5"
          )}
          style={{
            borderColor: `${colors.textMuted}33`,
            backgroundColor: colors.surface,
          }}
        >
          <span className="text-[10px] font-medium">{item.name}</span>
          <span className="text-[9px] font-semibold" style={{ color: colors.primary }}>
            {item.price}
          </span>
        </div>
      ))}
    </div>
  );
}

function PreviewCard({
  item,
  colors,
}: {
  item: (typeof PREVIEW_SAMPLES)[number];
  colors: ReturnType<typeof resolveThemeColors>;
}) {
  return (
    <div
      className="overflow-hidden rounded-lg border"
      style={{ borderColor: `${colors.textMuted}33`, backgroundColor: colors.surface }}
    >
      <div className="aspect-square" style={{ backgroundColor: colors.secondary }} />
      <div className="p-1">
        <p className="text-[9px] font-semibold">{item.name}</p>
        <p className="text-[8px]" style={{ color: colors.primary }}>
          {item.price}
        </p>
      </div>
    </div>
  );
}
