import React, { useState, useEffect } from 'react'
import axios from 'axios'
import { Upload, FileText, Clock, CheckCircle2, Loader2, AlertCircle, Trash2, ArrowLeft, Copy, Edit3, X, Scissors, Users, Wand2, Share2 } from 'lucide-react'
import clsx from 'clsx'

const API_BASE = '/tr/api'

// --- INTERFACES ---

interface AnalysisResult {
  id: number;
  prompt_key: string;
  result_text: string;
  created_at: string;
}

interface TranscriptMessage {
  time: string
  display_time: string
  absolute_seconds: number
  speaker: string
  text: string
  _chunkId?: number // Virtual field for frontend mapping
  _idx?: number     // Virtual field
}

interface Chunk {
  id: number
  chunk_index: number
  raw_text: string
  json_content: TranscriptMessage[] | null
}

interface Meeting {
  id: number
  title: string
  status: string
  date_recorded: string
  duration_seconds?: number
  created_at: string
  chunks?: Chunk[]
  analysis_results?: AnalysisResult[]
}

// --- MODAL COMPONENT ---

const InsightModal = ({ title, content, onClose, onCopy }: { title: string, content: string, onClose: () => void, onCopy: (text: string) => void }) => (
  <div className="fixed inset-0 bg-black/60 z-50 flex items-center justify-center p-4 backdrop-blur-sm animate-fade-in">
    <div className="bg-white dark:bg-slate-900 rounded-2xl shadow-2xl w-full max-w-3xl max-h-[90vh] flex flex-col border border-slate-200 dark:border-slate-800">
      <header className="p-4 border-b border-slate-200 dark:border-slate-800 flex justify-between items-center flex-shrink-0">
        <h2 className="text-lg font-bold flex items-center gap-2"><Wand2 className="h-5 w-5 text-blue-500" /> {title}</h2>
        <div className='flex items-center gap-2'>
            <button onClick={() => onCopy(content)} className="flex items-center gap-2 text-sm px-3 py-1.5 bg-slate-100 dark:bg-slate-800 hover:bg-slate-200 dark:hover:bg-slate-700 rounded-md font-medium transition-colors"><Copy className='h-4 w-4'/> Copy</button>
            <button onClick={onClose} className="p-1.5 text-slate-500 hover:bg-slate-100 dark:hover:bg-slate-800 rounded-full"><X className="h-5 w-5" /></button>
        </div>
      </header>
      <main className="p-6 overflow-auto">
        <pre className="whitespace-pre-wrap font-sans text-sm leading-relaxed">{content}</pre>
      </main>
    </div>
  </div>
)


export default function App() {
  const [view, setView] = useState<'list' | 'detail'>('list')
  const [selectedId, setSelectedId] = useState<number | null>(null)
  
  const [meetings, setMeetings] = useState<Meeting[]>([])
  const [uploading, setUploading] = useState(false)
  const [error, setError] = useState<string | null>(null)

  const [detailMeeting, setDetailMeeting] = useState<Meeting | null>(null)
  const [loadingDetail, setLoadingDetail] = useState(false)
  
  // Editing State
  const [editingRow, setEditingRow] = useState<{chunkId: number, idx: number, field: 'speaker' | 'text'} | null>(null)
  const [editValue, setEditValue] = useState("")
  const [isProcessing, setIsProcessing] = useState(false)

  // Insight State
  const [showInsightModal, setShowInsightModal] = useState(false)
  const [insightLoading, setInsightLoading] = useState(false)
  const [insightResult, setInsightResult] = useState('')
  const [insightTitle, setInsightTitle] = useState('')

  // Translation State
  const [translationResult, setTranslationResult] = useState<AnalysisResult | null>(null)
  const [activeTab, setActiveTab] = useState<'transcript' | 'translation'>('transcript');

  const fetchMeetings = async () => {
    try {
      const res = await axios.get(`${API_BASE}/meetings`)
      setMeetings(res.data)
    } catch (e) {
      console.error("Failed to fetch meetings", e)
    }
  }

  const fetchDetail = async (id: number) => {
    setLoadingDetail(true)
    try {
      const res = await axios.get(`${API_BASE}/meetings/${id}`)
      setDetailMeeting(res.data)
    } catch (e) {
      setError("Could not load details")
    } finally {
      setLoadingDetail(false)
    }
  }

  useEffect(() => {
    if (view === 'list') {
      fetchMeetings()
      const interval = setInterval(fetchMeetings, 5000)
      return () => clearInterval(interval)
    } else if (view === 'detail' && selectedId) {
      fetchDetail(selectedId)
    }
  }, [view, selectedId])

  const handleUpload = async (e: React.ChangeEvent<HTMLInputElement>) => {
    const file = e.target.files?.[0]
    if (!file) return
    setUploading(true)
    setError(null)
    const formData = new FormData()
    formData.append('file', file)
    try {
      await axios.post(`${API_BASE}/upload`, formData)
      fetchMeetings() 
    } catch (e) { setError("Upload failed.") } finally { setUploading(false) }
  }

  const handleDeleteMeeting = async (e: React.MouseEvent, id: number) => {
    e.stopPropagation()
    if (!confirm("Delete meeting permanently?")) return
    try {
      await axios.delete(`${API_BASE}/meetings/${id}`)
      if (selectedId === id) { setView('list'); setSelectedId(null); }
      fetchMeetings()
    } catch (e) { alert("Delete failed") }
  }

  // --- AI INSIGHTS ---

  const handleGenerateInsight = async (insightType: string, title: string) => {
    if (!detailMeeting) return;
    setInsightLoading(true);
    setInsightTitle(title);

    try {
        // First, check if result already exists
        const existing = detailMeeting.analysis_results?.find(r => r.prompt_key === insightType);
        if (existing) {
            setInsightResult(existing.result_text);
            setShowInsightModal(true);
            return;
        }

        // If not, generate it
        const res = await axios.post(`${API_BASE}/meetings/${detailMeeting.id}/insights`, {
            insight_type: insightType
        });
        setInsightResult(res.data.result_text);
        setShowInsightModal(true);
        // Refresh detail view to get the new analysis result in the meeting object
        fetchDetail(detailMeeting.id); 
    } catch(e) {
        console.error("Failed to generate insight", e);
        alert(`Error: Could not generate ${title}.`);
    } finally {
        setInsightLoading(false);
    }
  }

  const handleTranslate = async () => {
    if (!detailMeeting) return;
    setInsightLoading(true);

    try {
        // Use a consistent key for the translation type
        const translationType = 'translation_english';
        
        // Check if result already exists in the main meeting object
        const existing = detailMeeting.analysis_results?.find(r => r.prompt_key === translationType);
        if (existing) {
            setTranslationResult(existing);
            // Here you might want to switch to a "Translation" tab or show a modal
            alert("Translation already exists and has been loaded.");
            return;
        }

        // If not, generate it
        const res = await axios.post(`${API_BASE}/meetings/${detailMeeting.id}/translate`, {
            target_language: 'English'
        });

        // The API returns an AnalysisResult object, let's store it
        setTranslationResult(res.data);
        
        // Also refresh the main meeting detail to include this new result for persistence
        fetchDetail(detailMeeting.id); 
        setActiveTab('translation');
        alert("Translation successful!");

    } catch(e) {
        console.error("Failed to generate translation", e);
        alert(`Error: Could not translate.`);
    } finally {
        setInsightLoading(false);
    }
  }

  // --- GLOBAL SPEAKER MANAGEMENT ---

  const getUniqueSpeakers = () => {
    if (!detailMeeting?.chunks) return []
    const speakers = new Set<string>()
    detailMeeting.chunks.forEach(c => {
        c.json_content?.forEach(m => speakers.add(m.speaker))
    })
    return Array.from(speakers).sort()
  }

  const handleGlobalRename = async (oldName: string) => {
    const newName = prompt(`Rename speaker '${oldName}' globally to:`, oldName)
    if (!newName || newName === oldName || !detailMeeting) return

    setIsProcessing(true)
    try {
        await axios.post(`${API_BASE}/meetings/${detailMeeting.id}/rename_speaker`, {
            old_name: oldName,
            new_name: newName
        })
        fetchDetail(detailMeeting.id)
    } catch (e) {
        alert("Global rename failed")
    } finally {
        setIsProcessing(false)
    }
  }

  // --- TRIMMING & EDITING ---

  const saveChunkUpdate = async (chunkId: number, newJson: TranscriptMessage[]) => {
    try {
        await axios.put(`${API_BASE}/chunks/${chunkId}`, { json_content: newJson })
    } catch (e) {
        console.error("Failed to save chunk", e)
        alert("Failed to save changes")
    }
  }

  // Trim Logic: Cut everything BEFORE or AFTER the target message
  const handleTrim = async (targetMsg: TranscriptMessage, mode: 'start' | 'end') => {
    if (!detailMeeting || !detailMeeting.chunks) return
    if (!confirm(mode === 'start' ? "Delete EVERYTHING before this line?" : "Delete EVERYTHING after this line?")) return

    setIsProcessing(true)
    
    // We need to iterate all chunks and decide what to do
    const updates = []
    
    for (const chunk of detailMeeting.chunks) {
        if (!chunk.json_content) continue
        
        let newContent = [...chunk.json_content]
        let changed = false

        if (mode === 'start') {
            // Cut BEFORE
            if (chunk.chunk_index < (detailMeeting.chunks.find(c => c.id === targetMsg._chunkId)?.chunk_index || 0)) {
                // This entire chunk is BEFORE the target chunk -> Empty it
                if (newContent.length > 0) {
                    newContent = []
                    changed = true
                }
            } else if (chunk.id === targetMsg._chunkId) {
                // This is the target chunk -> Slice content
                const cutIdx = newContent.findIndex(m => m.absolute_seconds === targetMsg.absolute_seconds && m.text === targetMsg.text)
                if (cutIdx > 0) {
                    newContent = newContent.slice(cutIdx)
                    changed = true
                }
            }
        } else {
            // Cut AFTER
            if (chunk.chunk_index > (detailMeeting.chunks.find(c => c.id === targetMsg._chunkId)?.chunk_index || 0)) {
                // This entire chunk is AFTER -> Empty it
                if (newContent.length > 0) {
                    newContent = []
                    changed = true
                }
            } else if (chunk.id === targetMsg._chunkId) {
                // Target chunk
                const cutIdx = newContent.findIndex(m => m.absolute_seconds === targetMsg.absolute_seconds && m.text === targetMsg.text)
                if (cutIdx !== -1 && cutIdx < newContent.length - 1) {
                    newContent = newContent.slice(0, cutIdx + 1)
                    changed = true
                }
            }
        }

        if (changed) {
            updates.push(saveChunkUpdate(chunk.id, newContent))
        }
    }

    await Promise.all(updates)
    await fetchDetail(detailMeeting.id)
    setIsProcessing(false)
  }

  const handleUpdateRow = async (chunkId: number, idx: number, field: 'speaker' | 'text', value: string) => {
    if (!detailMeeting) return
    
    const newChunks = detailMeeting.chunks!.map(c => {
        if (c.id === chunkId && c.json_content) {
            const newContent = [...c.json_content]
            newContent[idx] = { ...newContent[idx], [field]: value }
            return { ...c, json_content: newContent }
        }
        return c
    })
    
    setDetailMeeting({ ...detailMeeting, chunks: newChunks })
    
    const updatedChunk = newChunks.find(c => c.id === chunkId)
    if (updatedChunk?.json_content) {
        await saveChunkUpdate(chunkId, updatedChunk.json_content)
    }
    setEditingRow(null)
  }

  // --- RENDER ---

  if (view === 'detail') {
    // Flatten messages
    const flatMessages = detailMeeting?.chunks?.flatMap(c => 
        (c.json_content || []).map((msg, idx) => ({ ...msg, _chunkId: c.id, _idx: idx }))
    ).sort((a,b) => a.absolute_seconds - b.absolute_seconds) || []

    const uniqueSpeakers = getUniqueSpeakers()

    return (
      <div className="min-h-screen bg-slate-50 dark:bg-slate-950 text-slate-900 dark:text-slate-200 font-sans">
        {showInsightModal && <InsightModal title={insightTitle} content={insightResult} onClose={() => setShowInsightModal(false)} onCopy={text => navigator.clipboard.writeText(text)} />}
        <div className="max-w-4xl mx-auto px-4 py-8">
          <button 
            onClick={() => { setView('list'); setSelectedId(null); setDetailMeeting(null); }}
            className="flex items-center gap-2 text-slate-500 hover:text-blue-500 mb-6 transition-colors font-medium"
          >
            <ArrowLeft className="h-4 w-4" /> Back to List
          </button>

          {loadingDetail || !detailMeeting ? (
            <div className="flex justify-center py-20"><Loader2 className="h-8 w-8 animate-spin text-blue-500" /></div>
          ) : (
            <>
              <header className="mb-6 border-b border-slate-200 dark:border-slate-800 pb-6 flex justify-between items-start">
                <div>
                  <h1 className="text-2xl font-bold mb-2">{detailMeeting.title}</h1>
                  <div className="flex items-center gap-4 text-sm text-slate-500">
                    <span className="flex items-center gap-1"><Clock className="h-4 w-4" /> {new Date(detailMeeting.created_at).toLocaleString()}</span>
                    <span className={clsx("px-2 py-0.5 rounded text-[10px] font-bold uppercase tracking-wide", detailMeeting.status === 'COMPLETED' ? "bg-green-100 text-green-700" : "bg-blue-100 text-blue-700")}>{detailMeeting.status}</span>
                  </div>
                </div>
                <div className="flex gap-2">
                    <button 
                        onClick={() => navigator.clipboard.writeText(flatMessages.map(m => `[${m.display_time}] ${m.speaker}: ${m.text}`).join('\n'))}
                        className="text-slate-500 hover:bg-slate-100 dark:hover:bg-slate-800 p-2 rounded" title="Copy Full Transcript"
                    >
                        <Copy className="h-5 w-5" />
                    </button>
                    <button
                        onClick={() => {
                            const transcriptText = flatMessages.map(m => `[${m.display_time}] ${m.speaker}: ${m.text}`).join('\n');
                            const filename = `${detailMeeting.title}.txt`;
                            const blob = new Blob([transcriptText], { type: 'text/plain;charset=utf-8' });
                            const link = document.createElement('a');
                            link.href = URL.createObjectURL(blob);
                            link.download = filename;
                            link.click();
                            URL.revokeObjectURL(link.href);
                        }}
                        className="text-slate-500 hover:bg-slate-100 dark:hover:bg-slate-800 p-2 rounded" title="Download Full Transcript as TXT"
                    >
                        <FileText className="h-5 w-5" />
                    </button>
                    <button
                        onClick={() => alert("Share functionality coming soon!")} // Placeholder
                        className="text-slate-500 hover:bg-slate-100 dark:hover:bg-slate-800 p-2 rounded" title="Share Transcript"
                    >
                        <Share2 className="h-5 w-5" />
                    </button>
                    <button onClick={(e) => handleDeleteMeeting(e, detailMeeting.id)} className="text-red-500 hover:bg-red-50 dark:hover:bg-red-900/20 p-2 rounded"><Trash2 className="h-5 w-5" /></button>
                </div>
              </header>

              {/* SPEAKER MANAGER BAR */} 
              {uniqueSpeakers.length > 0 && (
                  <div className="mb-6 bg-blue-50 dark:bg-blue-900/20 p-4 rounded-xl border border-blue-100 dark:border-blue-800 flex items-center gap-4 flex-wrap">
                      <div className="flex items-center gap-2 text-sm font-bold text-blue-700 dark:text-blue-300">
                          <Users className="h-4 w-4" /> Speakers found:
                      </div>
                      <div className="flex gap-2 flex-wrap">
                          {uniqueSpeakers.map(speaker => (
                              <button
                                key={speaker}
                                onClick={() => handleGlobalRename(speaker)}
                                className="px-3 py-1 bg-white dark:bg-slate-800 border border-blue-200 dark:border-blue-700 rounded-full text-xs font-medium text-slate-700 dark:text-slate-300 hover:border-blue-500 hover:text-blue-500 transition-colors flex items-center gap-1 shadow-sm"
                                title="Click to rename globally"
                              >
                                  {speaker} <Edit3 className="h-3 w-3 opacity-50" />
                              </button>
                          ))}
                      </div>
                  </div>
              )}

             <div className="mb-6 bg-purple-50 dark:bg-purple-900/20 p-4 rounded-xl border border-purple-100 dark:border-purple-800">
                <div className="flex items-center gap-3 mb-3">
                    <Wand2 className="h-5 w-5 text-purple-600 dark:text-purple-300" />
                    <h3 className="font-bold text-purple-800 dark:text-purple-200">AI Tools</h3>
                    {insightLoading && <Loader2 className="h-4 w-4 animate-spin text-purple-500" />}
                </div>
                <div className="grid grid-cols-1 md:grid-cols-4 gap-3">
                    <button disabled={insightLoading} onClick={() => handleGenerateInsight('meeting_minutes', 'Meeting Protocol')} className="text-sm font-medium px-4 py-2 bg-white dark:bg-slate-800 border dark:border-slate-700 rounded-lg shadow-sm hover:bg-slate-50 dark:hover:bg-slate-700/50 disabled:opacity-50 transition-colors">Generate Protocol</button>
                    <button disabled={insightLoading} onClick={() => handleGenerateInsight('action_items', 'Action Items')} className="text-sm font-medium px-4 py-2 bg-white dark:bg-slate-800 border dark:border-slate-700 rounded-lg shadow-sm hover:bg-slate-50 dark:hover:bg-slate-700/50 disabled:opacity-50 transition-colors">Extract Action Items</button>
                    <button disabled={insightLoading} onClick={() => handleGenerateInsight('sales_summary', 'Sales Summary')} className="text-sm font-medium px-4 py-2 bg-white dark:bg-slate-800 border dark:border-slate-700 rounded-lg shadow-sm hover:bg-slate-50 dark:hover:bg-slate-700/50 disabled:opacity-50 transition-colors">Sales Summary</button>
                    <button disabled={insightLoading} onClick={() => handleTranslate()} className="text-sm font-medium px-4 py-2 bg-white dark:bg-slate-800 border dark:border-slate-700 rounded-lg shadow-sm hover:bg-slate-50 dark:hover:bg-slate-700/50 disabled:opacity-50 transition-colors">Translate (EN)</button>
                </div>
             </div>

              {isProcessing && (
                  <div className="fixed inset-0 bg-white/50 dark:bg-black/50 z-50 flex items-center justify-center backdrop-blur-sm">
                      <div className="bg-white dark:bg-slate-800 p-6 rounded-xl shadow-2xl flex items-center gap-4">
                          <Loader2 className="h-6 w-6 animate-spin text-blue-500" />
                          <span className="font-medium">Updating transcript...</span>
                      </div>
                  </div>
              )}

              <div className="bg-white dark:bg-slate-900 rounded-xl border border-slate-200 dark:border-slate-800 shadow-sm overflow-hidden">
                {/* TAB Navigation */}
                <div className="flex border-b border-slate-200 dark:border-slate-800">
                    <button 
                        onClick={() => setActiveTab('transcript')}
                        className={clsx("px-4 py-3 font-medium text-sm", activeTab === 'transcript' ? "text-blue-600 border-b-2 border-blue-600" : "text-slate-500 hover:bg-slate-50 dark:hover:bg-slate-800/50")}
                    >
                        Original Transcript
                    </button>
                    {translationResult && (
                        <button 
                            onClick={() => setActiveTab('translation')}
                            className={clsx("px-4 py-3 font-medium text-sm", activeTab === 'translation' ? "text-blue-600 border-b-2 border-blue-600" : "text-slate-500 hover:bg-slate-50 dark:hover:bg-slate-800/50")}
                        >
                            English Translation
                        </button>
                    )}
                </div>

                {/* Conditional Content */}
                {activeTab === 'transcript' && (
                    flatMessages.length > 0 ? (
                      <div className="divide-y divide-slate-100 dark:divide-slate-800">
                        {flatMessages.map((msg, uniqueIdx) => {
                            const isEditingSpeaker = editingRow?.chunkId === msg._chunkId && editingRow?.idx === msg._idx && editingRow?.field === 'speaker';
                            const isEditingText = editingRow?.chunkId === msg._chunkId && editingRow?.idx === msg._idx && editingRow?.field === 'text';

                            return (
                          <div key={uniqueIdx} className="p-4 hover:bg-slate-50 dark:hover:bg-slate-800/50 transition-colors flex gap-4 group relative">
                             {/* Time */} 
                             <div className="w-16 pt-1 flex flex-col items-end gap-1 flex-shrink-0">
                                <span className="text-xs text-slate-400 font-mono">{msg.display_time || "00:00"}</span>
                             </div>

                             <div className="flex-1 min-w-0">
                                {/* Speaker */} 
                                <div className="mb-1 flex items-center gap-2">
                                    {isEditingSpeaker ? (
                                        <input 
                                            autoFocus
                                            className="text-sm font-bold text-blue-600 dark:text-blue-400 bg-slate-100 dark:bg-slate-800 border rounded px-2 py-0.5 outline-none w-48"
                                            value={editValue}
                                            onChange={e => setEditValue(e.target.value)}
                                            onBlur={() => handleUpdateRow(msg._chunkId!, msg._idx!, 'speaker', editValue)}
                                            onKeyDown={e => e.key === 'Enter' && handleUpdateRow(msg._chunkId!, msg._idx!, 'speaker', editValue)}
                                        />
                                    ) : (
                                        <div 
                                            className="font-bold text-sm text-blue-600 dark:text-blue-400 cursor-pointer hover:underline flex items-center gap-1 w-fit" 
                                            onClick={() => { setEditingRow({chunkId: msg._chunkId!, idx: msg._idx!, field: 'speaker'}); setEditValue(msg.speaker); }}
                                        >
                                           {msg.speaker}
                                        </div>
                                    )}
                                </div>

                                {/* Text */} 
                                <div>
                                    {isEditingText ? (
                                        <textarea 
                                            autoFocus
                                            className="w-full text-slate-800 dark:text-slate-200 bg-slate-100 dark:bg-slate-800 border rounded px-2 py-1 outline-none min-h-[60px]"
                                            value={editValue}
                                            onChange={e => setEditValue(e.target.value)}
                                            onBlur={() => handleUpdateRow(msg._chunkId!, msg._idx!, 'text', editValue)}
                                        />
                                    ) : (
                                        <div 
                                            className="text-slate-800 dark:text-slate-200 leading-relaxed whitespace-pre-wrap cursor-text hover:bg-slate-100/50 dark:hover:bg-slate-800/30 rounded p-1 -ml-1 transition-colors"
                                            onClick={() => { setEditingRow({chunkId: msg._chunkId!, idx: msg._idx!, field: 'text'}); setEditValue(msg.text); }}
                                        >
                                            {msg.text}
                                        </div>
                                    )}
                                </div>
                             </div>

                             {/* Hover Actions (Trim / Delete) */} 
                             <div className="absolute right-2 top-2 opacity-0 group-hover:opacity-100 flex gap-1 bg-white dark:bg-slate-900 border dark:border-slate-700 shadow-sm rounded-lg p-1 transition-all">
                                <button 
                                    onClick={() => handleTrim(msg, 'start')}
                                    className="p-1.5 text-slate-400 hover:text-red-500 hover:bg-red-50 rounded"
                                    title="Trim Start: Delete everything BEFORE this line"
                                >
                                    <Scissors className="h-3.5 w-3.5 rotate-180" />
                                </button>
                                <button 
                                    onClick={() => handleTrim(msg, 'end')}
                                    className="p-1.5 text-slate-400 hover:text-red-500 hover:bg-red-50 rounded"
                                    title="Trim End: Delete everything AFTER this line"
                                >
                                    <Scissors className="h-3.5 w-3.5" />
                                </button>
                                <div className="w-px bg-slate-200 dark:bg-slate-700 mx-1"></div>
                                <button 
                                    onClick={() => {
                                        // Single delete logic is redundant if we have trims, but nice to keep
                                        // Reuse update logic but filter out index
                                        // Simplified: Just use handleTrim but that's overkill
                                        // Let's implement quick single delete
                                        const cId = msg._chunkId!;
                                        const idx = msg._idx!;
                                        const newChunks = detailMeeting?.chunks?.map(c => {
                                            if (c.id === cId && c.json_content) {
                                                return { ...c, json_content: c.json_content.filter((_, i) => i !== idx) }
                                            }
                                            return c
                                        }) || [];
                                        setDetailMeeting(prev => prev ? ({ ...prev, chunks: newChunks }) : null);
                                        const updatedC = newChunks.find(c => c.id === cId);
                                        if(updatedC?.json_content) saveChunkUpdate(cId, updatedC.json_content);
                                    }}
                                    className="p-1.5 text-slate-400 hover:text-red-500 hover:bg-red-50 rounded"
                                    title="Delete this line"
                                >
                                    <X className="h-3.5 w-3.5" />
                                </button>
                             </div>
                          </div>
                        )})} 
                      </div>
                    ) : (
                      <div className="text-center py-12">
                        {detailMeeting.chunks && detailMeeting.chunks.length > 0 && detailMeeting.chunks[0].raw_text ? (
                            <div className="p-8">
                                <p className="text-yellow-600 mb-2 font-medium">Legacy Format</p>
                                <p className="text-slate-500 text-sm mb-4">Re-upload file to enable editing.</p>
                                <div className="text-left font-mono text-xs overflow-auto max-h-96">{detailMeeting.chunks[0].raw_text}</div>
                            </div>
                        ) : (<p className="text-slate-500">Processing...</p>)}
                      </div>
                    )
                )}

                {activeTab === 'translation' && (
                    <div className="p-6">
                        <pre className="whitespace-pre-wrap font-sans text-sm leading-relaxed">{translationResult?.result_text || "Loading translation..."}</pre>
                    </div>
                )}
              </div>
            </>
          )}
        </div>
      </div>
    )
  }

  // List View remains same
  return (
    <div className="min-h-screen bg-slate-50 dark:bg-slate-950 text-slate-900 dark:text-slate-200">
      <div className="max-w-5xl mx-auto px-4 py-12">
        <header className="flex items-center justify-between mb-12">
          <div><h1 className="text-3xl font-bold tracking-tight">Meeting Assistant</h1><p className="text-slate-500 mt-2">Transcribe and analyze your meetings with Gemini 2.0</p></div>
          <label className={clsx("flex items-center gap-2 px-6 py-3 bg-blue-600 hover:bg-blue-500 text-white rounded-full font-semibold transition-all cursor-pointer shadow-lg shadow-blue-500/20", uploading && "opacity-50 cursor-not-allowed")}>
            {uploading ? <Loader2 className="h-5 w-5 animate-spin" /> : <Upload className="h-5 w-5" />}
            {uploading ? "Uploading..." : "New Meeting"}
            <input type="file" className="hidden" accept="audio/*" onChange={handleUpload} disabled={uploading} />
          </label>
        </header>
        {error && <div className="mb-8 p-4 bg-red-50 text-red-600 rounded-xl flex items-center gap-3"><AlertCircle className="h-5 w-5" />{error}</div>}
        <div className="grid gap-4">
          {meetings.map((m: Meeting) => (
              <div key={m.id} onClick={() => { setSelectedId(m.id); setView('detail'); }} className="group bg-white dark:bg-slate-900 p-6 rounded-2xl border border-slate-200 dark:border-slate-800 hover:shadow-xl transition-all flex items-center justify-between cursor-pointer">
                <div className="flex items-center gap-4">
                  <div className={clsx("p-3 rounded-xl", m.status === 'COMPLETED' ? "bg-green-100 text-green-600" : "bg-blue-100 text-blue-600")}>{m.status === 'COMPLETED' ? <CheckCircle2 className="h-6 w-6" /> : <FileText className="h-6 w-6" />}</div>
                  <div><h3 className="font-bold text-lg leading-tight">{m.title}</h3><div className="flex items-center gap-4 mt-1 text-sm text-slate-500"><span className="flex items-center gap-1"><Clock className="h-3.5 w-3.5" /> {new Date(m.created_at).toLocaleDateString()}</span><span className={clsx("font-semibold uppercase tracking-wider text-[10px] px-2 py-0.5 rounded", m.status === 'COMPLETED' ? "bg-green-100 text-green-700" : "bg-slate-100 text-slate-600")}>{m.status}</span></div></div>
                </div>
                <button onClick={(e) => handleDeleteMeeting(e, m.id)} className="p-2 text-slate-400 hover:text-red-500 hover:bg-red-50 rounded-full transition-colors"><Trash2 className="h-5 w-5" /></button>
              </div>
          ))}
        </div>
      </div>
    </div>
  )
}