'use client'

import { useState } from 'react'
import type { VideoScript } from '@/lib/sdk/training/types'
import { previewVideoScript } from '@/lib/sdk/training/api'

interface ScriptPreviewProps {
  moduleId: string
}

export default function ScriptPreview({ moduleId }: ScriptPreviewProps) {
  const [script, setScript] = useState<VideoScript | null>(null)
  const [loading, setLoading] = useState(false)
  const [error, setError] = useState<string | null>(null)

  async function handlePreview() {
    setLoading(true)
    setError(null)
    try {
      const result = await previewVideoScript(moduleId)
      setScript(result as VideoScript)
    } catch (e) {
      setError(e instanceof Error ? e.message : 'Fehler bei der Script-Vorschau')
    } finally {
      setLoading(false)
    }
  }

  return (
    <div className="border rounded-lg p-4 bg-white">
      <div className="flex items-center justify-between mb-3">
        <h4 className="text-sm font-medium text-gray-700">Folien-Vorschau</h4>
        <button
          onClick={handlePreview}
          disabled={loading}
          className="px-3 py-1.5 text-xs bg-gray-600 text-white rounded hover:bg-gray-700 disabled:opacity-50"
        >
          {loading ? 'Generiere Vorschau...' : 'Script-Vorschau'}
        </button>
      </div>

      {error && (
        <div className="text-xs text-red-600 mb-2">{error}</div>
      )}

      {loading && (
        <div className="flex items-center gap-2 text-sm text-gray-500">
          <div className="animate-spin h-4 w-4 border-2 border-gray-500 border-t-transparent rounded-full" />
          Folien-Script wird generiert...
        </div>
      )}

      {script && (
        <div className="space-y-3">
          <h5 className="text-sm font-medium text-gray-900">{script.title}</h5>
          <div className="grid grid-cols-1 md:grid-cols-2 gap-3">
            {script.sections.map((section, i) => (
              <div key={i} className="border rounded-lg p-3 bg-gray-50">
                <div className="flex items-center gap-2 mb-2">
                  <span className="text-xs font-medium text-white bg-blue-900 rounded-full w-6 h-6 flex items-center justify-center">
                    {i + 1}
                  </span>
                  <h6 className="text-sm font-medium text-gray-800">{section.heading}</h6>
                </div>
                {section.text && (
                  <p className="text-xs text-gray-600 mb-2">{section.text}</p>
                )}
                {section.bullet_points && section.bullet_points.length > 0 && (
                  <ul className="space-y-1">
                    {section.bullet_points.map((bp, j) => (
                      <li key={j} className="text-xs text-gray-600 flex items-start gap-1">
                        <span className="text-blue-500 mt-0.5">{String.fromCharCode(8226)}</span>
                        {bp}
                      </li>
                    ))}
                  </ul>
                )}
              </div>
            ))}
          </div>
          <p className="text-xs text-gray-400">{script.sections.length} Folien</p>
        </div>
      )}
    </div>
  )
}