import { createFileRoute, useNavigate } from "@tanstack/react-router";
import { useState } from "react";
import { PageHeader } from "@/components/common/PageHeader";
import { Button } from "@/components/ui/button";
import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from "@/components/ui/accordion";
import { SUBSCRIPTION, SUBSCRIPTION_PLANS } from "@/config/subscription";
import { SubscriptionDurationSelector, SubscriptionBenefitCard } from "@/features/subscription/components";
import { useCheckoutStore } from "@/store/checkout";
import { Crown } from "lucide-react";

export const Route = createFileRoute("/_public/subscription/")({
  head: () => ({ meta: [
    { title: `${SUBSCRIPTION.displayName} — Purple Zone` },
    { name: "description", content: "Unlock multipliers, cosmetics, marketplace perks and priority support with the Platform Subscription." },
    { property: "og:title", content: `${SUBSCRIPTION.displayName} — Purple Zone` },
    { property: "og:description", content: "Multipliers, cosmetics, marketplace perks and priority support." },
  ] }),
  component: SubscriptionLanding,
});

function SubscriptionLanding() {
  const [planId, setPlanId] = useState("3m");
  const navigate = useNavigate();
  const setCtx = useCheckoutStore((s) => s.setCtx);
  const plan = SUBSCRIPTION_PLANS.find((p) => p.id === planId)!;

  function subscribe() {
    setCtx({
      purchaseType: "subscription", itemId: plan.id, itemName: `${SUBSCRIPTION.displayName} · ${plan.label}`,
      price: plan.price, duration: plan.label, metadata: { planId: plan.id },
    });
    navigate({ to: "/checkout" });
  }

  return (
    <div className="mx-auto max-w-[1200px] px-4 py-8">
      <section className="relative overflow-hidden rounded-2xl border border-border gradient-hero p-8 text-center">
        <div className="inline-flex items-center gap-2 rounded-full border border-primary/40 bg-primary/10 px-3 py-1 text-xs text-primary"><Crown className="h-3.5 w-3.5" /> {SUBSCRIPTION.displayName}</div>
        <h1 className="mt-4 font-display text-4xl font-bold sm:text-5xl">Unlock the full Purple Zone experience</h1>
        <p className="mx-auto mt-3 max-w-2xl text-muted-foreground">Multipliers, cosmetics, marketplace perks, extra rewards and priority support. One subscription, everywhere on the platform.</p>
      </section>

      <section className="mt-10">
        <PageHeader title="Choose your plan" description="Cancel any time. Lifetime available." />
        <SubscriptionDurationSelector plans={SUBSCRIPTION_PLANS} selectedId={planId} onSelect={setPlanId} />
        <div className="mt-6 flex justify-center">
          <Button size="lg" onClick={subscribe} className="gradient-primary text-primary-foreground shadow-glow hover:opacity-95">
            Subscribe · ${plan.price.toFixed(2)}{plan.lifetime ? " (Lifetime)" : ""}
          </Button>
        </div>
      </section>

      <section className="mt-12">
        <PageHeader title="Everything you get" description="Configurable per category — the operator can turn benefits on or off in the admin panel." />
        <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-3">
          <SubscriptionBenefitCard title="Progression" items={SUBSCRIPTION.benefits.progression} />
          <SubscriptionBenefitCard title="Profile" items={SUBSCRIPTION.benefits.profile} />
          <SubscriptionBenefitCard title="Chat" items={SUBSCRIPTION.benefits.chat} />
          <SubscriptionBenefitCard title="Marketplace" items={SUBSCRIPTION.benefits.marketplace} />
          <SubscriptionBenefitCard title="Daily rewards" items={SUBSCRIPTION.benefits.daily} />
          <SubscriptionBenefitCard title="Platform" items={SUBSCRIPTION.benefits.platform} />
        </div>
      </section>

      <section className="mt-12">
        <PageHeader title="Questions" />
        <Accordion type="single" collapsible className="rounded-xl border border-border bg-card px-4">
          <AccordionItem value="a"><AccordionTrigger>Can I gift the subscription?</AccordionTrigger><AccordionContent>Yes. Choose a recipient at checkout.</AccordionContent></AccordionItem>
          <AccordionItem value="b"><AccordionTrigger>How do multipliers work?</AccordionTrigger><AccordionContent>Multipliers stack additively with product boosters, capped by the operator’s configuration.</AccordionContent></AccordionItem>
          <AccordionItem value="c"><AccordionTrigger>Can I cancel auto-renewal?</AccordionTrigger><AccordionContent>At any time from your account. Access remains until the current period ends.</AccordionContent></AccordionItem>
        </Accordion>
      </section>
    </div>
  );
}