"use client";

import { useEffect, useState } from "react";
import { X, BookOpen, GitCompare, ShieldCheck } from "lucide-react";
import Link from "next/link";
import { useAuthStore } from "@/stores/authStore";

const STORAGE_KEY = "pv_seen_welcome";

export function WelcomeBanner() {
  const token = useAuthStore((s) => s.token);
  const [visible, setVisible] = useState(false);

  useEffect(() => {
    if (!token && localStorage.getItem(STORAGE_KEY) !== "1") {
      setVisible(true);
    }
  }, [token]);

  const dismiss = () => {
    localStorage.setItem(STORAGE_KEY, "1");
    setVisible(false);
  };

  if (!visible) return null;

  return (
    <div className="relative bg-card border border-border rounded-lg p-5 pr-10">
      <button
        onClick={dismiss}
        title="Dismiss"
        className="absolute top-3 right-3 p-1 rounded text-muted-foreground hover:text-foreground hover:bg-accent transition-colors"
      >
        <X className="w-4 h-4" />
      </button>

      <h2 className="font-semibold text-base mb-3">Welcome to PocketVeto</h2>

      <ul className="space-y-2 mb-4">
        <li className="flex items-start gap-2.5 text-sm text-muted-foreground">
          <BookOpen className="w-4 h-4 mt-0.5 shrink-0 text-primary" />
          Follow bills, members, or topics — get low-noise alerts when things actually move
        </li>
        <li className="flex items-start gap-2.5 text-sm text-muted-foreground">
          <GitCompare className="w-4 h-4 mt-0.5 shrink-0 text-primary" />
          See <em>what changed</em> in plain English when bills are amended
        </li>
        <li className="flex items-start gap-2.5 text-sm text-muted-foreground">
          <ShieldCheck className="w-4 h-4 mt-0.5 shrink-0 text-primary" />
          Verify every AI claim with <strong>Back to Source</strong> citations from the bill text
        </li>
      </ul>

      <div className="flex items-center gap-2">
        <Link
          href="/bills"
          onClick={dismiss}
          className="px-3 py-1.5 text-sm font-medium bg-primary text-primary-foreground rounded-md hover:bg-primary/90 transition-colors"
        >
          Browse Bills
        </Link>
        <button
          onClick={dismiss}
          className="px-3 py-1.5 text-sm text-muted-foreground hover:text-foreground transition-colors"
        >
          Dismiss
        </button>
      </div>
    </div>
  );
}