import type { Dictionary } from "@allai/i18n/server";
import type { Locale } from "@/config/i18n";

type PricingPlanId = "starter" | "creator" | "studio";

type PricingPlanData = {
  id: PricingPlanId;
  price: number;
  coins: number;
  approxNano: number;
  approxVeo: number;
};

export const pricingPlans: PricingPlanData[] = [
  {
    id: "starter",
    price: 99,
    coins: 99,
    approxNano: 24,
    approxVeo: 1
  },
  {
    id: "creator",
    price: 199,
    coins: 199,
    approxNano: 49,
    approxVeo: 3
  },
  {
    id: "studio",
    price: 999,
    coins: 999,
    approxNano: 249,
    approxVeo: 16
  }
];

type PricingPageProps = {
  locale: Locale;
  dictionary: Dictionary;
};

function formatFeature(template: string, plan: PricingPlanData) {
  const tokens: Record<string, string> = {
    coins: plan.coins.toString(),
    approxNano: plan.approxNano.toString(),
    approxVeo: plan.approxVeo.toString()
  };

  return template.replace(/\{\{(\w+)\}\}/g, (_, key: string) => tokens[key] ?? "");
}

export function PricingPage({ locale, dictionary }: PricingPageProps) {
  const pricingDictionary = dictionary.marketing.pricing;
  const formatter = new Intl.NumberFormat(locale, { style: "currency", currency: "RUB" });

  return (
    <main style={{ maxWidth: 1024, margin: "0 auto", padding: "72px 24px" }}>
      <header style={{ textAlign: "center", marginBottom: 48 }}>
        <h1 style={{ fontSize: 44, fontWeight: 700, marginBottom: 16 }}>{pricingDictionary.heroTitle}</h1>
        <p style={{ maxWidth: 640, margin: "0 auto", color: "var(--color-muted)", lineHeight: 1.7 }}>
          {pricingDictionary.heroSubtitle}
        </p>
      </header>

      <div style={{ display: "grid", gap: 24, gridTemplateColumns: "repeat(auto-fit, minmax(280px, 1fr))" }}>
        {pricingPlans.map((plan) => {
          const copy = pricingDictionary.plans[plan.id];
          const formattedFeatures = copy.features.map((feature) => formatFeature(feature, plan));

          return (
            <article
              key={plan.id}
              style={{
                borderRadius: 24,
                border: "1px solid var(--surface-border)",
                padding: "32px 28px",
                display: "grid",
                gap: 16,
                background: "var(--surface-base)"
              }}
            >
              <div>
                <h2 style={{ fontSize: 28, fontWeight: 700, margin: 0 }}>{copy.title}</h2>
                <p style={{ color: "var(--color-muted)", margin: "8px 0 0", lineHeight: 1.6 }}>{copy.description}</p>
              </div>
              <p style={{ fontSize: 32, fontWeight: 700, margin: "12px 0" }}>
                {formatter.format(plan.price)}
                <span style={{ fontSize: 16, fontWeight: 500 }}>{pricingDictionary.priceSuffix}</span>
              </p>
              <ul style={{ display: "grid", gap: 12, paddingLeft: 20 }}>
                {formattedFeatures.map((feature) => (
                  <li key={feature}>{feature}</li>
                ))}
              </ul>
              <button
                type="button"
                style={{
                  marginTop: 8,
                  borderRadius: 999,
                  border: "1px solid rgba(0,0,0,0.12)",
                  padding: "12px 18px",
                  background: "black",
                  color: "white",
                  fontWeight: 600,
                  cursor: "pointer"
                }}
              >
                {pricingDictionary.buttonLabel}
              </button>
            </article>
          );
        })}
      </div>

      <section style={{ marginTop: 72, textAlign: "center", display: "grid", gap: 12 }}>
        <h2 style={{ fontSize: 28, fontWeight: 700 }}>{pricingDictionary.footerTitle}</h2>
        <p style={{ color: "var(--color-muted)", lineHeight: 1.7 }}>{pricingDictionary.footerBody}</p>
      </section>
    </main>
  );
}
