'use client'

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

interface RecordingsTabProps {
  isDark: boolean
  loading: boolean
  recordingsFilter: string
  setRecordingsFilter: (filter: string) => void
  filteredRecordings: Recording[]
  recordings: Recording[]
  totalStorageBytes: number
  maxStorageGB: number
  storagePercent: string
  fetchData: () => void
  startQuickMeeting: () => void
  playRecording: (id: string) => void
  viewTranscript: (recording: Recording) => void
  downloadRecording: (id: string) => void
  deleteRecording: (id: string) => void
}

export function RecordingsTab({
  isDark, loading, recordingsFilter, setRecordingsFilter,
  filteredRecordings, recordings, totalStorageBytes, maxStorageGB, storagePercent,
  fetchData, startQuickMeeting,
  playRecording, viewTranscript, downloadRecording, deleteRecording,
}: RecordingsTabProps) {
  return (
    <>
      {/* Filter Tabs */}
      <div className="flex flex-wrap gap-2 mb-8">
        {[
          { key: 'all', label: 'Alle' },
          { key: 'uploaded', label: 'Neu' },
          { key: 'processing', label: 'In Verarbeitung' },
          { key: 'ready', label: 'Fertig' },
        ].map((filter) => (
          <button
            key={filter.key}
            onClick={() => setRecordingsFilter(filter.key)}
            className={`px-5 py-2.5 rounded-xl font-medium transition-all ${
              recordingsFilter === filter.key
                ? 'bg-gradient-to-r from-blue-500 to-purple-500 text-white shadow-lg'
                : isDark
                  ? 'bg-white/10 text-white/60 hover:bg-white/20 hover:text-white'
                  : 'bg-white/70 text-slate-600 hover:bg-white hover:text-slate-900 shadow'
            }`}
          >
            {filter.label}
          </button>
        ))}
        <div className="flex-1" />
        <button
          onClick={fetchData}
          className={`flex items-center gap-2 px-5 py-2.5 rounded-xl font-medium transition-all ${
            isDark
              ? 'bg-white/10 text-white hover:bg-white/20'
              : 'bg-white/70 text-slate-700 hover:bg-white shadow'
          }`}
        >
          {Icons.refresh}
          Aktualisieren
        </button>
      </div>

      {/* Recordings List */}
      {loading ? (
        <div className={`text-center py-12 ${isDark ? 'text-white/40' : 'text-slate-400'}`}>Lade Aufzeichnungen...</div>
      ) : filteredRecordings.length === 0 ? (
        <EmptyRecordings isDark={isDark} startQuickMeeting={startQuickMeeting} />
      ) : (
        <div className="space-y-4">
          {filteredRecordings.map((recording) => (
            <RecordingCard key={recording.id} isDark={isDark} recording={recording}
              playRecording={playRecording} viewTranscript={viewTranscript}
              downloadRecording={downloadRecording} deleteRecording={deleteRecording} />
          ))}
        </div>
      )}

      {/* Storage Info */}
      <div className={`backdrop-blur-xl border rounded-3xl p-6 mt-8 ${
        isDark ? 'bg-white/10 border-white/20' : 'bg-white/70 border-black/10 shadow-lg'
      }`}>
        <h3 className={`font-medium mb-4 ${isDark ? 'text-white' : 'text-slate-900'}`}>Speicherplatz</h3>
        <div className="flex justify-between text-sm mb-2">
          <span className={isDark ? 'text-white/60' : 'text-slate-500'}>
            {(totalStorageBytes / (1024 * 1024)).toFixed(1)} MB von {maxStorageGB} GB verwendet
          </span>
          <span className={isDark ? 'text-white/60' : 'text-slate-500'}>{storagePercent}%</span>
        </div>
        <div className={`h-3 rounded-full overflow-hidden ${isDark ? 'bg-white/10' : 'bg-slate-200'}`}>
          <div
            className="h-full bg-gradient-to-r from-blue-500 to-purple-500 rounded-full transition-all"
            style={{ width: `${Math.min(Number(storagePercent), 100)}%` }}
          />
        </div>
        <p className={`text-sm mt-3 ${isDark ? 'text-white/50' : 'text-slate-500'}`}>
          {recordings.length} Aufzeichnungen
        </p>
      </div>
    </>
  )
}

function EmptyRecordings({ isDark, startQuickMeeting }: { isDark: boolean; startQuickMeeting: () => void }) {
  return (
    <div className={`backdrop-blur-xl border rounded-3xl p-12 text-center ${
      isDark ? 'bg-white/10 border-white/20' : 'bg-white/70 border-black/10 shadow-lg'
    }`}>
      <div className={`w-20 h-20 rounded-full flex items-center justify-center mx-auto mb-4 ${
        isDark ? 'bg-white/10 text-white/40' : 'bg-slate-100 text-slate-400'
      }`}>
        {Icons.record}
      </div>
      <h3 className={`font-medium mb-2 ${isDark ? 'text-white' : 'text-slate-900'}`}>Keine Aufzeichnungen</h3>
      <p className={`mb-6 ${isDark ? 'text-white/50' : 'text-slate-500'}`}>
        Starten Sie eine Aufzeichnung in einem Meeting, um sie hier zu sehen.
      </p>
      <button
        onClick={startQuickMeeting}
        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"
      >
        Meeting starten
      </button>
    </div>
  )
}

function RecordingCard({ isDark, recording, playRecording, viewTranscript, downloadRecording, deleteRecording }: {
  isDark: boolean; recording: Recording
  playRecording: (id: string) => void
  viewTranscript: (recording: Recording) => void
  downloadRecording: (id: string) => void
  deleteRecording: (id: string) => void
}) {
  return (
    <div className={`backdrop-blur-xl border rounded-3xl p-6 flex items-center gap-4 transition-all hover:scale-[1.01] ${
      isDark
        ? 'bg-white/10 border-white/20 hover:bg-white/15'
        : 'bg-white/70 border-black/10 hover:bg-white/90 shadow-lg'
    }`}>
      <div className="w-14 h-14 bg-gradient-to-br from-red-400 to-rose-600 rounded-2xl flex items-center justify-center text-white shadow-lg">
        {Icons.record}
      </div>
      <div className="flex-1">
        <div className={`font-medium flex items-center gap-2 ${isDark ? 'text-white' : 'text-slate-900'}`}>
          {recording.title || `Aufzeichnung ${recording.meeting_id}`}
          {recording.status === 'processing' && (
            <span className="px-2 py-0.5 bg-amber-500/20 text-amber-400 text-xs font-medium rounded-full">Verarbeitung</span>
          )}
          {recording.transcription_status === 'pending' && (
            <span className="px-2 py-0.5 bg-blue-500/20 text-blue-400 text-xs font-medium rounded-full">Transkript ausstehend</span>
          )}
          {recording.transcription_status === 'completed' && (
            <span className="px-2 py-0.5 bg-green-500/20 text-green-400 text-xs font-medium rounded-full">Transkript bereit</span>
          )}
        </div>
        <div className={`text-sm mt-1 ${isDark ? 'text-white/50' : 'text-slate-500'}`}>
          {new Date(recording.recorded_at).toLocaleDateString('de-DE', { day: '2-digit', month: '2-digit', year: 'numeric' })},{' '}
          {new Date(recording.recorded_at).toLocaleTimeString('de-DE', { hour: '2-digit', minute: '2-digit' })}{' '}
          | {formatDuration(recording.duration_seconds || 0)} | {formatFileSize(recording.file_size_bytes || 0)}
        </div>
      </div>
      <div className="flex items-center gap-2">
        <button onClick={() => playRecording(recording.id)}
          className={`flex items-center gap-2 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'
          }`}>
          {Icons.play} Abspielen
        </button>
        <button onClick={() => viewTranscript(recording)}
          className={`flex items-center gap-2 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'
          }`}>
          {Icons.document} Protokoll
        </button>
        <button onClick={() => downloadRecording(recording.id)}
          className={`p-2.5 rounded-xl transition-all ${
            isDark ? 'text-white/40 hover:text-white hover:bg-white/10' : 'text-slate-400 hover:text-slate-600 hover:bg-slate-100'
          }`}
          title="Herunterladen">
          {Icons.download}
        </button>
        <button onClick={() => deleteRecording(recording.id)}
          className={`p-2.5 rounded-xl transition-all ${
            isDark ? 'text-white/40 hover:text-red-400 hover:bg-red-500/10' : 'text-slate-400 hover:text-red-500 hover:bg-red-50'
          }`}
          title="Loeschen">
          {Icons.trash}
        </button>
      </div>
    </div>
  )
}
