import { useState, useEffect } from 'react';
import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogHeader,
  DialogTitle,
} from '@/components/ui/dialog';
import { Button } from '@/components/ui/button';
import { Sparkle, Code, FileCode } from '@phosphor-icons/react';
import { usePersistentState } from '@/lib/usePersistentState';

export function WelcomeDialog() {
  const [hasSeenWelcome, setHasSeenWelcome] = usePersistentState('aethex-welcome-seen', 'false');
  const [open, setOpen] = useState(false);

  useEffect(() => {
    if (hasSeenWelcome !== 'true') {
      setOpen(true);
    }
  }, [hasSeenWelcome]);

  const handleClose = () => {
    setHasSeenWelcome('true');
    setOpen(false);
  };

  return (
    <Dialog open={open} onOpenChange={handleClose}>
      <DialogContent className="sm:max-w-[500px]">
        <DialogHeader>
          <DialogTitle className="text-2xl">
            Welcome to <span className="text-accent">AeThex Studio</span>
          </DialogTitle>
          <DialogDescription className="text-base leading-relaxed pt-2">
            Your AI-powered Roblox Lua editor in the browser
          </DialogDescription>
        </DialogHeader>

        <div className="space-y-4 py-4">
          <div className="flex gap-3">
            <div className="mt-1">
              <Code className="text-accent" size={24} weight="duotone" />
            </div>
            <div>
              <h3 className="font-semibold mb-1">Code Editor</h3>
              <p className="text-sm text-muted-foreground">
                Professional Monaco editor with Lua syntax highlighting and autocomplete
              </p>
            </div>
          </div>

          <div className="flex gap-3">
            <div className="mt-1">
              <Sparkle className="text-accent" size={24} weight="duotone" />
            </div>
            <div>
              <h3 className="font-semibold mb-1">AI Assistant</h3>
              <p className="text-sm text-muted-foreground">
                Ask questions about your code and get instant help with Roblox scripting
              </p>
            </div>
          </div>

          <div className="flex gap-3">
            <div className="mt-1">
              <FileCode className="text-accent" size={24} weight="duotone" />
            </div>
            <div>
              <h3 className="font-semibold mb-1">Templates</h3>
              <p className="text-sm text-muted-foreground">
                Jump-start your projects with ready-made script templates
              </p>
            </div>
          </div>
        </div>

        <div className="flex justify-end gap-2 pt-2">
          <Button onClick={handleClose} className="bg-accent text-accent-foreground hover:bg-accent/90 btn-accent-hover">
            Get Started
          </Button>
        </div>
      </DialogContent>
    </Dialog>
  );
}
