import type { CSSProperties } from "react";
import type { RecipeDetail } from "@/types/recipe.types";
import {
  buildShoppingList,
  formatBreakdown,
  formatQuantity,
  type ShoppingItem,
} from "@/utils/pdfExport";
import { formatIngredientAmount } from "@/utils/ingredientQuantity.util";

export const PDF_PAGE_STYLE: CSSProperties = {
  width: "794px",
  minHeight: "1123px",
  boxSizing: "border-box",
  padding: "48px",
  fontFamily: "Inter, Arial, sans-serif",
  color: "#0f172a",
  background: "#ffffff",
};

type TranslateFn = (key: string, options?: Record<string, unknown>) => string;

export function DayOverviewPdfPage({
  dateLabel,
  slots,
  t,
}: {
  dateLabel: string;
  slots: Array<{ label: string; recipeName: string | null; portions?: number | null }>;
  t: TranslateFn;
}) {
  return (
    <div>
      <div style={{ borderBottom: "3px solid #16774c", paddingBottom: "16px", marginBottom: "24px" }}>
        <h1 style={{ fontSize: "28px", fontWeight: 800, margin: 0 }}>{t("pdf.dayPlanTitle", { date: dateLabel })}</h1>
      </div>
      <ul style={{ margin: 0, padding: 0, listStyle: "none" }}>
        {slots.map((slot) => (
          <li
            key={slot.label}
            style={{
              display: "flex",
              justifyContent: "space-between",
              padding: "10px 0",
              borderBottom: "1px solid #f1f5f9",
              fontSize: "14px",
            }}
          >
            <span style={{ fontWeight: 700, color: "#475569" }}>{slot.label}</span>
            <span>
              {slot.recipeName
                ? `${slot.recipeName}${slot.portions != null ? ` (${slot.portions}×)` : ""}`
                : t("pdf.emptySlot")}
            </span>
          </li>
        ))}
      </ul>
    </div>
  );
}

export function RecipePdfPage({
  recipe,
  categoryLabels,
  t,
  subtitle,
}: {
  recipe: RecipeDetail;
  categoryLabels: Record<number, string>;
  t: TranslateFn;
  subtitle?: string | null;
}) {
  return (
    <div>
      <div style={{ borderBottom: "3px solid #16774c", paddingBottom: "16px", marginBottom: "24px" }}>
        <span
          style={{
            display: "inline-block",
            background: "#d6f1e0",
            color: "#125f3f",
            borderRadius: "999px",
            padding: "4px 12px",
            fontSize: "12px",
            fontWeight: 700,
          }}
        >
          {categoryLabels[recipe.mealCategory]}
        </span>
        <h1 style={{ fontSize: "28px", fontWeight: 800, margin: "12px 0 0" }}>{recipe.name}</h1>
        {subtitle ? (
          <p style={{ color: "#64748b", margin: "6px 0 0", fontSize: "14px" }}>{subtitle}</p>
        ) : null}
        {recipe.prepTimeMinutes != null && (
          <p style={{ color: "#64748b", margin: "6px 0 0", fontSize: "14px" }}>
            {t("pdf.prepTime", { count: recipe.prepTimeMinutes })}
          </p>
        )}
      </div>

      <div style={{ display: "flex", gap: "12px", marginBottom: "28px" }}>
        {[
          { label: t("recipes.calories"), value: recipe.calories, suffix: "kcal" },
          { label: t("recipes.protein"), value: recipe.protein, suffix: "g" },
          { label: t("recipes.fat"), value: recipe.fat, suffix: "g" },
          { label: t("recipes.carbs"), value: recipe.carbs, suffix: "g" },
        ].map((m) => (
          <div
            key={m.label}
            style={{
              flex: 1,
              border: "1px solid #e2e8f0",
              borderRadius: "12px",
              padding: "12px",
              textAlign: "center",
            }}
          >
            <div style={{ fontSize: "20px", fontWeight: 800 }}>
              {m.value != null ? `${m.value} ${m.suffix}` : "—"}
            </div>
            <div style={{ fontSize: "11px", textTransform: "uppercase", color: "#64748b", marginTop: "2px" }}>
              {m.label}
            </div>
          </div>
        ))}
      </div>

      <h2 style={{ fontSize: "18px", fontWeight: 700, margin: "0 0 12px" }}>{t("recipes.ingredients")}</h2>
      <ul style={{ margin: "0 0 28px", padding: 0, listStyle: "none" }}>
        {recipe.ingredients.map((ing) => (
          <li
            key={ing.id}
            style={{
              display: "flex",
              justifyContent: "space-between",
              padding: "7px 0",
              borderBottom: "1px solid #f1f5f9",
              fontSize: "14px",
            }}
          >
            <span>{ing.name}</span>
            <span style={{ color: "#64748b" }}>
              {formatIngredientAmount(ing.amountGrams, ing.unit)}
            </span>
          </li>
        ))}
      </ul>

      <h2 style={{ fontSize: "18px", fontWeight: 700, margin: "0 0 12px" }}>{t("recipes.preparation")}</h2>
      <ol style={{ margin: 0, paddingLeft: "20px", fontSize: "14px", lineHeight: 1.6 }}>
        {recipe.steps.map((step) => (
          <li key={step.id} style={{ marginBottom: "8px" }}>
            {step.description}
          </li>
        ))}
      </ol>
    </div>
  );
}

export function ShoppingListPdfPage({
  items,
  recipes,
  generatedOn,
  categoryLabels,
  t,
  subtitle,
}: {
  items: ShoppingItem[];
  recipes: RecipeDetail[];
  generatedOn: string;
  categoryLabels: Record<number, string>;
  t: TranslateFn;
  subtitle?: string;
}) {
  return (
    <div style={{ display: "flex", flexDirection: "column", minHeight: "1027px" }}>
      <div style={{ borderBottom: "3px solid #16774c", paddingBottom: "16px", marginBottom: "24px" }}>
        <h1 style={{ fontSize: "28px", fontWeight: 800, margin: 0 }}>{t("pdf.shoppingList")}</h1>
        <p style={{ color: "#64748b", margin: "6px 0 0", fontSize: "14px" }}>
          {subtitle ?? t("pdf.generatedOn", { date: generatedOn, count: recipes.length })}
        </p>
      </div>

      {items.length === 0 ? (
        <p style={{ color: "#94a3b8", fontSize: "14px" }}>{t("pdf.emptyShoppingList")}</p>
      ) : (
        <ul style={{ flex: 1, margin: 0, padding: 0, listStyle: "none" }}>
          {items.map((item) => {
            const breakdown = formatBreakdown(item);
            return (
              <li
                key={`${item.name}-${item.unit ?? "g"}-${item.quantified}`}
                style={{
                  display: "flex",
                  alignItems: "baseline",
                  padding: "8px 0",
                  borderBottom: "1px solid #f1f5f9",
                  fontSize: "14px",
                }}
              >
                <span style={{ flex: "0 0 240px", fontWeight: 600 }}>{item.name}</span>
                <span style={{ flex: "0 0 110px", color: "#0f172a" }}>— {formatQuantity(item)}</span>
                {breakdown && <span style={{ color: "#94a3b8", fontSize: "12px" }}>({breakdown})</span>}
              </li>
            );
          })}
        </ul>
      )}

      <div style={{ marginTop: "32px", borderTop: "1px solid #e2e8f0", paddingTop: "16px" }}>
        <h3 style={{ fontSize: "13px", fontWeight: 700, textTransform: "uppercase", color: "#64748b", margin: "0 0 10px" }}>
          {t("pdf.recipesInExport")}
        </h3>
        {recipes.length === 0 ? (
          <p style={{ fontSize: "12px", color: "#94a3b8", margin: 0 }}>{t("pdf.emptySlot")}</p>
        ) : (
          <ol style={{ margin: 0, paddingLeft: "20px", fontSize: "12px", lineHeight: 1.7, color: "#475569" }}>
            {recipes.map((r) => (
              <li key={r.id}>
                {r.name} — {categoryLabels[r.mealCategory]}
                {r.calories != null ? ` · ${r.calories} kcal` : ""}
              </li>
            ))}
          </ol>
        )}
      </div>
    </div>
  );
}

export { buildShoppingList };
