'use client'

import { Icons, getBackendUrl, type Recording } from './types'

interface TranscriptModalProps {
  isDark: boolean
  currentRecording: Recording
  transcriptText: string
  transcriptLoading: boolean
  startTranscription: (id: string) => void
  onClose: () => void
}

export function TranscriptModal({
  isDark, currentRecording, transcriptText, transcriptLoading,
  startTranscription, onClose,
}: TranscriptModalProps) {
  return (
    <div className="fixed inset-0 z-50 flex items-center justify-center p-4">
      <div className="absolute inset-0 bg-black/50 backdrop-blur-sm" onClick={onClose} />
      <div className={`relative w-full max-w-2xl max-h-[80vh] flex flex-col rounded-3xl border ${
        isDark ? 'bg-slate-900 border-white/20' : 'bg-white border-slate-200 shadow-2xl'
      }`}>
        {/* Header */}
        <div className={`p-6 border-b flex items-center justify-between ${isDark ? 'border-white/10' : 'border-slate-200'}`}>
          <h2 className={`text-xl font-semibold ${isDark ? 'text-white' : 'text-slate-900'}`}>
            Transkript: {currentRecording.title || `Aufzeichnung ${currentRecording.meeting_id}`}
          </h2>
          <button onClick={onClose}
            className={`p-2 rounded-lg transition-colors ${isDark ? 'hover:bg-white/10' : 'hover:bg-slate-100'}`}>
            {Icons.close}
          </button>
        </div>

        {/* Content */}
        <div className="flex-1 overflow-y-auto p-6">
          {transcriptLoading ? (
            <div className={`text-center py-8 ${isDark ? 'text-white/40' : 'text-slate-400'}`}>Lade Transkript...</div>
          ) : transcriptText === 'PENDING' ? (
            <div className="text-center py-8">
              <div className={`w-16 h-16 rounded-full flex items-center justify-center mx-auto mb-4 ${
                isDark ? 'bg-amber-500/20 text-amber-400' : 'bg-amber-100 text-amber-600'
              }`}>
                {Icons.clock}
              </div>
              <h4 className={`font-medium mb-2 ${isDark ? 'text-white' : 'text-slate-900'}`}>Transkription ausstehend</h4>
              <p className={`mb-6 ${isDark ? 'text-white/50' : 'text-slate-500'}`}>
                Die Transkription wurde noch nicht gestartet oder ist in Bearbeitung.
              </p>
              <button onClick={() => startTranscription(currentRecording.id)}
                className="px-6 py-3 bg-gradient-to-r from-blue-500 to-purple-500 text-white rounded-xl font-medium hover:shadow-lg hover:shadow-purple-500/30 transition-all hover:scale-105">
                Transkription starten
              </button>
            </div>
          ) : (
            <div className={`whitespace-pre-wrap leading-relaxed ${isDark ? 'text-white/80' : 'text-slate-700'}`}>
              {transcriptText}
            </div>
          )}
        </div>

        {/* Footer */}
        <div className={`p-6 border-t flex justify-end gap-3 ${isDark ? 'border-white/10' : 'border-slate-200'}`}>
          {transcriptText && transcriptText !== 'PENDING' && (
            <>
              <DownloadButton isDark={isDark} label="WebVTT"
                href={`${getBackendUrl()}/api/recordings/${currentRecording.id}/transcription/vtt`} />
              <DownloadButton isDark={isDark} label="SRT"
                href={`${getBackendUrl()}/api/recordings/${currentRecording.id}/transcription/srt`} />
            </>
          )}
          <button onClick={onClose}
            className={`px-5 py-2.5 rounded-xl font-medium transition-all ${
              isDark ? 'text-white/60 hover:text-white hover:bg-white/10' : 'text-slate-600 hover:text-slate-900 hover:bg-slate-100'
            }`}>
            Schliessen
          </button>
        </div>
      </div>
    </div>
  )
}

function DownloadButton({ isDark, label, href }: { isDark: boolean; label: string; href: string }) {
  return (
    <button onClick={() => window.location.href = href}
      className={`px-4 py-2.5 rounded-xl font-medium transition-all ${
        isDark ? 'bg-white/10 text-white hover:bg-white/20' : 'bg-slate-100 text-slate-700 hover:bg-slate-200'
      }`}>
      {label}
    </button>
  )
}