import { useNavigate } from 'react-router-dom';
import { BsArrowLeft } from 'react-icons/bs';
import {
    FaBullhorn,
    FaUsers,
    FaHandshake,
    FaCommentDots,
    FaLightbulb,
    FaClipboardCheck,
    FaBroadcastTower,
} from 'react-icons/fa';
import { TaleDashbaordMainCard } from '@components/TaleDashbaordMainCard';
import { TaleText } from '@components/TaleText';
import { useTranslation } from '@/hooks/useTranslation';

/**
 * Écran Domaines — premier écran du flux TaleScan (Niveau 1).
 * Source : TaleScan V0.5 §4 (Univers / Domaines racines).
 *
 * name/description are resolved via t() at render time (see below) from
 * surveyBuilder.taleScan.domains.items.<domainId> — not stored here since
 * translations aren't available at module scope.
 */
export const DOMAINS = [
    { domainId: 'marketing', icon: FaBullhorn, accent: 'orange' },
    { domainId: 'rh', icon: FaUsers, accent: 'purple' },
    { domainId: 'b2b', icon: FaHandshake, accent: 'blue' },
    { domainId: 'opinion', icon: FaCommentDots, accent: 'teal' },
    { domainId: 'innovation', icon: FaLightbulb, accent: 'yellow' },
    { domainId: 'evaluation', icon: FaClipboardCheck, accent: 'green' },
    { domainId: 'communication', icon: FaBroadcastTower, accent: 'pink' },
];

const ACCENT_CLASSES = {
    orange: 'bg-orange-50 text-orange-500',
    purple: 'bg-purple-50 text-purple-500',
    blue: 'bg-blue-50 text-blue-500',
    teal: 'bg-teal-50 text-teal-500',
    yellow: 'bg-yellow-50 text-yellow-600',
    green: 'bg-green-50 text-green-500',
    pink: 'bg-pink-50 text-pink-500',
};

/**
 * Resolves a domain's display copy in the caller's current UI language.
 * `t` must come from the calling component's own useTranslation().
 */
export const getDomainLabels = (domainId, t) => ({
    name: t(`surveyBuilder.taleScan.domains.items.${domainId}.name`),
    description: t(`surveyBuilder.taleScan.domains.items.${domainId}.description`),
});

export default function TaleScanDomains({ basePath = '/scan' }) {
    const navigate = useNavigate();
    const { t } = useTranslation();

    return (
        <TaleDashbaordMainCard className="max-w-[1320px] mx-auto py-12 px-8 flex flex-col gap-9">
            <div className="flex items-start gap-4">
                <button
                    onClick={() => navigate('/survey/new')}
                    aria-label={t('surveyBuilder.taleScan.backAlt')}
                    className="shrink-0 w-10 h-10 rounded-xl border border-gray-200 flex items-center justify-center hover:bg-gray-50 transition-colors"
                >
                    <BsArrowLeft className="text-lg text-gray-900 rtl:-scale-x-100" />
                </button>
                <div className="flex flex-col gap-2">
                    <TaleText applyEffect={false} className="block text-xs font-semibold text-gray-400 uppercase tracking-wider">
                        {t('surveyBuilder.taleScan.domains.eyebrow')}
                    </TaleText>
                    <TaleText role="business" className="block text-2xl font-bold">
                        {t('surveyBuilder.taleScan.domains.title')}
                    </TaleText>
                    <span className="block w-20 h-1 rounded-full bg-tale-business" />
                    <TaleText applyEffect={false} className="block text-sm text-gray-500 max-w-lg">
                        {t('surveyBuilder.taleScan.domains.subtitle')}
                    </TaleText>
                </div>
            </div>

            <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-5">
                {DOMAINS.map((domain) => {
                    const Icon = domain.icon;
                    const { name, description } = getDomainLabels(domain.domainId, t);
                    return (
                        <button
                            key={domain.domainId}
                            onClick={() => navigate(`${basePath}/${domain.domainId}`)}
                            className="text-left flex items-start gap-4 border border-gray-200 rounded-2xl p-7 min-h-[180px] bg-white hover:shadow-md hover:border-gray-300 transition-all duration-150"
                        >
                            <div className={`shrink-0 w-14 h-14 rounded-xl flex items-center justify-center text-2xl ${ACCENT_CLASSES[domain.accent]}`}>
                                <Icon />
                            </div>
                            <div className="flex flex-col gap-1.5">
                                <TaleText applyEffect={false} className="block text-lg font-semibold text-gray-900 leading-snug">
                                    {name}
                                </TaleText>
                                <TaleText applyEffect={false} className="block text-sm text-gray-500 leading-relaxed">
                                    {description}
                                </TaleText>
                            </div>
                        </button>
                    );
                })}
            </div>

            <hr className="border-gray-200" />

            <button onClick={() => navigate('/survey/new/ai')} className="text-left flex flex-col gap-0.5 w-fit">
                <TaleText applyEffect={false} className="block text-sm font-semibold text-gray-900">
                    {t('surveyBuilder.taleScan.specificNeed.title')}
                </TaleText>
                <TaleText role="normal" className="block text-sm hover:underline">
                    {t('surveyBuilder.taleScan.specificNeed.link')}
                </TaleText>
            </button>
        </TaleDashbaordMainCard>
    );
}