import { useEffect, useRef } from 'react'
import { X, Download } from 'lucide-react'

export default function LogsModal({ name, logs, loading, onClose }) {
  const bottomRef = useRef(null)

  useEffect(() => {
    if (!loading && bottomRef.current) {
      bottomRef.current.scrollIntoView({ behavior: 'smooth' })
    }
  }, [logs, loading])

  const handleDownload = () => {
    const blob = new Blob([logs], { type: 'text/plain' })
    const url  = URL.createObjectURL(blob)
    const a    = document.createElement('a')
    a.href     = url
    a.download = `${name.replace(/[^a-z0-9]/gi, '_')}.log`
    a.click()
    URL.revokeObjectURL(url)
  }

  // Fermeture sur Échap
  useEffect(() => {
    const handler = (e) => { if (e.key === 'Escape') onClose() }
    window.addEventListener('keydown', handler)
    return () => window.removeEventListener('keydown', handler)
  }, [onClose])

  return (
    <div
      className="fixed inset-0 z-50 flex items-center justify-center p-4 bg-black/75 backdrop-blur-sm"
      onClick={(e) => { if (e.target === e.currentTarget) onClose() }}
    >
      <div className="w-full max-w-4xl bg-gray-900 border border-gray-700 rounded-xl flex flex-col max-h-[85vh] shadow-2xl">
        {/* Header */}
        <div className="flex items-center justify-between px-4 py-3 border-b border-gray-700 flex-shrink-0">
          <h3 className="font-mono text-sm text-gray-300 truncate">📄 {name}</h3>
          <div className="flex items-center gap-2">
            {logs && (
              <button
                onClick={handleDownload}
                className="flex items-center gap-1.5 px-2.5 py-1.5 rounded-lg text-xs bg-gray-800 hover:bg-gray-700 text-gray-400 hover:text-gray-200 transition-colors"
              >
                <Download size={12} />
                Télécharger
              </button>
            )}
            <button
              onClick={onClose}
              className="p-1.5 rounded-lg hover:bg-gray-800 text-gray-500 hover:text-gray-200 transition-colors"
            >
              <X size={16} />
            </button>
          </div>
        </div>

        {/* Logs */}
        <div className="flex-1 overflow-auto bg-gray-950 rounded-b-xl p-4">
          {loading ? (
            <div className="flex items-center gap-2 text-gray-500 text-sm">
              <svg className="w-4 h-4 animate-spin" fill="none" stroke="currentColor" strokeWidth={2} viewBox="0 0 24 24">
                <path strokeLinecap="round" strokeLinejoin="round" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15" />
              </svg>
              Chargement des logs…
            </div>
          ) : (
            <>
              <pre className="text-xs font-mono text-gray-300 whitespace-pre-wrap leading-5 break-all">
                {logs || '(aucun log disponible)'}
              </pre>
              <div ref={bottomRef} />
            </>
          )}
        </div>
      </div>
    </div>
  )
}
