"use client";

import { useRouter } from "next/navigation";
import { useState } from "react";
import { Sparkles } from "lucide-react";

import { GlassCard } from "@/components/shared/glass-card";
import { SupportActions } from "@/components/layout/support-actions";
import { Button } from "@/components/ui/button";
import { usePaidSupport } from "@/components/dashboard/paid-support-context";
import { toast } from "sonner";

type Props = {
  show: boolean;
};

export function OnboardingBanner({ show }: Props) {
  const router = useRouter();
  const paid = usePaidSupport();
  const [dismissing, setDismissing] = useState(false);

  if (!show) return null;

  async function complete() {
    setDismissing(true);
    try {
      const res = await fetch("/api/me/onboarding", { method: "POST" });
      if (!res.ok) {
        toast.error("Could not save progress");
        return;
      }
      toast.success("Welcome aboard — your coach will reach out soon.");
      router.refresh();
    } finally {
      setDismissing(false);
    }
  }

  return (
    <GlassCard className="border-primary/30 bg-primary/5 p-6 sm:p-8">
      <div className="flex flex-col gap-6 lg:flex-row lg:items-center lg:justify-between">
        <div className="flex gap-4">
          <div className="flex size-12 shrink-0 items-center justify-center rounded-2xl bg-primary/20 text-primary">
            <Sparkles className="size-6" />
          </div>
          <div>
            <p className="font-display text-lg font-semibold tracking-tight text-foreground">
              Welcome to the program
            </p>
            <p className="mt-2 max-w-xl text-sm leading-relaxed text-muted-foreground">
              {paid
                ? "Message us on WhatsApp with your goals and timeline. Your purchased plans are unlocked below."
                : "Explore programs and complete checkout to unlock your dashboard, downloads, and WhatsApp coach support."}
            </p>
          </div>
        </div>
        <div className="flex flex-col gap-3 sm:flex-row sm:items-center">
          <SupportActions layout="stack" size="sm" />
          <Button
            type="button"
            variant="outline"
            className="rounded-lg"
            disabled={dismissing}
            onClick={complete}
          >
            {dismissing ? "Saving…" : paid ? "I've messaged on WhatsApp" : "Got it"}
          </Button>
        </div>
      </div>
    </GlassCard>
  );
}