/**
 * Domain Validation Modal
 * 
 * CRITICAL UI COMPONENT for resume-first architecture.
 * 
 * This modal:
 * 1. Shows when user-selected domain doesn't match resume domain
 * 2. BLOCKS interview flow until user confirms or switches domain
 * 3. Shows clear warning with confidence scores
 * 4. Provides options to switch domain or continue anyway
 */

import React from 'react';
import {
    AlertTriangle, CheckCircle, XCircle, ArrowRight,
    RefreshCw, Shield, Code, Cpu, Zap, Building2, Palette, Cog
} from 'lucide-react';

// Domain icon mapping
const DOMAIN_ICONS = {
    computer_science: Code,
    electronics: Cpu,
    electrical: Zap,
    mechanical: Cog,
    civil: Building2,
    architecture: Palette,
};

// Domain color mapping
const DOMAIN_COLORS = {
    computer_science: '#8b5cf6',
    electronics: '#06b6d4',
    electrical: '#f59e0b',
    mechanical: '#ef4444',
    civil: '#10b981',
    architecture: '#ec4899',
};

function DomainValidationModal({
    validationResult,
    selectedBranch,
    selectedRole,
    onSwitchDomain,
    onContinueAnyway,
    onClose,
    isLoading = false,
}) {
    if (!validationResult) return null;

    const {
        is_match,
        warning_level,
        message,
        recommendation,
        can_proceed,
        requires_confirmation,
        resume_domain,
        resume_domain_name,
        resume_confidence,
        allowed_rounds,
        // NEW: Role-level mismatch fields
        mismatch_type,
        resume_specialization,
        resume_specialization_name,
        selected_role_specialization,
        selected_role_specialization_name,
        resume_skills,
        match_confidence,
    } = validationResult;

    // Check if this is a role-level mismatch (within CS domain)
    const isRoleMismatch = mismatch_type === 'role';

    // Get icons for domains
    const ResumeDomainIcon = DOMAIN_ICONS[resume_domain] || Code;
    const SelectedDomainIcon = DOMAIN_ICONS[selectedBranch] || Code;
    const resumeDomainColor = DOMAIN_COLORS[resume_domain] || '#8b5cf6';
    const selectedDomainColor = DOMAIN_COLORS[selectedBranch] || '#8b5cf6';

    // Determine modal severity
    const isHardWarning = warning_level === 'hard';
    const isSoftWarning = warning_level === 'soft';

    // Modal style based on severity
    const severityStyles = {
        hard: {
            borderColor: '#ef4444',
            iconBg: 'rgba(239, 68, 68, 0.1)',
            iconColor: '#ef4444',
        },
        soft: {
            borderColor: '#f59e0b',
            iconBg: 'rgba(245, 158, 11, 0.1)',
            iconColor: '#f59e0b',
        },
        none: {
            borderColor: '#10b981',
            iconBg: 'rgba(16, 185, 129, 0.1)',
            iconColor: '#10b981',
        },
    };

    const styles = severityStyles[warning_level] || severityStyles.none;

    // If it's a match, don't show modal (auto-proceed)
    if (is_match && can_proceed && !requires_confirmation) {
        return null;
    }

    return (
        <div className="domain-modal-overlay">
            <div
                className="domain-modal"
                style={{ borderColor: styles.borderColor }}
            >
                {/* Header Icon */}
                <div
                    className="domain-modal-icon"
                    style={{ backgroundColor: styles.iconBg }}
                >
                    {isHardWarning ? (
                        <XCircle size={48} color={styles.iconColor} />
                    ) : isSoftWarning ? (
                        <AlertTriangle size={48} color={styles.iconColor} />
                    ) : (
                        <CheckCircle size={48} color={styles.iconColor} />
                    )}
                </div>

                {/* Title */}
                <h2 className="domain-modal-title">
                    {isHardWarning ? (isRoleMismatch ? '🚫 Role Mismatch Detected' : '🚫 Domain Mismatch Detected') :
                        isSoftWarning ? (isRoleMismatch ? '⚠️ Role Mismatch' : '⚠️ Domain Mismatch') :
                            '✅ Validated'}
                </h2>

                {/* Message */}
                <div className="domain-modal-message">
                    <p>{message}</p>
                </div>

                {/* Domain Comparison */}
                <div className="domain-comparison">
                    {/* Resume Domain */}
                    <div className="domain-card resume-domain">
                        <div
                            className="domain-card-icon"
                            style={{ backgroundColor: resumeDomainColor + '20' }}
                        >
                            <ResumeDomainIcon size={24} color={resumeDomainColor} />
                        </div>
                        <div className="domain-card-content">
                            <span className="domain-card-label">Your Resume</span>
                            <span className="domain-card-name">
                                {isRoleMismatch ? resume_specialization_name : resume_domain_name}
                            </span>
                            <span className="domain-card-confidence">
                                {Math.round((match_confidence || resume_confidence || 0) * 100)}% confidence
                            </span>
                            {isRoleMismatch && resume_skills && resume_skills.length > 0 && (
                                <span className="domain-card-skills">
                                    Skills: {resume_skills.slice(0, 3).join(', ')}
                                </span>
                            )}
                        </div>
                    </div>

                    {/* Arrow */}
                    <div className="domain-comparison-arrow">
                        <ArrowRight size={24} />
                    </div>

                    {/* Selected Domain */}
                    <div className="domain-card selected-domain">
                        <div
                            className="domain-card-icon"
                            style={{ backgroundColor: selectedDomainColor + '20' }}
                        >
                            <SelectedDomainIcon size={24} color={selectedDomainColor} />
                        </div>
                        <div className="domain-card-content">
                            <span className="domain-card-label">You Selected</span>
                            <span className="domain-card-name">
                                {isRoleMismatch ? selectedRole : selectedBranch.replace(/_/g, ' ').replace(/\b\w/g, c => c.toUpperCase())}
                            </span>
                            {!isRoleMismatch && <span className="domain-card-role">{selectedRole}</span>}
                            {isRoleMismatch && selected_role_specialization_name && (
                                <span className="domain-card-role">({selected_role_specialization_name})</span>
                            )}
                        </div>
                    </div>
                </div>

                {/* Role Mismatch Explanation */}
                {isRoleMismatch && (
                    <div className="role-mismatch-explanation">
                        <Code size={16} />
                        <span>
                            Both roles are in <strong>Computer Science</strong>, but they require different skill sets.
                            Interview questions will be tailored to your selected role.
                        </span>
                    </div>
                )}

                {/* Recommendation */}
                {recommendation && (
                    <div className="domain-recommendation">
                        <RefreshCw size={16} />
                        <span>{recommendation}</span>
                    </div>
                )}

                {/* Blocked Rounds Warning */}
                {allowed_rounds && allowed_rounds.blocked_rounds && (
                    <div className="blocked-rounds-warning">
                        <Shield size={16} />
                        <span>
                            <strong>Note:</strong> The following rounds are not applicable for non-CS domains:{' '}
                            {allowed_rounds.blocked_rounds.join(', ')}
                        </span>
                    </div>
                )}

                {/* Action Buttons */}
                <div className="domain-modal-actions">
                    {/* Switch Domain Button - Always shown for mismatch */}
                    {!is_match && (
                        <button
                            className="btn-switch-domain"
                            onClick={() => onSwitchDomain(resume_domain, resume_domain_name)}
                            disabled={isLoading}
                            style={{ backgroundColor: resumeDomainColor }}
                        >
                            <ResumeDomainIcon size={18} />
                            Switch to {resume_domain_name}
                        </button>
                    )}

                    {/* Continue Anyway Button */}
                    {(can_proceed || requires_confirmation) && (
                        <button
                            className={`btn-continue-anyway ${isHardWarning ? 'warning' : ''}`}
                            onClick={onContinueAnyway}
                            disabled={isLoading}
                        >
                            {isLoading ? (
                                <span className="loading-spinner" />
                            ) : (
                                <>Continue Anyway (Advanced)</>
                            )}
                        </button>
                    )}

                    {/* Cancel/Close Button */}
                    {!can_proceed && !requires_confirmation && (
                        <button
                            className="btn-close-modal"
                            onClick={onClose}
                        >
                            Go Back
                        </button>
                    )}
                </div>

                {/* Warning Footer for Hard Mismatch */}
                {isHardWarning && (
                    <div className="domain-modal-footer-warning">
                        ⚠️ Continuing with mismatched domain may result in irrelevant questions and lower scores.
                    </div>
                )}
            </div>

            <style jsx>{`
                .domain-modal-overlay {
                    position: fixed;
                    top: 0;
                    left: 0;
                    right: 0;
                    bottom: 0;
                    background: rgba(0, 0, 0, 0.8);
                    backdrop-filter: blur(8px);
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    z-index: 9999;
                    animation: fadeIn 0.2s ease-out;
                }

                @keyframes fadeIn {
                    from { opacity: 0; }
                    to { opacity: 1; }
                }

                .domain-modal {
                    background: linear-gradient(145deg, #1a1a2e 0%, #0d0d1a 100%);
                    border: 2px solid;
                    border-radius: 20px;
                    padding: 32px;
                    max-width: 520px;
                    width: 90%;
                    animation: slideUp 0.3s ease-out;
                    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
                }

                @keyframes slideUp {
                    from { 
                        opacity: 0;
                        transform: translateY(20px);
                    }
                    to { 
                        opacity: 1;
                        transform: translateY(0);
                    }
                }

                .domain-modal-icon {
                    width: 80px;
                    height: 80px;
                    border-radius: 50%;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    margin: 0 auto 20px;
                }

                .domain-modal-title {
                    font-size: 1.5rem;
                    font-weight: 700;
                    text-align: center;
                    margin-bottom: 16px;
                    color: #fff;
                }

                .domain-modal-message {
                    text-align: center;
                    color: rgba(255, 255, 255, 0.8);
                    line-height: 1.6;
                    margin-bottom: 24px;
                    white-space: pre-line;
                }

                .domain-comparison {
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    gap: 16px;
                    margin-bottom: 24px;
                    flex-wrap: wrap;
                }

                .domain-card {
                    background: rgba(255, 255, 255, 0.05);
                    border-radius: 12px;
                    padding: 16px;
                    display: flex;
                    align-items: center;
                    gap: 12px;
                    min-width: 180px;
                }

                .domain-card-icon {
                    width: 48px;
                    height: 48px;
                    border-radius: 12px;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                }

                .domain-card-content {
                    display: flex;
                    flex-direction: column;
                    gap: 4px;
                }

                .domain-card-label {
                    font-size: 0.75rem;
                    color: rgba(255, 255, 255, 0.5);
                    text-transform: uppercase;
                    letter-spacing: 0.05em;
                }

                .domain-card-name {
                    font-size: 1rem;
                    font-weight: 600;
                    color: #fff;
                }

                .domain-card-confidence,
                .domain-card-role {
                    font-size: 0.8rem;
                    color: rgba(255, 255, 255, 0.6);
                }

                .domain-comparison-arrow {
                    color: rgba(255, 255, 255, 0.3);
                }

                .domain-recommendation {
                    display: flex;
                    align-items: center;
                    gap: 8px;
                    padding: 12px 16px;
                    background: rgba(139, 92, 246, 0.1);
                    border: 1px solid rgba(139, 92, 246, 0.3);
                    border-radius: 8px;
                    color: #a78bfa;
                    font-size: 0.9rem;
                    margin-bottom: 16px;
                }

                .blocked-rounds-warning {
                    display: flex;
                    align-items: flex-start;
                    gap: 8px;
                    padding: 12px 16px;
                    background: rgba(245, 158, 11, 0.1);
                    border: 1px solid rgba(245, 158, 11, 0.3);
                    border-radius: 8px;
                    color: #fbbf24;
                    font-size: 0.85rem;
                    margin-bottom: 16px;
                }

                .role-mismatch-explanation {
                    display: flex;
                    align-items: flex-start;
                    gap: 8px;
                    padding: 12px 16px;
                    background: rgba(139, 92, 246, 0.1);
                    border: 1px solid rgba(139, 92, 246, 0.3);
                    border-radius: 8px;
                    color: #c4b5fd;
                    font-size: 0.85rem;
                    margin-bottom: 16px;
                }
                
                .role-mismatch-explanation strong {
                    color: #a78bfa;
                }
                
                .domain-card-skills {
                    font-size: 0.75rem;
                    color: rgba(255, 255, 255, 0.5);
                    margin-top: 4px;
                    font-style: italic;
                }

                .domain-modal-actions {
                    display: flex;
                    flex-direction: column;
                    gap: 12px;
                    margin-top: 24px;
                }

                .btn-switch-domain {
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    gap: 8px;
                    padding: 14px 24px;
                    border: none;
                    border-radius: 10px;
                    font-size: 1rem;
                    font-weight: 600;
                    color: #fff;
                    cursor: pointer;
                    transition: all 0.2s ease;
                }

                .btn-switch-domain:hover {
                    transform: translateY(-2px);
                    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.3);
                }

                .btn-continue-anyway {
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    padding: 12px 24px;
                    background: transparent;
                    border: 1px solid rgba(255, 255, 255, 0.2);
                    border-radius: 10px;
                    font-size: 0.9rem;
                    color: rgba(255, 255, 255, 0.7);
                    cursor: pointer;
                    transition: all 0.2s ease;
                }

                .btn-continue-anyway:hover {
                    background: rgba(255, 255, 255, 0.05);
                    border-color: rgba(255, 255, 255, 0.3);
                }

                .btn-continue-anyway.warning {
                    border-color: rgba(239, 68, 68, 0.3);
                    color: rgba(239, 68, 68, 0.8);
                }

                .btn-continue-anyway.warning:hover {
                    background: rgba(239, 68, 68, 0.1);
                }

                .btn-close-modal {
                    padding: 12px 24px;
                    background: rgba(255, 255, 255, 0.1);
                    border: none;
                    border-radius: 10px;
                    font-size: 0.9rem;
                    color: #fff;
                    cursor: pointer;
                    transition: all 0.2s ease;
                }

                .btn-close-modal:hover {
                    background: rgba(255, 255, 255, 0.15);
                }

                .loading-spinner {
                    width: 20px;
                    height: 20px;
                    border: 2px solid rgba(255, 255, 255, 0.3);
                    border-top-color: #fff;
                    border-radius: 50%;
                    animation: spin 0.8s linear infinite;
                }

                @keyframes spin {
                    to { transform: rotate(360deg); }
                }

                .domain-modal-footer-warning {
                    margin-top: 16px;
                    padding: 12px;
                    text-align: center;
                    font-size: 0.8rem;
                    color: #fca5a5;
                    background: rgba(239, 68, 68, 0.1);
                    border-radius: 8px;
                }

                @media (max-width: 640px) {
                    .domain-modal {
                        padding: 24px;
                    }

                    .domain-comparison {
                        flex-direction: column;
                    }

                    .domain-comparison-arrow {
                        transform: rotate(90deg);
                    }

                    .domain-card {
                        width: 100%;
                    }
                }
            `}</style>
        </div>
    );
}

export default DomainValidationModal;