import React, { useState } from 'react';
import ReactMarkdown from 'react-markdown';
import { Copy, Check } from 'lucide-react';

interface TranscriptionViewProps {
    transcription: string;
    summary: string;
}

const TranscriptionView: React.FC<TranscriptionViewProps> = ({ transcription, summary }) => {
    const [copiedTrans, setCopiedTrans] = useState(false);
    const [copiedSum, setCopiedSum] = useState(false);

    const handleCopy = async (text: string, isSummary: boolean) => {
        if (!text) return;
        try {
            await navigator.clipboard.writeText(text);
            if (isSummary) {
                setCopiedSum(true);
                setTimeout(() => setCopiedSum(false), 2000);
            } else {
                setCopiedTrans(true);
                setTimeout(() => setCopiedTrans(false), 2000);
            }
        } catch (err) {
            console.error('Failed to copy!', err);
        }
    };

    return (
        <div className="flex flex-col h-full bg-background font-mono text-sm overflow-hidden">
            <div className="flex-1 flex flex-col md:flex-row divide-y md:divide-y-0 md:divide-x divide-border/40 overflow-hidden">
                {/* Original Transcription */}
                <div className="flex-1 flex flex-col min-h-0">
                    <div className="p-3 border-b border-border/40 bg-secondary/20 flex justify-between items-center shrink-0">
                        <span className="text-xs uppercase tracking-wider text-muted-foreground font-semibold">Original Transcription</span>
                        <button
                            onClick={() => handleCopy(transcription, false)}
                            className="text-xs flex items-center gap-1 hover:text-primary transition-colors disabled:opacity-50"
                            disabled={!transcription}
                        >
                            {copiedTrans ? <Check size={14} className="text-green-500" /> : <Copy size={14} />}
                            {copiedTrans ? 'Copied' : 'Copy'}
                        </button>
                    </div>
                    <div className="flex-1 overflow-y-auto p-4 bg-background">
                        {transcription ? (
                            <p className="whitespace-pre-wrap text-foreground leading-relaxed">{transcription}</p>
                        ) : (
                            <p className="text-muted-foreground italic text-xs">No transcription available yet...</p>
                        )}
                    </div>
                </div>

                {/* AI Summary */}
                <div className="flex-1 flex flex-col min-h-0">
                    <div className="p-3 border-b border-border/40 bg-secondary/20 flex justify-between items-center shrink-0">
                        <span className="text-xs uppercase tracking-wider text-muted-foreground font-semibold">AI Summary</span>
                        <button
                            onClick={() => handleCopy(summary, true)}
                            className="text-xs flex items-center gap-1 hover:text-primary transition-colors disabled:opacity-50"
                            disabled={!summary}
                        >
                            {copiedSum ? <Check size={14} className="text-green-500" /> : <Copy size={14} />}
                            {copiedSum ? 'Copied' : 'Copy'}
                        </button>
                    </div>
                    <div className="flex-1 overflow-y-auto p-4 bg-secondary/10 prose prose-sm max-w-none prose-p:text-foreground/90 prose-headings:text-foreground prose-strong:text-foreground prose-ul:text-foreground/90">
                        {summary ? (
                            <ReactMarkdown>{summary}</ReactMarkdown>
                        ) : (
                            <p className="text-muted-foreground italic text-xs">No summary available yet...</p>
                        )}
                    </div>
                </div>
            </div>
        </div>
    );
};

export default TranscriptionView;
