import { useState, useEffect } from 'react';
import { invoke } from '@tauri-apps/api/core';
import { Calendar, RefreshCw, LogIn, Video } from 'lucide-react';
import { openUrl } from '@tauri-apps/plugin-opener';

interface CalendarEvent {
    id: string;
    subject: string;
    start: { dateTime: string, timeZone: string };
    end: { dateTime: string, timeZone: string };
    onlineMeeting?: { joinUrl: string };
    location?: { displayName: string };
    bodyPreview?: string; // Text preview
    body?: { content: string, contentType: string }; // Full HTML/Text
    attendees?: { emailAddress: { name: string, address: string }, type: string, status: { response: string } }[];
}

interface MeetingsViewProps {
    onStartRecording: (subject?: string) => void;
    azureClientId: string;
    apiKey: string;
    productId: string;
    selectedModel: string;
    onModelChange: (model: string) => void;
}

export default function MeetingsView({ onStartRecording, azureClientId, apiKey, productId, selectedModel, onModelChange }: MeetingsViewProps) {
    const [isAuthenticated, setIsAuthenticated] = useState(false);
    const [token, setToken] = useState(localStorage.getItem('m365_token') || '');
    // const [clientId, setClientId] = useState(azureClientId); // Use prop directly

    // Sync prop to state if needed, or just use prop.
    // Let's us prop directly in startAuthFlow

    const [events, setEvents] = useState<CalendarEvent[]>([]);
    const [loading, setLoading] = useState(false);
    const [error, setError] = useState('');
    const [expandedIds, setExpandedIds] = useState<Set<string>>(new Set());

    const [availableModels, setAvailableModels] = useState<Array<{ id: string, name: string }>>([]);

    const toggleExpand = (id: string) => {
        const newSet = new Set(expandedIds);
        if (newSet.has(id)) {
            newSet.delete(id);
        } else {
            newSet.add(id);
        }
        setExpandedIds(newSet);
    };

    useEffect(() => {
        if (apiKey && productId) {
            loadModels();
        }
    }, [apiKey, productId]);

    const loadModels = async () => {
        try {
            const models = await invoke<Array<{ id: string, name: string }>>('get_available_models', { apiKey, productId });
            if (models && models.length > 0) {
                models.sort((a, b) => a.name.localeCompare(b.name));
                setAvailableModels(models);
            }
        } catch (e) {
            console.error("Failed to load models:", e);
        }
    };

    useEffect(() => {
        if (token) {
            setIsAuthenticated(true);
            fetchEvents(token);
        }
    }, [token]);

    const handleLogin = async () => {
        if (!azureClientId) {
            setError("Please configure Client ID in Settings");
            return;
        }
        localStorage.setItem('m365_client_id', azureClientId);

        setLoading(true);
        setError('');
        try {
            const accessToken = await invoke<string>('start_auth_flow', { clientId: azureClientId });
            setToken(accessToken);
            localStorage.setItem('m365_token', accessToken);
            setIsAuthenticated(true);
            fetchEvents(accessToken);
        } catch (err) {
            console.error("Auth failed", err);
            setError(String(err)); // Use String() to safely convert error object
        } finally {
            setLoading(false);
        }
    };

    const fetchEvents = async (authToken: string) => {
        setLoading(true);
        setError('');
        try {
            const data = await invoke<CalendarEvent[]>('get_calendar_events', { token: authToken });
            // Sort by start time
            const sorted = data.sort((a, b) => new Date(a.start.dateTime).getTime() - new Date(b.start.dateTime).getTime());
            setEvents(sorted);
        } catch (err) {
            console.error("Fetch failed", err);
            setError(`Fetch failed: ${err}`);
            // If error is 401, logout
            if (String(err).includes('401')) {
                logout();
            }
        } finally {
            setLoading(false);
        }
    };

    const logout = () => {
        setToken('');
        localStorage.removeItem('m365_token');
        setIsAuthenticated(false);
        setEvents([]);
    };

    const handleJoin = async (joinUrl?: string, subject?: string) => {
        if (!joinUrl) return;
        try {
            // 1. Open URL
            await openUrl(joinUrl);
            // 2. Start Recording (wait a sec for app focus switch?)
            // Actually user might want to confirm recording? Protocol says "one-click".
            onStartRecording(subject);
        } catch (e) {
            console.error("Failed to join", e);
        }
    };

    const formatTime = (isoString: string) => {
        return new Date(isoString).toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' });
    };

    const formatDate = (isoString: string) => {
        const date = new Date(isoString);
        const today = new Date();
        const tomorrow = new Date(today);
        tomorrow.setDate(tomorrow.getDate() + 1);

        if (date.toDateString() === today.toDateString()) return "Today";
        if (date.toDateString() === tomorrow.toDateString()) return "Tomorrow";
        return date.toLocaleDateString([], { weekday: 'long', month: 'long', day: 'numeric' });
    };

    // Group events by date
    const groupedEvents = events.reduce((groups, event) => {
        const dateKey = formatDate(event.start.dateTime);
        if (!groups[dateKey]) {
            groups[dateKey] = [];
        }
        groups[dateKey].push(event);
        return groups;
    }, {} as Record<string, CalendarEvent[]>);

    return (
        <div className="flex flex-col w-full h-full bg-background p-6">
            <h1 className="text-2xl font-bold mb-6 flex items-center gap-2">
                <Calendar className="w-8 h-8" />
                Upcoming Meetings
            </h1>

            {/* Auth Section */}
            {!isAuthenticated ? (
                <div className="flex flex-col items-center justify-center flex-1 gap-6 text-center max-w-md mx-auto">
                    <div className="bg-secondary/30 p-8 rounded-xl border border-border">
                        <Calendar className="w-16 h-16 text-muted-foreground mx-auto mb-4" />
                        <h2 className="text-lg font-semibold mb-2">Connect Microsoft 365</h2>
                        <p className="text-sm text-muted-foreground mb-6">
                            Connect your account to see upcoming Teams & Zoom meetings and join them with one click.
                        </p>

                        <div className="flex flex-col gap-3">
                            <div className="text-sm p-3 bg-secondary/50 rounded border border-border text-center">
                                {azureClientId ? (
                                    <span className="text-green-600 font-medium">Client ID Configured</span>
                                ) : (
                                    <span className="text-destructive font-medium">Client ID Missing in Settings</span>
                                )}
                            </div>

                            <button
                                onClick={handleLogin}
                                disabled={loading || !azureClientId}
                                className="bg-primary text-primary-foreground px-4 py-2 rounded-md text-sm flex items-center justify-center gap-2 hover:opacity-90 disabled:opacity-50 w-full transition-all"
                            >
                                {loading ? <RefreshCw className="animate-spin" size={16} /> : <LogIn size={16} />}
                                Connect Account
                            </button>
                        </div>

                        {error && (
                            <div className="mt-4 p-3 bg-destructive/10 text-destructive text-xs rounded-md text-left break-all">
                                <strong>Error:</strong> {error}
                            </div>
                        )}

                        <p className="text-[10px] text-muted-foreground mt-4 px-2">
                            Note: Requires an Azure App Registration (Multitenant) with redirect URI: <br />
                            <code className="bg-secondary px-1 rounded">http://localhost:14200/auth/callback</code>
                        </p>
                    </div>
                </div>
            ) : (
                <div className="flex flex-col flex-1 overflow-hidden">
                    <div className="flex justify-between items-center mb-4 px-1">
                        <span className="text-sm text-muted-foreground font-medium">Next 7 Days</span>
                        <div className="flex items-center gap-3">
                            {/* Model Selector */}
                            <div className="flex items-center gap-2 bg-secondary/50 p-1 rounded-lg border border-border/50">
                                <span className="text-[10px] uppercase font-bold text-muted-foreground pl-2">Using:</span>
                                <select
                                    value={selectedModel}
                                    onChange={(e) => onModelChange(e.target.value)}
                                    className="bg-transparent text-xs font-medium outline-none text-foreground cursor-pointer"
                                >
                                    {availableModels.map(m => (
                                        <option key={m.id} value={m.id}>{m.name}</option>
                                    ))}
                                </select>
                            </div>

                            <button onClick={() => fetchEvents(token)} disabled={loading} className="text-muted-foreground hover:text-foreground p-1 rounded hover:bg-secondary transition-colors" title="Refresh">
                                <RefreshCw size={16} className={loading ? 'animate-spin' : ''} />
                            </button>
                            <button onClick={logout} className="text-muted-foreground hover:text-destructive p-1 rounded hover:bg-destructive/10 transition-colors" title="Logout">
                                <LogIn size={16} className="rotate-180" />
                            </button>
                        </div>
                    </div>

                    {events.length === 0 && !loading && (
                        <div className="flex-1 flex flex-col items-center justify-center text-muted-foreground">
                            {/* No meetings empty state (only if no error) */}
                            <Calendar size={48} className="mb-4 opacity-20" />
                            <p>No upcoming meetings found for the next 7 days.</p>
                        </div>
                    )}

                    {error && (
                        <div className="m-4 p-3 bg-destructive/10 text-destructive text-sm rounded-md flex items-center justify-between">
                            <span>{error}</span>
                            <button onClick={() => fetchEvents(token)} className="underline hover:no-underline ml-2">Retry</button>
                        </div>
                    )}

                    <div className="flex-1 overflow-y-auto pr-2 space-y-6 pb-20">
                        {Object.entries(groupedEvents).map(([dateLabel, dateEvents]) => (
                            <div key={dateLabel} className="space-y-3">
                                <div className="sticky top-0 z-10 bg-background/95 backdrop-blur py-2 border-b border-border/50 text-xs font-bold uppercase tracking-wider text-muted-foreground">
                                    {dateLabel}
                                </div>
                                {dateEvents.map(event => (
                                    <div key={event.id} className="bg-card border border-border rounded-xl p-4 hover:shadow-md transition-all group">
                                        <div className="flex justify-between items-start">
                                            <div className="flex flex-col gap-1">
                                                <div className="flex items-baseline gap-2">
                                                    <span className="text-lg font-mono font-medium text-foreground">
                                                        {formatTime(event.start.dateTime)}
                                                    </span>
                                                    <span className="text-xs text-muted-foreground">
                                                        - {formatTime(event.end.dateTime)}
                                                    </span>
                                                </div>
                                                <h3 className="text-base font-semibold group-hover:text-primary transition-colors leading-tight">
                                                    {event.subject}
                                                </h3>
                                                {event.location?.displayName && (
                                                    <div className="text-xs text-muted-foreground flex items-center gap-1">
                                                        📍 {event.location.displayName}
                                                    </div>
                                                )}
                                            </div>

                                            {event.onlineMeeting?.joinUrl ? (
                                                <button
                                                    onClick={() => handleJoin(event.onlineMeeting?.joinUrl, event.subject)}
                                                    className="shrink-0 bg-green-600 hover:bg-green-700 text-white p-2 rounded-lg shadow-sm hover:shadow transition-all flex flex-col items-center justify-center gap-0.5 min-w-[70px]"
                                                    title={`Join & Summarize with ${selectedModel}`}
                                                >
                                                    <Video size={16} />
                                                    <span className="text-[10px] font-bold">JOIN</span>
                                                </button>
                                            ) : (
                                                <div className="px-2 py-1 bg-secondary text-muted-foreground text-[10px] rounded italic">
                                                    No Link
                                                </div>
                                            )}
                                        </div>

                                        {/* Expand/Collapse Button */}
                                        <button
                                            onClick={() => toggleExpand(event.id)}
                                            className="text-[10px] text-muted-foreground hover:text-primary mt-2 flex items-center gap-1 transition-colors w-full justify-center py-0.5 bg-secondary/30 hover:bg-secondary/50 rounded"
                                        >
                                            {expandedIds.has(event.id) ? "Hide Details" : "Show Details"}
                                        </button>

                                        {/* Expanded Content */}
                                        {expandedIds.has(event.id) && (
                                            <div className="mt-2 text-xs text-foreground/80 bg-background/50 p-3 rounded border border-border/50 animate-in fade-in slide-in-from-top-1">
                                                {event.body?.content ? (
                                                    <div
                                                        className="prose prose-xs dark:prose-invert max-w-none break-words"
                                                        dangerouslySetInnerHTML={{ __html: event.body.content }}
                                                    />
                                                ) : (
                                                    <p className="whitespace-pre-wrap">{event.bodyPreview || "No details available."}</p>
                                                )}

                                                {event.attendees && event.attendees.length > 0 && (
                                                    <div className="mt-3 pt-3 border-t border-border/50">
                                                        <h4 className="text-xs font-semibold text-foreground mb-2 flex items-center gap-2">
                                                            👥 Attendees ({event.attendees.length})
                                                        </h4>
                                                        <div className="flex flex-wrap gap-1.5">
                                                            {event.attendees.map((att, i) => (
                                                                <div key={i} className="flex items-center gap-1.5 bg-secondary/50 border border-border/50 px-2 py-1 rounded text-xs transition-colors">
                                                                    <div className={`w-1.5 h-1.5 rounded-full shrink-0 ${att.status.response === 'accepted' ? 'bg-green-500 shadow-[0_0_4px_rgba(34,197,94,0.4)]' :
                                                                        att.status.response === 'declined' ? 'bg-red-500' : 'bg-yellow-500'
                                                                        }`} title={`Status: ${att.status.response}`} />
                                                                    <span className="truncate max-w-[150px]" title={att.emailAddress.address}>
                                                                        {att.emailAddress.name || att.emailAddress.address}
                                                                    </span>
                                                                </div>
                                                            ))}
                                                        </div>
                                                    </div>
                                                )}
                                            </div>
                                        )}
                                    </div>
                                ))}
                            </div>
                        ))}
                    </div>
                </div>
            )}
        </div>
    );
}