import React, { useState, useEffect } from 'react';
import type { ProjectDetails, Subset } from '../types';
import { getSortedKeys, sortEntriesByKey } from '../utils/sort-utils';
import ConfirmModal from './ConfirmModal';

// Language code to TMS locale mapping (same as backend)
const LANG_TO_LOCALE: Record<string, string> = {
    US: 'en_US',
    FR: 'fr_FR',
    ES: 'es_ES',
    DE: 'de_DE',
    TW: 'zh_TW',
    JP: 'ja_JP',
    TH: 'th_TH',
    KR: 'ko_KR',
    KO: 'ko_KR',
};

function getTmsUrl(projectId: number, lang?: string): string {
    const locale = lang ? LANG_TO_LOCALE[lang.toUpperCase()] : null;
    const baseUrl = `https://tms.kiledel.com/project/${projectId}`;
    return locale ? `${baseUrl}?l=${locale}` : baseUrl;
}

interface ProjectInfoModalProps {
    isOpen: boolean;
    onClose: () => void;
    projectDetails: ProjectDetails | null;
    isLoading: boolean;
    onDeleteMember?: (projectId: number, email: string, lang?: string) => Promise<void>;
}

const ProjectInfoModal: React.FC<ProjectInfoModalProps> = ({
    isOpen,
    onClose,
    projectDetails,
    isLoading,
    onDeleteMember,
}) => {
    const [activeSubsetIndex, setActiveSubsetIndex] = useState(0);
    const [deletingEmail, setDeletingEmail] = useState<string | null>(null);
    const [confirmDeleteEmail, setConfirmDeleteEmail] = useState<string | null>(null);
    const [emailToUsername, setEmailToUsername] = useState<Record<string, string>>({});
    const [isLoadingUsernames, setIsLoadingUsernames] = useState(false);

    // Fetch usernames when project details change
    useEffect(() => {
        if (!projectDetails || !isOpen) return;

        const emails = Object.keys(projectDetails.members);
        if (emails.length === 0) return;

        const fetchUsernames = async () => {
            setIsLoadingUsernames(true);
            try {
                console.log('Fetching usernames for emails:', emails);
                const response = await fetch('/api/user/resolve-emails', {
                    method: 'POST',
                    headers: { 'Content-Type': 'application/json' },
                    body: JSON.stringify({ emails }),
                });
                const data = await response.json();
                console.log('Resolve emails response:', data);
                if (data.success && data.data) {
                    setEmailToUsername(data.data);
                }
            } catch (error) {
                console.error('Failed to fetch usernames:', error);
            } finally {
                setIsLoadingUsernames(false);
            }
        };

        fetchUsernames();
    }, [projectDetails?.projectId, isOpen]); // Only re-fetch when project changes

    const handleDeleteMember = async (email: string) => {
        if (!projectDetails || !onDeleteMember) return;

        setDeletingEmail(email);
        setConfirmDeleteEmail(null);
        try {
            await onDeleteMember(projectDetails.projectId, email, projectDetails.lang);
        } finally {
            setDeletingEmail(null);
        }
    };

    if (!isOpen) return null;

    return (
        <div className="fixed inset-0 bg-black/50 backdrop-blur-sm flex items-center justify-center p-4 z-50">
            <div className="bg-slate-800 rounded-2xl shadow-2xl border border-slate-700 max-w-5xl w-full max-h-[90vh] overflow-hidden flex flex-col">
                {/* Header */}
                <div className="flex items-center justify-between p-6 border-b border-slate-700">
                    <h2 className="text-2xl font-bold text-white">
                        Thông tin Project TMS
                        {projectDetails && (
                            <>
                                {' '}
                                <span className="text-slate-400">(</span>
                                <a
                                    href={getTmsUrl(projectDetails.projectId, projectDetails.lang)}
                                    target="_blank"
                                    rel="noopener noreferrer"
                                    className="text-cyan-400 hover:text-cyan-300 hover:underline transition-colors text-lg font-normal"
                                >
                                    {getTmsUrl(projectDetails.projectId, projectDetails.lang)}
                                </a>
                                <span className="text-slate-400">)</span>
                            </>
                        )}
                    </h2>
                    <button
                        onClick={onClose}
                        className="text-slate-400 hover:text-white transition-colors p-2 hover:bg-slate-700 rounded-lg"
                    >
                        <svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
                        </svg>
                    </button>
                </div>

                {/* Content */}
                <div className="flex-1 overflow-y-auto p-6 space-y-6">
                    {isLoading ? (
                        <div className="text-center py-12">
                            <div className="inline-block animate-spin rounded-full h-12 w-12 border-b-2 border-indigo-500"></div>
                            <p className="text-slate-400 mt-4">Đang tải thông tin...</p>
                        </div>
                    ) : projectDetails ? (
                        <>
                            {/* Project Members Section - Only show users with both username and email */}
                            <div>
                                <h3 className="text-lg font-semibold text-white mb-4 flex items-center gap-2">
                                    Project Members
                                    {isLoadingUsernames && (
                                        <span className="text-xs text-slate-400 animate-pulse">(đang tải usernames...)</span>
                                    )}
                                </h3>
                                {(() => {
                                    // Filter to only show users with valid TMS username, then sort by username
                                    const membersWithUsername = Object.keys(projectDetails.members)
                                        .filter(email => {
                                            const username = emailToUsername[email];
                                            return username && username !== email;
                                        })
                                        .sort((a, b) => {
                                            const usernameA = emailToUsername[a] || '';
                                            const usernameB = emailToUsername[b] || '';
                                            return usernameA.localeCompare(usernameB);
                                        });

                                    if (membersWithUsername.length === 0) {
                                        return <p className="text-slate-400">Không có member TMS nào.</p>;
                                    }

                                    return (
                                        <div className="max-h-80 overflow-y-auto pr-2">
                                            <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-3">
                                                {membersWithUsername.map((email) => {
                                                    const username = emailToUsername[email];
                                                    return (
                                                        <div
                                                            key={email}
                                                            className="bg-slate-700/50 text-slate-200 px-4 py-3 rounded-lg text-sm flex items-center justify-between gap-2 group"
                                                            title={email}
                                                        >
                                                            <div className="truncate flex-1">
                                                                <div className="font-medium text-indigo-300 truncate">{username}</div>
                                                                <div className="truncate text-xs text-slate-400">{email}</div>
                                                            </div>
                                                            {onDeleteMember && (
                                                                <button
                                                                    onClick={() => setConfirmDeleteEmail(email)}
                                                                    disabled={deletingEmail === email}
                                                                    className="text-slate-400 hover:text-rose-400 transition-colors p-1 rounded hover:bg-slate-600 flex-shrink-0"
                                                                    title="Xóa khỏi Project"
                                                                >
                                                                    {deletingEmail === email ? (
                                                                        <svg className="w-4 h-4 animate-spin" fill="none" viewBox="0 0 24 24">
                                                                            <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4"></circle>
                                                                            <path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
                                                                        </svg>
                                                                    ) : (
                                                                        <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                                                            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
                                                                        </svg>
                                                                    )}
                                                                </button>
                                                            )}
                                                        </div>
                                                    );
                                                })}
                                            </div>
                                        </div>
                                    );
                                })()}
                            </div>

                            {/* Subsets Section */}
                            <div>
                                <h3 className="text-lg font-semibold text-white mb-4">Subsets</h3>
                                {projectDetails.subsets.length === 0 ? (
                                    <p className="text-slate-400">Không có subset nào.</p>
                                ) : (
                                    <>
                                        {/* Subset Tabs */}
                                        <div className="flex gap-2 mb-4 overflow-x-auto pb-2">
                                            {projectDetails.subsets.map((subset, index) => (
                                                <button
                                                    key={subset.id}
                                                    onClick={() => setActiveSubsetIndex(index)}
                                                    className={`px-4 py-2 rounded-lg font-medium whitespace-nowrap transition-colors ${activeSubsetIndex === index
                                                        ? 'bg-indigo-600 text-white'
                                                        : 'bg-slate-700 text-slate-300 hover:bg-slate-600'
                                                        }`}
                                                >
                                                    {subset.title}
                                                </button>
                                            ))}
                                        </div>

                                        {/* Active Subset Content */}
                                        {projectDetails.subsets[activeSubsetIndex] && (
                                            <div className="bg-slate-700/30 rounded-lg overflow-hidden max-h-80 overflow-y-auto">
                                                <table className="w-full">
                                                    <thead className="sticky top-0 bg-slate-700">
                                                        <tr>
                                                            <th className="text-left p-4 text-slate-300 font-semibold">Member</th>
                                                            <th className="text-left p-4 text-slate-300 font-semibold">Access</th>
                                                        </tr>
                                                    </thead>
                                                    <tbody>
                                                        {(() => {
                                                            // Filter subset members to only those with valid TMS username, then sort by username
                                                            const subsetMembers = Object.entries(projectDetails.subsets[activeSubsetIndex].members)
                                                                .filter(([email]) => {
                                                                    const username = emailToUsername[email];
                                                                    return username && username !== email;
                                                                })
                                                                .sort((a, b) => {
                                                                    const usernameA = emailToUsername[a[0]] || '';
                                                                    const usernameB = emailToUsername[b[0]] || '';
                                                                    return usernameA.localeCompare(usernameB);
                                                                });

                                                            if (subsetMembers.length === 0) {
                                                                return (
                                                                    <tr>
                                                                        <td colSpan={2} className="p-4 text-center text-slate-400">
                                                                            Không có member TMS nào trong subset này.
                                                                        </td>
                                                                    </tr>
                                                                );
                                                            }

                                                            return subsetMembers.map(
                                                                ([email, role]) => {
                                                                    const username = emailToUsername[email];
                                                                    return (
                                                                        <tr key={email} className="border-t border-slate-700/50">
                                                                            <td className="p-4 text-slate-200" title={email}>{username}</td>
                                                                            <td className="p-4">
                                                                                <span
                                                                                    className={`px-3 py-1 rounded-full text-xs font-medium ${role === 'RW'
                                                                                        ? 'bg-green-500/20 text-green-400'
                                                                                        : 'bg-blue-500/20 text-blue-400'
                                                                                        }`}
                                                                                >
                                                                                    {role}
                                                                                </span>
                                                                            </td>
                                                                        </tr>
                                                                    );
                                                                }
                                                            );
                                                        })()}
                                                    </tbody>
                                                </table>
                                            </div>
                                        )}
                                    </>
                                )}
                            </div>
                        </>
                    ) : (
                        <p className="text-slate-400 text-center py-12">Không có dữ liệu.</p>
                    )}
                </div>

                {/* Footer */}
                <div className="flex justify-end p-6 border-t border-slate-700">
                    <button
                        onClick={onClose}
                        className="px-6 py-2.5 bg-slate-700 hover:bg-slate-600 text-white rounded-lg font-medium transition-colors"
                    >
                        Đóng
                    </button>
                </div>
            </div>

            {/* Confirm Delete Modal */}
            <ConfirmModal
                isOpen={!!confirmDeleteEmail}
                title="Xác nhận xoá"
                message={`Bạn có chắc muốn xoá "${confirmDeleteEmail}" khỏi Project Members?`}
                confirmText="Xoá"
                cancelText="Huỷ"
                onConfirm={() => confirmDeleteEmail && handleDeleteMember(confirmDeleteEmail)}
                onCancel={() => setConfirmDeleteEmail(null)}
                isLoading={!!deletingEmail}
            />
        </div>
    );
};

export default ProjectInfoModal;