import Image from "next/image";
import { ArrowUpRight, CheckCircle2, Download } from "lucide-react";

import { GlassCard } from "@/components/shared/glass-card";
import { SupportActions } from "@/components/layout/support-actions";
import { ButtonLink } from "@/components/ui/button-link";
import { Badge } from "@/components/ui/badge";
import type { Product } from "@/types";

type Props = {
  plans: Product[];
  compact?: boolean;
};

export function ActivePlansPanel({ plans, compact }: Props) {
  if (plans.length === 0) {
    return (
      <GlassCard className="p-10 text-center sm:p-12">
        <p className="text-lg font-medium text-foreground">No active plans yet</p>
        <p className="mx-auto mt-2 max-w-md text-sm text-muted-foreground">
          Purchase a program to unlock coaching, downloads, and your personalized dashboard.
        </p>
        <ButtonLink href="/programs" className="mt-8 inline-flex rounded-xl px-6">
          Browse programs
        </ButtonLink>
      </GlassCard>
    );
  }

  return (
    <div className={compact ? "space-y-4" : "grid gap-6 sm:grid-cols-2"}>
      {plans.map((plan) => (
        <GlassCard
          key={plan.id}
          className="overflow-hidden p-0 transition-shadow hover:shadow-lg"
        >
          <div
            className={
              compact
                ? "relative aspect-[16/10] w-full bg-muted sm:aspect-[3/2]"
                : "relative aspect-[16/10] w-full bg-muted"
            }
          >
            <Image
              src={plan.image}
              alt=""
              fill
              className="object-cover object-top"
              sizes="(max-width:640px) 100vw, 400px"
            />
            <div className="absolute inset-0 bg-gradient-to-t from-background via-background/40 to-transparent" />
            <Badge className="absolute left-4 top-4 rounded-full bg-primary/90 text-primary-foreground">
              Active
            </Badge>
          </div>
          <div className="space-y-4 p-6 sm:p-8">
            <div>
              <p className="text-xs font-semibold uppercase tracking-widest text-primary">
                {plan.type}
              </p>
              <h3 className="font-display mt-1 text-lg font-semibold leading-tight tracking-tight text-foreground sm:text-xl">
                {plan.title}
              </h3>
            </div>
            <p className="text-sm leading-relaxed text-muted-foreground line-clamp-3">
              {plan.description}
            </p>
            <ul className="space-y-2 text-sm text-muted-foreground">
              {plan.features.slice(0, 3).map((f) => (
                <li key={f} className="flex gap-2">
                  <CheckCircle2 className="mt-0.5 size-4 shrink-0 text-primary" />
                  <span>{f}</span>
                </li>
              ))}
            </ul>
            <div className="flex flex-wrap gap-3 pt-2">
              {plan.pdfUrl ? (
                <ButtonLink href={`/api/downloads/${plan.id}`} className="rounded-lg">
                  <Download className="size-4" />
                  Download PDF
                </ButtonLink>
              ) : (
                <span className="inline-flex items-center gap-2 rounded-lg border border-emerald-500/30 bg-emerald-500/10 px-4 py-2 text-sm font-medium text-emerald-600 dark:text-emerald-400">
                  <CheckCircle2 className="size-4" />
                  Coaching access active
                </span>
              )}
              {!compact && plan.type === "program" ? (
                <ButtonLink href="/programs" variant="outline" className="rounded-lg">
                  <ArrowUpRight className="size-4" />
                  Update plan
                </ButtonLink>
              ) : null}
            </div>
            {!compact ? (
              <SupportActions size="sm" className="border-t border-border/60 pt-4" />
            ) : null}
          </div>
        </GlassCard>
      ))}
    </div>
  );
}