import { useState, useEffect } from 'react';
import { Globe, Mail, Check, X, ExternalLink, Loader2, Inbox, Calendar, Trash2 } from 'lucide-react';
import api from '../services/api';
import { useLanguage } from '../contexts/LanguageContext';
import toast from 'react-hot-toast';

export default function FederationInbox() {
    const { t } = useLanguage();
    const [invitations, setInvitations] = useState([]);
    const [calendarInvitations, setCalendarInvitations] = useState([]);
    const [localCalInvitations, setLocalCalInvitations] = useState([]);
    const [loading, setLoading] = useState(true);

    const fetchInvitations = async () => {
        try {
            const [roomRes, calRes, localCalRes] = await Promise.all([
                api.get('/federation/invitations'),
                api.get('/federation/calendar-invitations').catch(() => ({ data: { invitations: [] } })),
                api.get('/calendar/local-invitations').catch(() => ({ data: { invitations: [] } })),
            ]);
            setInvitations(roomRes.data.invitations || []);
            setCalendarInvitations(calRes.data.invitations || []);
            setLocalCalInvitations(localCalRes.data.invitations || []);
        } catch {
            toast.error(t('federation.loadFailed'));
        } finally {
            setLoading(false);
        }
    };

    useEffect(() => {
        fetchInvitations();
    }, []);

    // ── Room invitation actions ──────────────────────────────────────────────
    const handleAccept = async (id) => {
        try {
            await api.post(`/federation/invitations/${id}/accept`);
            toast.success(t('federation.acceptedSaved'));
            fetchInvitations();
        } catch {
            toast.error(t('federation.acceptFailed'));
        }
    };

    const handleDecline = async (id) => {
        try {
            await api.delete(`/federation/invitations/${id}`);
            toast.success(t('federation.declined'));
            fetchInvitations();
        } catch {
            toast.error(t('federation.declineFailed'));
        }
    };

    const handleDeleteInvitation = async (id) => {
        try {
            await api.delete(`/federation/invitations/${id}`);
            toast.success(t('federation.invitationRemoved'));
            fetchInvitations();
        } catch {
            toast.error(t('federation.declineFailed'));
        }
    };

    // ── Calendar invitation actions ──────────────────────────────────────────
    const handleCalAccept = async (id) => {
        try {
            await api.post(`/federation/calendar-invitations/${id}/accept`);
            toast.success(t('federation.calendarAccepted'));
            fetchInvitations();
        } catch {
            toast.error(t('federation.acceptFailed'));
        }
    };

    const handleCalDecline = async (id) => {
        try {
            await api.delete(`/federation/calendar-invitations/${id}`);
            toast.success(t('federation.declined'));
            fetchInvitations();
        } catch {
            toast.error(t('federation.declineFailed'));
        }
    };

    const handleCalDelete = async (id) => {
        try {
            await api.delete(`/federation/calendar-invitations/${id}`);
            toast.success(t('federation.invitationRemoved'));
            fetchInvitations();
        } catch {
            toast.error(t('federation.declineFailed'));
        }
    };

    // ── Local calendar invitation actions ───────────────────────────────────
    const handleLocalCalAccept = async (id) => {
        try {
            await api.post(`/calendar/local-invitations/${id}/accept`);
            toast.success(t('federation.calendarLocalAccepted'));
            fetchInvitations();
        } catch {
            toast.error(t('federation.acceptFailed'));
        }
    };

    const handleLocalCalDecline = async (id) => {
        try {
            await api.delete(`/calendar/local-invitations/${id}`);
            toast.success(t('federation.declined'));
            fetchInvitations();
        } catch {
            toast.error(t('federation.declineFailed'));
        }
    };

    const handleLocalCalDelete = async (id) => {
        try {
            await api.delete(`/calendar/local-invitations/${id}`);
            toast.success(t('federation.invitationRemoved'));
            fetchInvitations();
        } catch {
            toast.error(t('federation.declineFailed'));
        }
    };

    if (loading) {
        return (
            <div className="flex items-center justify-center py-20">
                <Loader2 size={32} className="animate-spin text-th-accent" />
            </div>
        );
    }

    const pendingRooms = invitations.filter(i => i.status === 'pending');
    const pastRooms = invitations.filter(i => i.status !== 'pending');
    const pendingCal = calendarInvitations.filter(i => i.status === 'pending');
    const pastCal = calendarInvitations.filter(i => i.status !== 'pending');
    const pendingLocalCal = localCalInvitations.filter(i => i.status === 'pending');
    const pastLocalCal = localCalInvitations.filter(i => i.status !== 'pending');

    const totalPending = pendingRooms.length + pendingCal.length + pendingLocalCal.length;
    const totalPast = pastRooms.length + pastCal.length + pastLocalCal.length;

    return (
        <div>
            {/* Header */}
            <div className="mb-8">
                <div className="flex items-center gap-3 mb-1">
                    <Globe size={24} className="text-th-accent" />
                    <h1 className="text-2xl font-bold text-th-text">{t('federation.inbox')}</h1>
                </div>
                <p className="text-sm text-th-text-s mt-1">{t('federation.inboxSubtitle')}</p>
            </div>

            {/* Pending invitations */}
            {totalPending > 0 && (
                <div className="mb-8">
                    <h2 className="text-sm font-semibold text-th-text uppercase tracking-wider mb-4">
                        {t('federation.pending')} ({totalPending})
                    </h2>
                    <div className="space-y-3">
                        {/* Pending room invitations */}
                        {pendingRooms.map(inv => (
                            <div key={`room-${inv.id}`} className="card p-5 border-l-4 border-l-th-accent">
                                <div className="flex flex-col sm:flex-row sm:items-center justify-between gap-4">
                                    <div className="min-w-0">
                                        <div className="flex items-center gap-2 mb-1">
                                            <Mail size={16} className="text-th-accent flex-shrink-0" />
                                            <h3 className="text-base font-semibold text-th-text truncate">{inv.room_name}</h3>
                                        </div>
                                        <p className="text-sm text-th-text-s">
                                            {t('federation.from')}: <span className="font-medium text-th-text">{inv.from_user}</span>
                                        </p>
                                        {inv.message && (
                                            <p className="text-sm text-th-text-s mt-2 italic">"{inv.message}"</p>
                                        )}
                                        <p className="text-xs text-th-text-s mt-1">
                                            {new Date(inv.created_at).toLocaleString()}
                                        </p>
                                    </div>
                                    <div className="flex items-center gap-2 flex-shrink-0">
                                        <button onClick={() => handleAccept(inv.id)} className="btn-primary text-sm">
                                            <Check size={16} />
                                            {t('federation.accept')}
                                        </button>
                                        <button onClick={() => handleDecline(inv.id)} className="btn-secondary text-sm">
                                            <X size={16} />
                                            {t('federation.decline')}
                                        </button>
                                    </div>
                                </div>
                            </div>
                        ))}

                        {/* Pending calendar invitations */}
                        {pendingCal.map(inv => (
                            <div key={`cal-${inv.id}`} className="card p-5 border-l-4 border-l-th-success">
                                <div className="flex flex-col sm:flex-row sm:items-center justify-between gap-4">
                                    <div className="min-w-0">
                                        <div className="flex items-center gap-2 mb-1">
                                            <Calendar size={16} className="text-th-success flex-shrink-0" />
                                            <span className="text-xs font-semibold uppercase tracking-wide text-th-success mr-1">
                                                {t('federation.calendarEvent')}
                                            </span>
                                            <h3 className="text-base font-semibold text-th-text truncate">{inv.title}</h3>
                                        </div>
                                        <p className="text-sm text-th-text-s">
                                            {t('federation.from')}: <span className="font-medium text-th-text">{inv.from_user}</span>
                                        </p>
                                        <p className="text-sm text-th-text-s mt-1">
                                            {new Date(inv.start_time).toLocaleString()} - {new Date(inv.end_time).toLocaleString()}
                                        </p>
                                        {inv.description && (
                                            <p className="text-sm text-th-text-s mt-1 italic">"{inv.description}"</p>
                                        )}
                                        <p className="text-xs text-th-text-s mt-1">
                                            {new Date(inv.created_at).toLocaleString()}
                                        </p>
                                    </div>
                                    <div className="flex items-center gap-2 flex-shrink-0">
                                        <button onClick={() => handleCalAccept(inv.id)} className="btn-primary text-sm">
                                            <Check size={16} />
                                            {t('federation.accept')}
                                        </button>
                                        <button onClick={() => handleCalDecline(inv.id)} className="btn-secondary text-sm">
                                            <X size={16} />
                                            {t('federation.decline')}
                                        </button>
                                    </div>
                                </div>
                            </div>
                        ))}

                        {/* Pending local calendar invitations */}
                        {pendingLocalCal.map(inv => (
                            <div key={`localcal-${inv.id}`} className="card p-5 border-l-4 border-l-th-accent">
                                <div className="flex flex-col sm:flex-row sm:items-center justify-between gap-4">
                                    <div className="min-w-0">
                                        <div className="flex items-center gap-2 mb-1">
                                            <Calendar size={16} className="text-th-accent flex-shrink-0" />
                                            <span className="text-xs font-semibold uppercase tracking-wide text-th-accent mr-1">
                                                {t('federation.localCalendarEvent')}
                                            </span>
                                            <h3 className="text-base font-semibold text-th-text truncate">{inv.title}</h3>
                                        </div>
                                        <p className="text-sm text-th-text-s">
                                            {t('federation.from')}: <span className="font-medium text-th-text">{inv.from_name}</span>
                                        </p>
                                        <p className="text-sm text-th-text-s mt-1">
                                            {new Date(inv.start_time).toLocaleString()} - {new Date(inv.end_time).toLocaleString()}
                                        </p>
                                        {inv.description && (
                                            <p className="text-sm text-th-text-s mt-1 italic">"{inv.description}"</p>
                                        )}
                                        <p className="text-xs text-th-text-s mt-1">
                                            {new Date(inv.created_at).toLocaleString()}
                                        </p>
                                    </div>
                                    <div className="flex items-center gap-2 flex-shrink-0">
                                        <button onClick={() => handleLocalCalAccept(inv.id)} className="btn-primary text-sm">
                                            <Check size={16} />
                                            {t('federation.accept')}
                                        </button>
                                        <button onClick={() => handleLocalCalDecline(inv.id)} className="btn-secondary text-sm">
                                            <X size={16} />
                                            {t('federation.decline')}
                                        </button>
                                    </div>
                                </div>
                            </div>
                        ))}
                    </div>
                </div>
            )}

            {/* Past invitations */}
            {totalPast > 0 && (
                <div className="mb-8">
                    <h2 className="text-sm font-semibold text-th-text uppercase tracking-wider mb-4">
                        {t('federation.previousInvites')}
                    </h2>
                    <div className="space-y-2">
                        {/* Past room invitations */}
                        {pastRooms.map(inv => (
                            <div key={`room-past-${inv.id}`} className="card p-4 opacity-70">
                                <div className="flex items-center justify-between gap-4">
                                    <div className="min-w-0 flex items-center gap-2">
                                        <Mail size={14} className="text-th-text-s flex-shrink-0" />
                                        <div className="min-w-0">
                                            <h3 className="text-sm font-medium text-th-text truncate">{inv.room_name}</h3>
                                            <p className="text-xs text-th-text-s">{inv.from_user}</p>
                                        </div>
                                    </div>
                                    <div className="flex items-center gap-2 flex-shrink-0">
                                        <span className={`text-xs font-medium px-2 py-1 rounded-full ${inv.status === 'accepted'
                                            ? 'bg-th-success/15 text-th-success'
                                            : 'bg-th-error/15 text-th-error'
                                        }`}>
                                            {inv.status === 'accepted' ? t('federation.statusAccepted') : t('federation.statusDeclined')}
                                        </span>
                                        {inv.status === 'accepted' && (
                                            <button
                                                onClick={() => window.open(inv.join_url, '_blank')}
                                                className="btn-ghost text-xs py-1.5 px-2"
                                                title={t('federation.openLink')}
                                            >
                                                <ExternalLink size={14} />
                                            </button>
                                        )}
                                        <button
                                            onClick={() => handleDeleteInvitation(inv.id)}
                                            className="btn-ghost text-xs py-1.5 px-2 text-th-text-s hover:text-th-error"
                                            title={t('federation.removeInvitation')}
                                        >
                                            <Trash2 size={14} />
                                        </button>
                                    </div>
                                </div>
                            </div>
                        ))}

                        {/* Past calendar invitations */}
                        {pastCal.map(inv => (
                            <div key={`cal-past-${inv.id}`} className="card p-4 opacity-70">
                                <div className="flex items-center justify-between gap-4">
                                    <div className="min-w-0 flex items-center gap-2">
                                        <Calendar size={14} className="text-th-text-s flex-shrink-0" />
                                        <div className="min-w-0">
                                            <h3 className="text-sm font-medium text-th-text truncate">{inv.title}</h3>
                                            <p className="text-xs text-th-text-s">{inv.from_user} · {new Date(inv.start_time).toLocaleDateString()}</p>
                                        </div>
                                    </div>
                                    <div className="flex items-center gap-2 flex-shrink-0">
                                        <span className={`text-xs font-medium px-2 py-1 rounded-full ${inv.status === 'accepted'
                                            ? 'bg-th-success/15 text-th-success'
                                            : 'bg-th-error/15 text-th-error'
                                        }`}>
                                            {inv.status === 'accepted' ? t('federation.statusAccepted') : t('federation.statusDeclined')}
                                        </span>
                                        {inv.status === 'accepted' && inv.join_url && (
                                            <button
                                                onClick={() => window.open(inv.join_url, '_blank')}
                                                className="btn-ghost text-xs py-1.5 px-2"
                                                title={t('federation.openLink')}
                                            >
                                                <ExternalLink size={14} />
                                            </button>
                                        )}
                                        <button
                                            onClick={() => handleCalDelete(inv.id)}
                                            className="btn-ghost text-xs py-1.5 px-2 text-th-text-s hover:text-th-error"
                                            title={t('federation.removeInvitation')}
                                        >
                                            <Trash2 size={14} />
                                        </button>
                                    </div>
                                </div>
                            </div>
                        ))}

                        {/* Past local calendar invitations */}
                        {pastLocalCal.map(inv => (
                            <div key={`localcal-past-${inv.id}`} className="card p-4 opacity-70">
                                <div className="flex items-center justify-between gap-4">
                                    <div className="min-w-0 flex items-center gap-2">
                                        <Calendar size={14} className="text-th-text-s flex-shrink-0" />
                                        <div className="min-w-0">
                                            <h3 className="text-sm font-medium text-th-text truncate">{inv.title}</h3>
                                            <p className="text-xs text-th-text-s">{inv.from_name} · {new Date(inv.start_time).toLocaleDateString()}</p>
                                        </div>
                                    </div>
                                    <div className="flex items-center gap-2 flex-shrink-0">
                                        <span className={`text-xs font-medium px-2 py-1 rounded-full ${inv.status === 'accepted'
                                            ? 'bg-th-success/15 text-th-success'
                                            : 'bg-th-error/15 text-th-error'
                                        }`}>
                                            {inv.status === 'accepted' ? t('federation.statusAccepted') : t('federation.statusDeclined')}
                                        </span>
                                        <button
                                            onClick={() => handleLocalCalDelete(inv.id)}
                                            className="btn-ghost text-xs py-1.5 px-2 text-th-text-s hover:text-th-error"
                                            title={t('federation.removeInvitation')}
                                        >
                                            <Trash2 size={14} />
                                        </button>
                                    </div>
                                </div>
                            </div>
                        ))}
                    </div>
                </div>
            )}

            {/* Empty state */}
            {totalPending === 0 && totalPast === 0 && (
                <div className="card p-12 text-center">
                    <Inbox size={48} className="mx-auto text-th-text-s/40 mb-4" />
                    <h3 className="text-lg font-semibold text-th-text mb-2">{t('federation.noInvitations')}</h3>
                    <p className="text-sm text-th-text-s">{t('federation.noInvitationsSubtitle')}</p>
                </div>
            )}
        </div>
    );
}