"use client";

import { useState, useEffect } from "react";
import Link from "next/link";
import { Beaker, ArrowRight, X } from "lucide-react";
import { cn } from "@/lib/utils";

const DISMISS_KEY = "agentlens-demo-banner-dismissed";

interface DemoBannerProps {
  allTracesAreDemo: boolean;
}

export function DemoBanner({ allTracesAreDemo }: DemoBannerProps) {
  const [dismissed, setDismissed] = useState(true);

  useEffect(() => {
    setDismissed(localStorage.getItem(DISMISS_KEY) === "true");
  }, []);

  if (dismissed || !allTracesAreDemo) return null;

  function handleDismiss() {
    setDismissed(true);
    localStorage.setItem(DISMISS_KEY, "true");
  }

  return (
    <div
      className={cn(
        "relative mb-6 rounded-xl border border-emerald-500/20 bg-emerald-500/5 p-4",
        "flex items-center gap-4"
      )}
    >
      <div className="flex items-center justify-center w-10 h-10 rounded-lg bg-emerald-500/10 border border-emerald-500/20 shrink-0">
        <Beaker className="w-5 h-5 text-emerald-400" />
      </div>

      <div className="flex-1 min-w-0">
        <p className="text-sm text-emerald-200 font-medium">
          You are viewing sample data.
        </p>
        <p className="text-xs text-emerald-400/60 mt-0.5">
          Connect your agent to start collecting real traces.
        </p>
      </div>

      <Link
        href="/docs/getting-started"
        className="hidden sm:flex items-center gap-1.5 px-4 py-2 rounded-lg bg-emerald-500/10 border border-emerald-500/20 text-sm font-medium text-emerald-400 hover:bg-emerald-500/20 transition-colors shrink-0"
      >
        View Setup Guide
        <ArrowRight className="w-3.5 h-3.5" />
      </Link>

      <button
        onClick={handleDismiss}
        aria-label="Dismiss demo banner"
        className="p-1.5 rounded-lg text-emerald-400/40 hover:text-emerald-400/80 hover:bg-emerald-500/10 transition-colors shrink-0"
      >
        <X className="w-4 h-4" />
      </button>
    </div>
  );
}