/**
 * MeetingNotesWidget - Quick Meeting Notes
 */

import React, { useState } from 'react';
import { FileText, Save, Mic } from 'lucide-react';
import { useWidgetCommunication } from '@/contexts/WidgetContext';

export default function MeetingNotesWidget({ widgetId }: { widgetId: string }) {
    const [notes, setNotes] = useState('');
    const [currentMeeting, setCurrentMeeting] = useState<string | null>(null);
    const { subscribeToEvent, broadcastEvent } = useWidgetCommunication(widgetId);

    React.useEffect(() => {
        const unsub = subscribeToEvent('calendar.meeting.joined', (event) => {
            setCurrentMeeting(event.data.title);
        });
        return () => unsub();
    }, []);

    const handleSave = () => {
        broadcastEvent({
            type: 'notes.saved',
            data: { meeting: currentMeeting, notes },
        });
        // TODO: Save to Notion/Google Docs
    };

    return (
        <div className="h-full flex flex-col bg-gradient-to-br from-violet-500/10 to-purple-500/10 backdrop-blur-sm border border-violet-500/30 rounded-lg overflow-hidden">
            <div className="p-4 border-b border-violet-500/20">
                <div className="flex items-center justify-between">
                    <div className="flex items-center gap-2">
                        <FileText className="w-5 h-5 text-violet-400" />
                        <span className="font-display text-sm uppercase tracking-wider text-violet-400">Meeting Notes</span>
                    </div>
                    <button className="p-1.5 bg-violet-500/20 hover:bg-violet-500/30 rounded transition-colors">
                        <Mic className="w-4 h-4 text-violet-400" />
                    </button>
                </div>
                {currentMeeting && (
                    <div className="mt-2 text-xs text-violet-300">📝 {currentMeeting}</div>
                )}
            </div>

            <textarea
                value={notes}
                onChange={(e) => setNotes(e.target.value)}
                placeholder="Start typing your meeting notes..."
                className="flex-1 p-4 bg-transparent text-white text-sm resize-none focus:outline-none placeholder-violet-300/30"
            />

            <div className="p-3 border-t border-violet-500/20 bg-black/20">
                <button
                    onClick={handleSave}
                    className="w-full flex items-center justify-center gap-2 py-2 bg-violet-500 hover:bg-violet-600 text-white rounded text-sm transition-colors"
                >
                    <Save className="w-4 h-4" />
                    Save Notes
                </button>
            </div>
        </div>
    );
}