import { Sparkles, X } from 'lucide-react';

import { useState } from 'react';

import { router } from '@inertiajs/react';

import { Button } from '@/Components/ui/button';
import type { ChangelogData } from '@/types';

interface ChangelogBannerProps {
  changelog: ChangelogData;
}

export default function ChangelogBanner({ changelog }: ChangelogBannerProps) {
  const [dismissed, setDismissed] = useState(false);

  if (dismissed || !changelog.has_new || changelog.entries.length === 0) {
    return null;
  }

  const latestEntry = changelog.entries[0];

  const handleDismiss = () => {
    setDismissed(true);
    router.patch(
      route('user.dismiss-changelog'),
      {},
      {
        preserveScroll: true,
        preserveState: true,
      },
    );
  };

  return (
    <div
      className="rounded-lg border border-primary/20 bg-primary/5 p-4"
      role="status"
      aria-live="polite"
    >
      <div className="flex items-start justify-between gap-3">
        <div className="flex items-start gap-3">
          <Sparkles className="mt-0.5 h-4 w-4 shrink-0 text-primary" />
          <div className="space-y-1">
            <p className="text-sm font-medium text-foreground">
              What&apos;s New &mdash; {latestEntry.date}
            </p>
            <ul className="space-y-0.5">
              {latestEntry.items.map((item, i) => (
                <li key={i} className="text-sm text-muted-foreground">
                  &bull; {item}
                </li>
              ))}
            </ul>
          </div>
        </div>
        <Button
          variant="ghost"
          size="icon"
          className="h-6 w-6 shrink-0"
          onClick={handleDismiss}
          aria-label="Dismiss changelog"
        >
          <X className="h-3.5 w-3.5" />
        </Button>
      </div>
    </div>
  );
}