"use client";

import { useMemo } from "react";
import { ArrowRight, BookOpen, MessageCircle, ShoppingBag } 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 { usePaidSupport } from "@/components/dashboard/paid-support-context";
import { supportLinks } from "@/lib/constants/site";

type Action = {
  href: string;
  label: string;
  description: string;
  icon: typeof ShoppingBag;
  external?: boolean;
};

const baseActions: Action[] = [
  {
    href: "/programs",
    label: "Browse plans",
    description: "Upgrade or add programs",
    icon: ShoppingBag,
  },
  {
    href: "/ebooks",
    label: "Ebooks library",
    description: "Guides and meal resources",
    icon: BookOpen,
  },
];

const paidOnlyAction: Action = {
  href: supportLinks.whatsapp,
  label: "WhatsApp coach",
  description: "Fast answers between check-ins",
  icon: MessageCircle,
  external: true,
};

export function QuickActions() {
  const paid = usePaidSupport();
  const actions = useMemo(
    () => (paid ? [...baseActions, paidOnlyAction] : baseActions),
    [paid],
  );

  return (
    <section>
      <h2 className="font-display text-base font-semibold tracking-tight text-foreground sm:text-lg">
        Quick actions
      </h2>
      <div className="mt-4 grid gap-4 sm:grid-cols-2 lg:grid-cols-3">
        {actions.map((action) => {
          const Icon = action.icon;
          const inner = (
            <GlassCard className="group flex h-full flex-col rounded-xl p-5 transition-premium hover:border-primary/25">
              <Icon className="size-5 text-primary" />
              <p className="mt-4 font-semibold text-foreground">{action.label}</p>
              <p className="mt-1 flex-1 text-sm text-muted-foreground">
                {action.description}
              </p>
              <span className="mt-4 inline-flex items-center gap-1 text-sm font-medium text-primary">
                Open
                <ArrowRight className="size-4 transition-transform group-hover:translate-x-0.5" />
              </span>
            </GlassCard>
          );
          if (action.external) {
            return (
              <a
                key={action.href}
                href={action.href}
                target="_blank"
                rel="noopener noreferrer"
                className="block"
              >
                {inner}
              </a>
            );
          }
          return (
            <ButtonLink key={action.href} href={action.href} variant="ghost" className="h-auto p-0">
              {inner}
            </ButtonLink>
          );
        })}
      </div>
      <div className="mt-6">
        <SupportActions />
      </div>
    </section>
  );
}