import {
    Mic,
    FileText,
    Database,
    MessageSquare,
    ArrowRight,
    Check
} from 'lucide-react';

import SharedHeader from '../components/SharedHeader';
import StepProgress from '../components/StepProgress';
import { useTranslation } from 'react-i18next';
import { useNavigate } from 'react-router-dom';
import { useState } from 'react';
import { useGlobalSettings } from '../hooks/useGlobalSettings';
import { useEmailSubmission } from '../hooks/useEmailSubmission';

const Step1 = () => {
    const { t } = useTranslation();
    const navigate = useNavigate();
    const { isDark, currentLang, toggleTheme, toggleLang, themeClasses } = useGlobalSettings();

    const scrollToSection = (id: string) => {
        const element = document.getElementById(id);
        if (element) {
            element.scrollIntoView({ behavior: 'smooth' });
        }
    };

    // Form State
    const [formData, setFormData] = useState({
        name: '',
        contact: '',
        industry: ''
    });
    const { submitEmail, status, message } = useEmailSubmission();
    const [localValidationError, setLocalValidationError] = useState<string>('');

    const handleInputChange = (e: React.ChangeEvent<HTMLInputElement | HTMLSelectElement>) => {
        const { name, value } = e.target;
        setFormData(prev => ({ ...prev, [name]: value }));
    };

    const handleSubmit = async (e: React.FormEvent) => {
        e.preventDefault();
        setLocalValidationError('');

        // Basic validation
        if (!formData.contact) {
            setLocalValidationError(currentLang === 'zh' ? '请填写联系方式' : 'Please enter your contact info');
            return;
        }

        // 使用新的API服务提交数据
        const payload = {
            email: formData.contact,
            name: formData.name,
            industry: formData.industry,
            source: 'Step1_Consulting'
        };

        const response = await submitEmail(payload);

        // 如果提交成功，清空表单
        if (response.success) {
            setFormData({ name: '', contact: '', industry: '' });
        }
    };

    // Theme classes are now provided by useGlobalSettings hook

    return (
        <div className={`min-h-screen font-sans selection:bg-black selection:text-white transition-colors duration-300 ${themeClasses.bg} ${themeClasses.text}`}>
            <SharedHeader
                theme={isDark ? 'dark' : 'light'}
                onThemeToggle={toggleTheme}
                onLangToggle={toggleLang}
                currentLang={currentLang}
            />

            <div className="pt-20 pb-2">
                <StepProgress currentStep={1} theme={isDark ? 'dark' : 'light'} />
            </div>

            {/* Hero / Manifesto Section */}
            <section id="manifesto" className={`pt-8 pb-20 border-b ${themeClasses.border}`}>
                <div className="max-w-5xl mx-auto px-6">
                    <div
                        className={`mb-8 inline-block border px-3 py-1 text-xs font-mono uppercase tracking-wider rounded-sm ${themeClasses.borderStrong} ${themeClasses.bgSecondary} ${themeClasses.textMuted}`}>
                        {t('step1.label')}
                    </div>

                    <h1 className="text-5xl md:text-7xl font-bold tracking-tight mb-8 leading-[1.1]">
                        {t('step1.hero_title_1')}<br />
                        {t('step1.hero_title_2')}<span className={`px-2 decoration-clone ${themeClasses.marker} ${isDark ? 'text-white' : ''} text-black mx-2`}>{t('step1.hero_title_highlight')}</span>。
                    </h1>

                    <div className="grid md:grid-cols-12 gap-12 mt-12">
                        <div className="md:col-span-8">
                            <p className={`text-xl md:text-2xl leading-relaxed font-serif ${themeClasses.textMuted}`}>
                                {t('step1.hero_desc')}
                            </p>
                            <div className="mt-10 flex flex-wrap gap-4">
                                <button onClick={() => scrollToSection('pain')} className={`group flex items-center gap-2
                            border-b-2 pb-1 transition ${isDark ? 'border-stone-100 hover:text-stone-300' : 'border-black hover:text-slate-600'}`}>
                                    <ArrowRight className="w-4 h-4 group-hover:translate-x-1 transition" />
                                    {t('step1.btn_pain')}
                                </button>
                            </div>
                        </div>

                        <div className={`md:col-span-4 border-l pl-8 hidden md:block ${themeClasses.borderStrong}`}>
                            <p className={`text-xs font-bold uppercase tracking-widest mb-4 ${themeClasses.textLight}`}>{t('step1.target_audience')}</p>
                            <ul className={`space-y-3 text-sm font-medium ${isDark ? 'text-stone-300' : 'text-slate-700'}`}>
                                <li className="flex items-center gap-2">
                                    <Check className={`w-4 h-4 ${themeClasses.textLight}`} /> {t('step1.audience.consultant')}
                                </li>
                                <li className="flex items-center gap-2">
                                    <Check className={`w-4 h-4 ${themeClasses.textLight}`} /> {t('step1.audience.audit')}
                                </li>
                                <li className="flex items-center gap-2">
                                    <Check className={`w-4 h-4 ${themeClasses.textLight}`} /> {t('step1.audience.analyst')}
                                </li>
                                <li className="flex items-center gap-2">
                                    <Check className={`w-4 h-4 ${themeClasses.textLight}`} /> {t('step1.audience.hunter')}
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
            </section>

            {/* The Problem / Friction */}
            <section id="pain" className={`py-20 border-b ${themeClasses.border}`}>
                <div className="max-w-5xl mx-auto px-6">
                    <h2 className={`text-sm font-bold uppercase tracking-widest mb-12 ${themeClasses.textLight}`}>{t('step1.pain_title')}
                    </h2>

                    <div
                        className={`grid md:grid-cols-3 gap-0 border divide-y md:divide-y-0 md:divide-x transition-colors duration-300 ${themeClasses.borderStrong} ${isDark ? 'divide-stone-700' : 'divide-slate-200'} ${themeClasses.bgSecondary}`}>
                        {/* Card 1 */}
                        <div className={`p-8 transition duration-300 group ${themeClasses.cardHover}`}>
                            <Mic className={`w-8 h-8 mb-6 transition ${themeClasses.textLight} ${isDark ? 'group-hover:text-white' : 'group-hover:text-black'}`} />
                            <h3 className="text-lg font-bold mb-3">{t('step1.pain_cards.audio.title')}</h3>
                            <p className={`text-sm leading-relaxed ${themeClasses.textMuted}`}>
                                {t('step1.pain_cards.audio.desc')}
                            </p>
                        </div>

                        {/* Card 2 */}
                        <div className={`p-8 transition duration-300 group ${themeClasses.cardHover}`}>
                            <FileText className={`w-8 h-8 mb-6 transition ${themeClasses.textLight} ${isDark ? 'group-hover:text-white' : 'group-hover:text-black'}`} />
                            <h3 className="text-lg font-bold mb-3">{t('step1.pain_cards.report.title')}</h3>
                            <p className={`text-sm leading-relaxed ${themeClasses.textMuted}`}>
                                {t('step1.pain_cards.report.desc')}
                            </p>
                        </div>

                        {/* Card 3 */}
                        <div className={`p-8 transition duration-300 group ${themeClasses.cardHover}`}>
                            <Database className={`w-8 h-8 mb-6 transition ${themeClasses.textLight} ${isDark ? 'group-hover:text-white' : 'group-hover:text-black'}`} />
                            <h3 className="text-lg font-bold mb-3">{t('step1.pain_cards.drain.title')}</h3>
                            <p className={`text-sm leading-relaxed ${themeClasses.textMuted}`}>
                                {t('step1.pain_cards.drain.desc')}
                            </p>
                        </div>
                    </div>
                </div>
            </section>

            {/* The Solution / Methodology */}
            <section id="solution" className="py-24">
                <div className="max-w-5xl mx-auto px-6">
                    <div className="flex flex-col md:flex-row gap-16">
                        <div className="md:w-1/3">
                            <div className="sticky top-24">
                                <h2 className="text-3xl font-bold mb-4">{t('step1.solution_title')}<br /><span className={themeClasses.textLight}>{t('step1.solution_subtitle')}</span></h2>
                                <p className={`mb-8 ${themeClasses.textMuted}`}>
                                    {t('step1.solution_desc')}
                                </p>
                                <div className={`h-1 w-20 ${isDark ? 'bg-stone-100' : 'bg-black'}`}></div>
                            </div>
                        </div>

                        <div className="md:w-2/3 space-y-12">
                            {/* Module 1 */}
                            <div className="group">
                                <div className="flex items-baseline gap-4 mb-4">
                                    <span className={`text-xs font-mono ${themeClasses.textLight}`}>01</span>
                                    <h3 className="text-xl font-bold">{t('step1.modules.m1.title')}</h3>
                                </div>
                                <div
                                    className={`pl-8 border-l ${themeClasses.borderStrong} ${isDark ? 'group-hover:border-stone-100' : 'group-hover:border-black'} transition-colors duration-500`}>
                                    <p className={`mb-4 ${themeClasses.textMuted}`}>
                                        {t('step1.modules.m1.desc')}
                                    </p>
                                    <div
                                        className={`p-4 rounded-sm border font-mono text-xs whitespace-pre-line ${themeClasses.codeBlock}`}>
                                        {t('step1.modules.m1.code')}
                                    </div>
                                </div>
                            </div>

                            {/* Module 2 */}
                            <div className="group">
                                <div className="flex items-baseline gap-4 mb-4">
                                    <span className={`text-xs font-mono ${themeClasses.textLight}`}>02</span>
                                    <h3 className="text-xl font-bold">{t('step1.modules.m2.title')}</h3>
                                </div>
                                <div
                                    className={`pl-8 border-l ${themeClasses.borderStrong} ${isDark ? 'group-hover:border-stone-100' : 'group-hover:border-black'} transition-colors duration-500`}>
                                    <p className={`mb-4 ${themeClasses.textMuted}`}>
                                        {t('step1.modules.m2.desc')}
                                    </p>
                                    <div
                                        className={`p-4 rounded-sm border font-mono text-xs whitespace-pre-line ${themeClasses.codeBlock}`}>
                                        {t('step1.modules.m2.code')}
                                    </div>
                                </div>
                            </div>

                            {/* Module 3 */}
                            <div className="group">
                                <div className="flex items-baseline gap-4 mb-4">
                                    <span className={`text-xs font-mono ${themeClasses.textLight}`}>03</span>
                                    <h3 className="text-xl font-bold">{t('step1.modules.m3.title')}</h3>
                                </div>
                                <div
                                    className={`pl-8 border-l ${themeClasses.borderStrong} ${isDark ? 'group-hover:border-stone-100' : 'group-hover:border-black'} transition-colors duration-500`}>
                                    <p className={`mb-4 ${themeClasses.textMuted}`}>
                                        {t('step1.modules.m3.desc')}
                                    </p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </section>

            {/* Roadmap Section - Timeline Style */}
            <section id="roadmap" className={`py-20 border-y ${themeClasses.bgSecondary} ${themeClasses.borderStrong}`}>
                <div className="max-w-4xl mx-auto px-6">
                    <h2 className={`text-sm font-bold uppercase tracking-widest mb-12 text-center ${themeClasses.textLight}`}>{t('step1.roadmap_title')}</h2>

                    <div className="relative">
                        <div className={`absolute left-8 top-0 bottom-0 w-px ${isDark ? 'bg-stone-700' : 'bg-slate-300'} md:left-1/2 md:-ml-px`}></div>

                        {/* Step 1 */}
                        <div className="relative mb-12 md:mb-8">
                            <div className="flex flex-col md:flex-row items-center">
                                <div className="flex md:w-1/2 justify-start md:justify-end px-8 md:text-right mb-4 md:mb-0">
                                    <div>
                                        <h4 className="font-bold text-lg">{t('step1.roadmap.phase1.time')}</h4>
                                        <p className={`text-sm ${themeClasses.textLight}`}>{t('step1.roadmap.phase1.title')}</p>
                                    </div>
                                </div>
                                <div
                                    className={`absolute left-8 w-4 h-4 bg-white border-2 rounded-full -translate-x-1/2 md:left-1/2 z-10 ${isDark ? 'border-stone-500 bg-stone-900' : 'border-black'}`}>
                                </div>
                                <div className="md:w-1/2 px-8">
                                    <ul className={`text-sm space-y-1 list-disc pl-4 ${themeClasses.textMuted}`}>
                                        {(t('step1.roadmap.phase1.items', { returnObjects: true }) as string[]).map((item, i) => (
                                            <li key={i}>{item}</li>
                                        ))}
                                    </ul>
                                </div>
                            </div>
                        </div>

                        {/* Step 2 */}
                        <div className="relative mb-12 md:mb-8">
                            <div className="flex flex-col md:flex-row items-center">
                                <div
                                    className="flex md:w-1/2 justify-start md:justify-end px-8 md:text-right mb-4 md:mb-0 md:order-1">
                                    <ul className={`text-sm space-y-1 list-disc pl-4 md:pl-0 md:pr-4 ${themeClasses.textMuted}`} dir="rtl">
                                        {(t('step1.roadmap.phase2.items', { returnObjects: true }) as string[]).map((item, i) => (
                                            <li key={i}>{item}</li>
                                        ))}
                                    </ul>
                                </div>
                                <div
                                    className={`absolute left-8 w-4 h-4 rounded-full -translate-x-1/2 md:left-1/2 z-10 ${isDark ? 'bg-stone-100 shadow-[0_0_0_4px_#292524]' : 'bg-black shadow-[0_0_0_4px_white]'}`}>
                                </div>
                                <div className="md:w-1/2 px-8 md:order-0 md:text-right">
                                    <div>
                                        <h4 className="font-bold text-lg">{t('step1.roadmap.phase2.time')}</h4>
                                        <p className={`text-sm ${themeClasses.textLight}`}>{t('step1.roadmap.phase2.title')}</p>
                                    </div>
                                </div>
                            </div>
                        </div>

                        {/* Step 3 */}
                        <div className="relative">
                            <div className="flex flex-col md:flex-row items-center">
                                <div className="flex md:w-1/2 justify-start md:justify-end px-8 md:text-right mb-4 md:mb-0">
                                    <div>
                                        <h4 className="font-bold text-lg">{t('step1.roadmap.phase3.time')}</h4>
                                        <p className={`text-sm ${themeClasses.textLight}`}>{t('step1.roadmap.phase3.title')}</p>
                                    </div>
                                </div>
                                <div
                                    className={`absolute left-8 w-4 h-4 bg-white border-2 rounded-full -translate-x-1/2 md:left-1/2 z-10 ${isDark ? 'border-stone-500 bg-stone-900' : 'border-black'}`}>
                                </div>
                                <div className="md:w-1/2 px-8">
                                    <ul className={`text-sm space-y-1 list-disc pl-4 ${themeClasses.textMuted}`}>
                                        {(t('step1.roadmap.phase3.items', { returnObjects: true }) as string[]).map((item, i) => (
                                            <li key={i}>{item}</li>
                                        ))}
                                    </ul>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </section>

            {/* About & Contact */}
            <section id="contact" className="py-24">
                <div className="max-w-3xl mx-auto px-6 text-center">
                    <div
                        className={`w-20 h-20 rounded-full mx-auto mb-6 overflow-hidden flex items-center justify-center text-3xl ${isDark ? 'bg-stone-800' : 'bg-slate-100'}`}>
                        👨‍💼
                    </div>
                    <h2 className="text-3xl font-bold mb-2">Bob</h2>
                    <p className={`${themeClasses.textLight} mb-8`}>{t('step1.contact_role')}</p>

                    <div className={`prose mx-auto mb-12 text-left md:text-center ${themeClasses.textMuted} whitespace-pre-line`}>
                        <p>
                            {t('step1.contact_bio')}
                        </p>
                    </div>

                    <div
                        className={`border p-8 md:p-12 rounded-sm text-left ${themeClasses.borderStrong} ${themeClasses.cardBg} ${themeClasses.shadow}`}>
                        <h3 className="font-bold text-lg mb-6 flex items-center gap-2">
                            <MessageSquare className="w-5 h-5" />
                            {t('step1.contact_form_title')}
                        </h3>
                        <form className="space-y-4" onSubmit={handleSubmit}>
                            <div>
                                <label className={`block text-xs font-bold uppercase mb-1 ${themeClasses.textLight}`}>{t('step1.form.name')}</label>
                                <input
                                    type="text"
                                    name="name"
                                    value={formData.name}
                                    onChange={handleInputChange}
                                    disabled={status === 'loading' || status === 'success'}
                                    className={`w-full border-b py-2 focus:outline-none transition bg-transparent ${themeClasses.inputBorder} disabled:opacity-50`}
                                    placeholder={t('step1.form.placeholders.name')}
                                />
                            </div>
                            <div>
                                <label className={`block text-xs font-bold uppercase mb-1 ${themeClasses.textLight}`}>{t('step1.form.contact')}</label>
                                <input
                                    type="email" // Suggest email input
                                    name="contact"
                                    value={formData.contact}
                                    onChange={handleInputChange}
                                    disabled={status === 'loading' || status === 'success'}
                                    className={`w-full border-b py-2 focus:outline-none transition bg-transparent ${themeClasses.inputBorder} disabled:opacity-50`}
                                    placeholder={t('step1.form.placeholders.contact')}
                                />
                            </div>
                            <div>
                                <label className={`block text-xs font-bold uppercase mb-1 ${themeClasses.textLight}`}>{t('step1.form.industry')}</label>
                                <select
                                    name="industry"
                                    value={formData.industry}
                                    onChange={handleInputChange}
                                    disabled={status === 'loading' || status === 'success'}
                                    className={`w-full border-b py-2 focus:outline-none transition bg-transparent ${themeClasses.inputBorder} ${isDark ? 'text-stone-300' : 'text-slate-700'} disabled:opacity-50`}>
                                    <option value="" disabled>{currentLang === 'zh' ? '请选择' : 'Select...'}</option>
                                    {(t('step1.form.options', { returnObjects: true }) as string[]).map((opt, i) => (
                                        <option key={i} value={opt} className="text-black">{opt}</option>
                                    ))}
                                </select>
                            </div>

                            {(message || localValidationError) && (
                                <div className={`text-sm font-medium ${status === 'success' ? 'text-green-500' : 'text-red-500'}`}>
                                    {localValidationError || message}
                                </div>
                            )}

                            <button
                                type="submit"
                                disabled={status === 'loading' || status === 'success'}
                                className={`w-full py-4 mt-8 font-medium transition rounded-sm ${themeClasses.buttonPrimary} disabled:opacity-50 disabled:cursor-not-allowed`}>
                                {status === 'loading' ? (currentLang === 'zh' ? '提交中...' : 'Submitting...') : t('step1.form.btn_submit')}
                            </button>
                        </form>
                    </div>
                </div>
            </section>

            <footer className={`py-12 border-t ${themeClasses.border} ${themeClasses.bgSecondary}`}>
                <div className="max-w-5xl mx-auto px-6 flex justify-between items-center">
                    <button
                        onClick={() => navigate('/')}
                        className={`text-sm font-bold opacity-50 hover:opacity-100 transition ${isDark ? 'text-white' : 'text-black'}`}
                    >
                        {t('step1.nav_home')}
                    </button>

                    <button
                        onClick={() => navigate('/step2')}
                        className={`px-6 py-3 rounded text-sm font-bold flex items-center gap-2 transition ${themeClasses.buttonPrimary}`}
                    >
                        {t('step1.nav_next')}
                    </button>
                </div>
                <p className={`text-center text-xs mt-8 ${themeClasses.textLight}`}>{t('step1.footer')}</p>
            </footer>
        </div>
    );
};

export default Step1;