"use client";

import React, { useState } from "react";
import Link from "next/link";
import { useI18n } from "@/lib/i18n/context";
import { Check } from "lucide-react";
import { PaywallModal } from "@/components/paywall/PaywallModal";

export function PricingSection() {
  const { language } = useI18n();
  const isDe = language === "de";
  const [billingCycle, setBillingCycle] = useState<"pass" | "annual">("pass");
  const [paywallOpen, setPaywallOpen] = useState(false);
  const [paywallPlan, setPaywallPlan] = useState<"weekly" | "annual" | "lifetime">("annual");

  return (
    <section id="pricing" className="w-full bg-white font-sans py-20 relative">
      <div className="max-w-[1440px] mx-auto px-4 sm:px-8 border-x border-[#E2E8F0] relative">

        {/* Header */}
        <div className="flex flex-col md:flex-row md:items-end justify-between mb-16 pb-6 border-b border-[#E2E8F0]">
          <div>
            <div className="flex items-center gap-2 mb-3">
              <span className="w-2.5 h-2.5 bg-black"></span>
              <span className="font-mono text-xs uppercase tracking-caps font-semibold text-[#475569]">
                {isDe ? "TARIFE & LIZENZEN" : "TRANSPARENT PRICING"}
              </span>
            </div>
            <h2 className="font-display text-3xl sm:text-4xl lg:text-5xl font-bold tracking-tightest text-black">
              {isDe ? "Transparente Preise. Keine Abo-Falle." : "Transparent Pricing. No Lock-in."}
            </h2>
          </div>

          {/* Toggle */}
          <div className="mt-6 md:mt-0 flex items-center p-1 bg-[#F1F5F9] border border-[#E2E8F0] font-mono text-xs uppercase">
            <button
              onClick={() => setBillingCycle("pass")}
              className={`px-4 py-2 transition-all ${
                billingCycle === "pass"
                  ? "bg-black text-white font-semibold"
                  : "text-[#64748B] hover:text-black"
              }`}
            >
              {isDe ? "Wochen-Pass" : "Weekly Pass"}
            </button>
            <button
              onClick={() => setBillingCycle("annual")}
              className={`px-4 py-2 transition-all ${
                billingCycle === "annual"
                  ? "bg-black text-white font-semibold"
                  : "text-[#64748B] hover:text-black"
              }`}
            >
              {isDe ? "Jahres-Lizenz (-35%)" : "Annual Pass (-35%)"}
            </button>
          </div>
        </div>

        {/* Pricing Cards Grid (3 Tiers) */}
        <div className="grid grid-cols-1 md:grid-cols-3 gap-8 items-stretch">
          {/* Card 1: Free Starter */}
          <div className="p-8 bg-[#F8FAFC] border border-[#E2E8F0] flex flex-col justify-between space-y-6">
            <div className="space-y-4">
              <div className="flex items-center justify-between">
                <span className="font-mono text-xs uppercase tracking-caps text-[#64748B] font-semibold">
                  {isDe ? "Kostenlos" : "Free Plan"}
                </span>
                <span className="font-mono text-[10px] bg-[#E2E8F0] px-2 py-0.5 uppercase font-medium">
                  {isDe ? "Dauerhaft 0 €" : "Forever Free"}
                </span>
              </div>
              <h3 className="font-display text-2xl font-bold text-black">
                {isDe ? "Starter" : "Starter"}
              </h3>
              <div className="flex items-baseline gap-1">
                <span className="font-display text-4xl font-bold text-black">{isDe ? "0 €" : "$0"}</span>
                <span className="text-xs text-[#64748B] font-mono">/ {isDe ? "dauerhaft" : "forever"}</span>
              </div>
              <p className="text-xs text-[#475569] leading-relaxed">
                {isDe
                  ? "Ideal für Privatpersonen und gelegentliche Belege. Volle KI-Power & Exporte."
                  : "Perfect for individuals and casual receipt tracking. Full AI power & instant exports."}
              </p>

              <div className="pt-4 border-t border-[#E2E8F0] space-y-2.5 font-mono text-xs text-[#161C22]">
                <div className="flex items-center gap-2">
                  <Check className="w-4 h-4 text-emerald-600 shrink-0" />
                  <span className="font-semibold">{isDe ? "15 Gratis-Scans / Monat" : "15 Free Scans / month"}</span>
                </div>
                <div className="flex items-center gap-2">
                  <Check className="w-4 h-4 text-emerald-600 shrink-0" />
                  <span>{isDe ? "Volle KI-Erkennung & Posten" : "Full AI Item & Tax Extraction"}</span>
                </div>
                <div className="flex items-center gap-2">
                  <Check className="w-4 h-4 text-emerald-600 shrink-0" />
                  <span>{isDe ? "Exporte: Dual-Sheet Excel, CSV & PDF" : "Exports: Dual-Sheet Excel, CSV & PDF"}</span>
                </div>
                <div className="flex items-center gap-2">
                  <Check className="w-4 h-4 text-emerald-600 shrink-0" />
                  <span>{isDe ? "Standard Cloud-Speicher" : "Standard Cloud Storage"}</span>
                </div>
              </div>
            </div>

            <Link
              href="/dashboard"
              className="w-full py-3 text-center bg-white border border-black text-black font-mono text-xs uppercase tracking-caps hover:bg-[#F1F5F9] transition-colors block font-medium"
            >
              {isDe ? "Kostenlos starten" : "Start for Free"}
            </Link>
          </div>

          {/* Card 2: Pro (Featured) */}
          <div className="p-8 bg-black text-white border-2 border-black flex flex-col justify-between space-y-6 relative">
            <div className="absolute -top-3 right-6 bg-white text-black font-mono text-[10px] uppercase font-bold tracking-widest px-2.5 py-0.5 border border-black">
              {isDe ? "POPULÄRSTE WAHL" : "MOST POPULAR"}
            </div>

            <div className="space-y-4">
              <div className="flex items-center justify-between">
                <span className="font-mono text-xs uppercase tracking-caps text-slate-400 font-semibold">
                  PRO PLAN
                </span>
                <span className="font-mono text-[10px] bg-slate-800 text-slate-300 px-2 py-0.5 uppercase">
                  Unlimited
                </span>
              </div>
              <h3 className="font-display text-2xl font-bold text-white">
                {billingCycle === "pass"
                  ? isDe
                    ? "Wochen-Pass"
                    : "Weekly Pass"
                  : isDe
                  ? "Jahres-Pro"
                  : "Annual Pro"}
              </h3>
              <div className="flex items-baseline gap-1">
                <span className="font-display text-4xl font-bold text-white">
                  {billingCycle === "pass" ? (isDe ? "4,99 €" : "$4.99") : (isDe ? "39,99 €" : "$39.99")}
                </span>
                <span className="text-xs text-slate-400 font-mono">
                  {billingCycle === "pass" ? (isDe ? "/ Woche" : "/ week") : (isDe ? "/ Jahr" : "/ year")}
                </span>
              </div>
              <p className="text-xs text-slate-300 leading-relaxed font-sans">
                {isDe
                  ? "Unbegrenzte Belege, Stapel-Upload, Projekte & alle Exportformate."
                  : "Unlimited receipts, batch upload, projects & all export formats."}
              </p>

              <div className="pt-4 border-t border-slate-800 space-y-2.5 font-mono text-xs text-slate-200">
                <div className="flex items-center gap-2">
                  <Check className="w-4 h-4 text-emerald-400 shrink-0" />
                  <span className="font-bold text-white">{isDe ? "Unbegrenzte Beleg-Scans" : "Unlimited Receipt Scans"}</span>
                </div>
                <div className="flex items-center gap-2">
                  <Check className="w-4 h-4 text-emerald-400 shrink-0" />
                  <span>{isDe ? "Bulk-Upload (Massen-Upload per Drag & Drop)" : "Bulk Upload (drop 50+ files at once)"}</span>
                </div>
                <div className="flex items-center gap-2">
                  <Check className="w-4 h-4 text-emerald-400 shrink-0" />
                  <span>{isDe ? "Unbegrenzte Projekte & Kostenstellen" : "Unlimited Projects & Cost Centers"}</span>
                </div>
                <div className="flex items-center gap-2">
                  <Check className="w-4 h-4 text-emerald-400 shrink-0" />
                  <span>{isDe ? "Alle Exporte: Dual-Sheet Excel, CSV & PDF" : "All Exports: Dual-Sheet Excel, CSV & PDF"}</span>
                </div>
                <div className="flex items-center gap-2">
                  <Check className="w-4 h-4 text-emerald-400 shrink-0" />
                  <span>{isDe ? "Unbegrenztes Langzeit-Archiv" : "Unlimited Long-Term Cloud Archive"}</span>
                </div>
              </div>
            </div>

            <button
              type="button"
              onClick={() => {
                setPaywallPlan(billingCycle === "pass" ? "weekly" : "annual");
                setPaywallOpen(true);
              }}
              className="w-full py-3.5 text-center bg-white text-black font-mono text-xs uppercase tracking-caps hover:bg-slate-200 transition-colors block font-bold cursor-pointer"
            >
              {billingCycle === "pass" 
                ? (isDe ? "3 Tage kostenlos testen" : "Start 3-Day Free Trial") 
                : (isDe ? "Jetzt Pro Freischalten" : "Unlock Pro Now")}
            </button>
          </div>

          {/* Card 3: Lifetime */}
          <div className="p-8 bg-[#F8FAFC] border border-[#E2E8F0] flex flex-col justify-between space-y-6">
            <div className="space-y-4">
              <div className="flex items-center justify-between">
                <span className="font-mono text-xs uppercase tracking-caps text-[#64748B] font-semibold">
                  {isDe ? "LIFETIME DEAL" : "LIFETIME DEAL"}
                </span>
                <span className="font-mono text-[10px] bg-[#E2E8F0] px-2 py-0.5 uppercase">
                  {isDe ? "Einmalig" : "One-Time"}
                </span>
              </div>

              <h3 className="font-display text-2xl font-bold text-black">
                {isDe ? "Lifetime Lizenz" : "Lifetime License"}
              </h3>
              <div className="flex items-baseline gap-1">
                <span className="font-display text-4xl font-bold text-black">{isDe ? "59,99 €" : "$59.99"}</span>
                <span className="text-xs text-[#64748B] font-mono">{isDe ? "/ einmalig" : "/ one-time"}</span>
              </div>
              <p className="text-xs text-[#475569] leading-relaxed font-sans">
                {isDe
                  ? "Kein Abo, keine Folgekosten. Einmal zahlen und für immer unbegrenzt nutzen."
                  : "No subscriptions, no hidden recurring fees. Pay once and own it forever."}
              </p>

              <div className="pt-4 border-t border-[#E2E8F0] space-y-2.5 font-mono text-xs text-[#161C22]">
                <div className="flex items-center gap-2">
                  <Check className="w-4 h-4 text-emerald-600 shrink-0" />
                  <span className="font-semibold">{isDe ? "Lebenslanger unbegrenzter Zugriff" : "Lifetime Unlimited Access"}</span>
                </div>
                <div className="flex items-center gap-2">
                  <Check className="w-4 h-4 text-emerald-600 shrink-0" />
                  <span>{isDe ? "Unbegrenzte Scans & Bulk-Upload" : "Unlimited Scans & Bulk Upload"}</span>
                </div>
                <div className="flex items-center gap-2">
                  <Check className="w-4 h-4 text-emerald-600 shrink-0" />
                  <span>{isDe ? "Unbegrenzte Projekte & Kostenstellen" : "Unlimited Projects & Cost Centers"}</span>
                </div>
                <div className="flex items-center gap-2">
                  <Check className="w-4 h-4 text-emerald-600 shrink-0" />
                  <span>{isDe ? "Alle Exporte: Dual-Sheet Excel, CSV & PDF" : "All Exports: Dual-Sheet Excel, CSV & PDF"}</span>
                </div>
                <div className="flex items-center gap-2">
                  <Check className="w-4 h-4 text-emerald-600 shrink-0" />
                  <span>{isDe ? "Alle zukünftigen Updates inklusive" : "All future updates included"}</span>
                </div>
              </div>
            </div>

            <button
              type="button"
              onClick={() => {
                setPaywallPlan("lifetime");
                setPaywallOpen(true);
              }}
              className="w-full py-3 text-center bg-black text-white font-mono text-xs uppercase tracking-caps hover:bg-[#334155] transition-colors block font-medium cursor-pointer"
            >
              {isDe ? "Lifetime Lizenz sichern" : "Get Lifetime License"}
            </button>
          </div>
        </div>

        {/* Payment methods footer */}
        <div className="mt-12 pt-6 border-t border-[#E2E8F0] flex flex-wrap items-center justify-between gap-4 text-xs text-[#64748B] font-mono">
          <span>{isDe ? "Zahlung via Stripe, Apple Pay, Google Pay & Kreditkarte" : "Payment via Stripe, Apple Pay, Google Pay & Credit Card"}</span>
          <span>{isDe ? "Sofortige Freischaltung · SSL Verschlüsselt" : "Instant Activation · SSL Encrypted"}</span>
        </div>
      </div>

      {/* Paywall Modal for Direct CTA Triggering */}
      <PaywallModal
        isOpen={paywallOpen}
        onClose={() => setPaywallOpen(false)}
        reason="scanLimit"
        initialPlan={paywallPlan}
      />
    </section>
  );
}
