import { useState } from "react"
import { Button } from "@/components/ui/button"
import * as Icons from "lucide-react"
import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogDescription, DialogFooter } from "@/components/ui/dialog"
import { Textarea } from "@/components/ui/textarea"
import { AuroraButton } from "@/components/effect/aurora-button"
import confetti from "canvas-confetti"
import type { PlanFull } from "./planQueries"

export function AdjustAIButton({ plan }: { plan: PlanFull }) {
  const [open, setOpen] = useState(false)
  const [prompt, setPrompt] = useState('')
  const [loading, setLoading] = useState(false)

  async function apply() {
    setLoading(true)
    await fetch('https://genesis-engine.apps.lci.ulsa.mx/api/mejorar/plan', {
      method: 'POST', headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ prompt, plan_id: plan.id }),
    }).catch(() => { })
    setLoading(false)
    confetti({ particleCount: 120, spread: 80, origin: { y: 0.6 } })
    setOpen(false)
  }

  return (
    <>
      <Button onClick={() => setOpen(true)}>
        <Icons.Sparkles className="w-4 h-4 mr-2" /> Ajustar con IA
      </Button>
      <Dialog open={open} onOpenChange={setOpen}>
        <DialogContent className="max-w-lg">
          <DialogHeader>
            <DialogTitle>Ajustar con IA</DialogTitle>
            <DialogDescription>Describe cómo quieres modificar el plan actual.</DialogDescription>
          </DialogHeader>
          <Textarea value={prompt} onChange={(e) => setPrompt(e.target.value)} placeholder="Ej.: Enfatiza ciberseguridad y proyectos prácticos…" className="min-h-[120px]" />
          <DialogFooter>
            <AuroraButton onClick={apply} disabled={!prompt.trim() || loading}>
              {loading ? 'Aplicando…' : 'Aplicar ajuste'}
            </AuroraButton>
          </DialogFooter>
        </DialogContent>
      </Dialog>
    </>
  )
}