import { useMemo, useState } from 'react'
import { storyPrompts } from '../data/stories'

export function StoryLab() {
  const [selectedStory, setSelectedStory] = useState(storyPrompts[0])
  const [notes, setNotes] = useState('')
  const [copied, setCopied] = useState<string | null>(null)
  const [approvedStories, setApprovedStories] = useState<Set<string>>(new Set())

  const reggioQuestions = useMemo(
    () => [
      `¿Por qué crees que ${selectedStory.personajes[0]} se sintió así?`,
      '¿Qué cambiarías tú en la escena?',
      '¿Dónde escuchaste algo parecido antes?',
    ],
    [selectedStory.personajes]
  )

  const copyPrompt = async (text: string, label: string) => {
    if (navigator?.clipboard) {
      await navigator.clipboard.writeText(text)
      setCopied(label)
      setTimeout(() => setCopied(null), 1600)
    }
  }

  const toggleApproved = (title: string) => {
    setApprovedStories((prev) => {
      const updated = new Set(prev)
      if (updated.has(title)) {
        updated.delete(title)
      } else {
        updated.add(title)
      }
      return updated
    })
  }

  return (
    <section className="story-grid">
      <div className="story-list">
        {storyPrompts.map((story) => (
          <article
            key={story.titulo}
            className={`story-card ${selectedStory.titulo === story.titulo ? 'active' : ''}`}
            onClick={() => setSelectedStory(story)}
          >
            <h4>{story.titulo}</h4>
            <p style={{ margin: 0, fontSize: '0.9rem' }}>{story.escenario}</p>
            <p style={{ fontSize: '0.85rem', margin: '0.4rem 0 0' }}>
              🎯 {story.objetivo}
            </p>
            <p style={{ fontSize: '0.8rem', margin: '0.4rem 0 0' }}>
              👥 {story.personajes.join(', ')}
            </p>
            <div className="status-pill" style={{ marginTop: '0.6rem' }}>
              {approvedStories.has(story.titulo) ? 'Listo para contar ✅' : 'Borrador ✏️'}
            </div>
          </article>
        ))}
      </div>

      <div className="story-detail">
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
          <div>
            <h3 style={{ margin: 0 }}>{selectedStory.titulo}</h3>
            <p style={{ margin: '0.4rem 0' }}>{selectedStory.escenario}</p>
          </div>
          <button className="control-button primary" onClick={() => toggleApproved(selectedStory.titulo)}>
            {approvedStories.has(selectedStory.titulo) ? 'Marcar como borrador' : 'Listo para Milo'}
          </button>
        </div>

        <div className="prompt-box">
          <strong>Prompt de texto para Gemini</strong>
          <p style={{ margin: '0.4rem 0' }}>{selectedStory.promptTexto}</p>
          <div className="prompt-actions">
            <button className="control-button" onClick={() => copyPrompt(selectedStory.promptTexto, 'texto')}>
              Copiar texto
            </button>
            {copied === 'texto' && <span className="copied">¡Copiado!</span>}
          </div>
        </div>

        <div className="prompt-box">
          <strong>Prompt de ilustración</strong>
          <p style={{ margin: '0.4rem 0' }}>{selectedStory.promptImagen}</p>
          <div className="prompt-actions">
            <button className="control-button" onClick={() => copyPrompt(selectedStory.promptImagen, 'imagen')}>
              Copiar imagen
            </button>
            {copied === 'imagen' && <span className="copied">¡Copiado!</span>}
          </div>
        </div>

        <div style={{ marginTop: '1rem' }}>
          <h4>Preguntas Reggio</h4>
          <div className="questions-list">
            {reggioQuestions.map((question) => (
              <span key={question}>• {question}</span>
            ))}
          </div>
        </div>

        <div style={{ marginTop: '1rem' }}>
          <h4>Notas del adulto</h4>
          <textarea
            className="note-area"
            placeholder="Escribe aquí ideas de Milo, palabras que quiere practicar o finales alternativos."
            value={notes}
            onChange={(event) => setNotes(event.target.value)}
          />
        </div>
      </div>
    </section>
  )
}
