import React, { useState, useEffect } from 'react';
import { Card, Divider, Button, Switch, Collapse, Typewriter } from '../src';
import { useIsMobile } from './tools';

// ============================================
// Syntax highlighting
// ============================================
const HL_TOKENS: { pattern: RegExp; style: React.CSSProperties }[] = [
    {
        pattern: /(\/\/.*$|\/\*[\s\S]*?\*\/)/gm,
        style: { color: '#6b5e50', fontStyle: 'italic', fontWeight: 400 },
    },
    {
        pattern: /("(?:[^"\\]|\\.)*"|'(?:[^'\\]|\\.)*'|`(?:[^`\\]|\\.)*`)/g,
        style: { color: '#a8d4a0' },
    },
    { pattern: /(<\/?[\w.]+|\/?>)/g, style: { color: '#f0a870' } },
    {
        pattern:
            /\b(import|from|const|let|var|function|return|export|default|true|false|null|undefined)\b/g,
        style: { color: '#d4a0e0' },
    },
    { pattern: /\b(npm|yarn|pnpm)\b/g, style: { color: '#f0a870' } },
    {
        pattern: /(install|uninstall|run|add|remove)\b/g,
        style: { color: '#a8d4a0' },
    },
    { pattern: /(\{|\})/g, style: { color: '#d4b896' } },
    { pattern: /(=>)/g, style: { color: '#d4a0e0' } },
    { pattern: /(--[\w-]+)(?=\s*:)/g, style: { color: '#e8c87a' } },
    { pattern: /(:root)/g, style: { color: '#f0a870' } },
    { pattern: /(#[0-9a-fA-F]{3,8})\b/g, style: { color: '#8ab8e0' } },
];

const highlightCode = (code: string): React.ReactNode[] => {
    const parts: React.ReactNode[] = [];
    const lines = code.split('\n');
    lines.forEach((line, li) => {
        type Seg = { start: number; end: number; style: React.CSSProperties };
        const segs: Seg[] = [];
        for (const t of HL_TOKENS) {
            const re = new RegExp(t.pattern.source, t.pattern.flags);
            let m: RegExpExecArray | null;
            while ((m = re.exec(line)) !== null) {
                const s =
                    m.index + (m[0] !== m[1] && m[1] ? m[0].indexOf(m[1]) : 0);
                const text = m[1] || m[0];
                segs.push({ start: s, end: s + text.length, style: t.style });
            }
        }
        segs.sort((a, b) => a.start - b.start);
        const merged: Seg[] = [];
        for (const seg of segs) {
            if (
                merged.length === 0 ||
                seg.start >= merged[merged.length - 1].end
            )
                merged.push(seg);
        }
        let idx = 0;
        for (const seg of merged) {
            if (seg.start > idx) parts.push(line.slice(idx, seg.start));
            parts.push(
                <span key={`${li}-${seg.start}`} style={seg.style}>
                    {line.slice(seg.start, seg.end)}
                </span>
            );
            idx = seg.end;
        }
        if (idx < line.length) parts.push(line.slice(idx));
        if (li < lines.length - 1) parts.push('\n');
    });
    return parts;
};

const CodeBlock: React.FC<{ code: string }> = ({ code }) => (
    <pre style={S.codeBox}>{highlightCode(code)}</pre>
);

const FeatureCard: React.FC<{ feature: typeof features[0] }> = ({ feature }) => {
    const [hovered, setHovered] = useState(false);
    return (
        <Card
            style={{
                ...S.featureCard,
                transform: hovered ? 'translateY(-4px)' : 'none',
                boxShadow: hovered
                    ? '0 8px 24px rgba(114, 93, 66, 0.15)'
                    : 'none',
                transition: 'all 0.3s ease',
            }}
            onMouseEnter={() => setHovered(true)}
            onMouseLeave={() => setHovered(false)}
        >
            <img
                src={
                    new URL(
                        `./img/nook-phone/${feature.icon}`,
                        import.meta.url
                    ).href
                }
                style={{
                    width: 42,
                    height: 42,
                    transform: hovered
                        ? 'scale(1.1) rotate(-4deg)'
                        : 'scale(1) rotate(0deg)',
                    transition: 'transform 0.3s ease',
                    animation: hovered ? 'iconBounce 0.4s ease forwards' : 'none',
                }}
                alt={feature.title}
            />
            <style>
                {`
                    @keyframes iconBounce {
                        0% { transform: scale(1) rotate(0deg); }
                        50% { transform: scale(1.2) rotate(-5deg); }
                        100% { transform: scale(1.1) rotate(-4deg); }
                    }
                `}
            </style>
            <div style={S.featureTitle}>{feature.title}</div>
            <div style={S.featureDesc}>{feature.desc}</div>
        </Card>
    );
};

// ============================================
// Styles
// ============================================
const S = {
    page: {
        width: '100%',
        minHeight: '100vh',
        overflowY: 'auto',
        overflowX: 'hidden',
    } as React.CSSProperties,

    // Hero
    hero: {
        display: 'flex',
        flexDirection: 'column',
        alignItems: 'center',
        justifyContent: 'center',
        minHeight: '100vh',
        padding: '60px 40px 40px',
        position: 'relative',
    } as React.CSSProperties,
    heroContent: {
        display: 'grid',
        gridTemplateColumns: '1fr 1fr',
        gap: 150,
        alignItems: 'center',
        maxWidth: 880,
        width: '100%',
    } as React.CSSProperties,
    heroContentMobile: {
        display: 'grid',
        gridTemplateColumns: '1fr',
        gap: 32,
        alignItems: 'center',
        maxWidth: 880,
        width: '100%',
    } as React.CSSProperties,
    heroText: {
        textAlign: 'left' as const,
    } as React.CSSProperties,
    heroLogo: {
        fontSize: 72,
        lineHeight: 1,
        marginBottom: 16,
        display: 'flex',
        justifyContent: 'center',
        alignItems: 'center',
    } as React.CSSProperties,
    heroTitle: {
        fontFamily: "Nunito, 'Zen Maru Gothic', -apple-system, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', sans-serif",
        fontSize: 55,
        fontWeight: 800,
        lineHeight: 1.1,
        color: '#FFF9E6',
        textShadow: '0px 4px 1px rgba(0, 0, 0, 0.4)',
        margin: '0 0 12px',
    } as React.CSSProperties,
    heroVersion: {
        display: 'inline-block',
        fontSize: 12,
        fontWeight: 600,
        padding: '2px 10px',
        borderRadius: 10,
        background: '#e6f9f6',
        color: '#19c8b9',
        marginLeft: 8,
        verticalAlign: 'middle',
        textShadow: 'none',
    } as React.CSSProperties,
    heroSubtitle: {
        fontSize: 17,
        color: '#7c5734',
        lineHeight: 1.7,
        margin: '0 0 28px',
        maxWidth: 520,
    } as React.CSSProperties,
    heroActions: {
        display: 'flex',
        gap: 16,
        alignItems: 'center',
    } as React.CSSProperties,

    // Sections
    section: {
        padding: '48px 40px',
        maxWidth: 960,
        margin: '0 auto',
    } as React.CSSProperties,
    sectionTitle: {
        fontFamily: "Nunito, 'Zen Maru Gothic', -apple-system, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', sans-serif",
        fontSize: 24,
        fontWeight: 700,
        color: '#725d42',
        margin: '0 0 8px',
        textAlign: 'center' as const,
    } as React.CSSProperties,
    sectionDesc: {
        fontSize: 14,
        color: '#7c5734',
        textAlign: 'center' as const,
        marginBottom: 32,
    } as React.CSSProperties,

    // Features
    features: {
        display: 'grid',
        gridTemplateColumns: 'repeat(auto-fit, minmax(200px, 1fr))',
        gap: 16,
    } as React.CSSProperties,
    featureCard: {
        padding: '24px 20px',
        textAlign: 'center' as const,
    } as React.CSSProperties,
    featureIcon: { fontSize: 32, marginBottom: 12 } as React.CSSProperties,
    featureTitle: {
        fontSize: 15,
        fontWeight: 700,
        color: '#725d42',
        marginBottom: 6,
    } as React.CSSProperties,
    featureDesc: {
        fontSize: 13,
        color: '#7c5734',
        lineHeight: 1.6,
        display: '-webkit-box' as const,
        WebkitLineClamp: 3,
        WebkitBoxOrient: 'vertical' as const,
        overflow: 'hidden',
        textOverflow: 'ellipsis' as const,
    } as React.CSSProperties,

    // Component grid
    compGrid: {
        display: 'grid',
        gridTemplateColumns: 'repeat(auto-fit, minmax(200px, 1fr))',
        gap: 12,
    } as React.CSSProperties,
    compCard: {
        padding: '16px 20px',
        cursor: 'pointer',
    } as React.CSSProperties,
    compName: {
        fontSize: 15,
        fontWeight: 700,
        color: '#725d42',
        marginBottom: 4,
    } as React.CSSProperties,
    compDesc: {
        fontSize: 12,
        color: '#7c5734',
        lineHeight: 1.5,
    } as React.CSSProperties,

    // Code block
    codeBox: {
        maxWidth: 600,
        margin: '0 auto',
        padding: '20px 28px',
        background: '#2b2118',
        border: '1px solid #3d3028',
        borderRadius: 20,
        fontFamily: "'SF Mono', 'Fira Code', Consolas, monospace",
        fontSize: 13,
        fontWeight: 600,
        color: '#e8d5bc',
        textAlign: 'left' as const,
        lineHeight: 1.8,
        whiteSpace: 'pre' as const,
        overflow: 'auto' as const,
        tabSize: 4,
    } as React.CSSProperties,

    // Footer
    footer: {
        padding: '32px 40px',
        textAlign: 'center' as const,
        fontSize: 12,
        color: '#7c5734',
        marginTop: 32,
    } as React.CSSProperties,
    footerLinks: {
        display: 'flex',
        justifyContent: 'center',
        gap: 20,
        marginBottom: 12,
    } as React.CSSProperties,
    footerLink: {
        fontSize: 13,
        color: '#7c5734',
        cursor: 'pointer',
    } as React.CSSProperties,
};

// ============================================
// Data
// ============================================
const features = [
    {
        icon: 'nook1.svg',
        title: 'Animal风格',
        desc: 'SVG 有机形状裁切，3D 按压按钮，温暖质朴的自然 UI 质感',
    },
    {
        icon: 'Property-Shopping.svg',
        title: '18 个组件',
        desc: 'Button / Input / Switch / Modal / Typewriter / Card / Collapse / Cursor / Divider / Time / Phone / Footer / Icon / Checkbox / Select / Tabs / CodeBlock / Loading 等',
    },
    {
        icon: 'Property-Camera.svg',
        title: '主题定制',
        desc: '40+ CSS 自定义属性，运行时换肤无需重新构建',
    },
    {
        icon: 'Property-Recipes.svg',
        title: '开箱即用',
        desc: 'ESM + CJS 双格式输出，TypeScript 类型声明完整',
    },
];

const components = [
    {
        key: 'button',
        name: 'Button',
        desc: '5 种类型、3 种尺寸、加载/危险/幽灵模式',
    },
    { key: 'input', name: 'Input', desc: '前后缀、一键清空、校验状态' },
    {
        key: 'switch',
        name: 'Switch',
        desc: '受控/非受控、自定义文案、加载状态',
    },
    { key: 'checkbox', name: 'Checkbox', desc: '多选框组件，支持水平/垂直排列' },
    {
        key: 'select',
        name: 'Select',
        desc: '下拉选择器，支持搜索和禁用',
    },
    { key: 'tabs', name: 'Tabs', desc: '标签页组件，支持受控/非受控模式' },
    { key: 'modal', name: 'Modal', desc: 'SVG 有机形状弹窗、ESC 关闭' },
    {
        key: 'typewriter',
        name: 'Typewriter',
        desc: '逐字打字机效果，支持多行与富内容',
    },
    { key: 'card', name: 'Card', desc: '默认/标题两种卡片风格' },
    { key: 'collapse', name: 'Collapse', desc: 'FAQ 折叠面板、平滑展开动画' },
    { key: 'cursor', name: 'Cursor', desc: '自定义手指光标，支持多种尺寸' },
    { key: 'divider-comp', name: 'Divider', desc: '装饰性水平分割线' },
    { key: 'icon', name: 'Icon', desc: 'SVG 图标库' },
    { key: 'footer', name: 'Footer', desc: '页脚组件' },
    { key: 'time', name: 'Time', desc: '可爱风格时间显示' },
    { key: 'phone', name: 'Phone', desc: 'Phone 模拟器' },
    { key: 'codeblock', name: 'CodeBlock', desc: '代码语法高亮组件' },
    { key: 'loading', name: 'Loading', desc: '动森风格小岛加载动画' },
];

// ============================================
// HomePage
// ============================================
interface HomePageProps {
    onNavigate?: (path: string) => void;
}

const HomePage: React.FC<HomePageProps> = ({ onNavigate }) => {
    const isMobile = useIsMobile();
    const [showScrollHint, setShowScrollHint] = useState(true);
    const pageRef = React.useRef<HTMLDivElement>(null);

    const handleScroll = () => {
        if (pageRef.current) {
            if (pageRef.current.scrollTop > 70) {
                setShowScrollHint(false);
            } else {
                setShowScrollHint(true);
            }
        }
    };

    return (
    <div ref={pageRef} style={{ ...S.page, overflow: 'auto' }} onScroll={handleScroll}>
        {/* Hero */}
        <div style={{ ...S.hero }}>
            <div style={isMobile ? S.heroContentMobile : S.heroContent}>
                {isMobile && (
                    <div style={{ textAlign: 'center' }}>
                        <img
                            src={
                                new URL('./img/animal_icon.png', import.meta.url).href
                            }
                            style={{ width: 180, height: 112 }}
                            alt="logo"
                            decoding="async"
                        />
                    </div>
                )}
                <div style={isMobile ? { textAlign: 'center' as const } : S.heroText}>
                    <h1 style={{ ...S.heroTitle, fontSize: isMobile ? 37 : 60 }}>
                        {isMobile ? 'Animal Island UI' : <>Animal <br /> Island UI</>}
                        <span style={S.heroVersion}>v0.8.1</span>
                    </h1>
                    <Typewriter speed={60}>
                        <p style={{ ...S.heroSubtitle, fontSize: isMobile ? 14 : 17 }}>
                            Animal风格的 React 组件库，基于 TypeScript + Vite 构建，让 Web 应用充满温暖质感
                        </p>
                    </Typewriter>
                    <div style={{ ...S.heroActions, justifyContent: isMobile ? 'center' : 'flex-start' }}>
                        <Button
                            type="primary"
                            size="large"
                            onClick={() => onNavigate?.('/button')}
                        >
                            开始使用 →
                        </Button>
                    </div>
                </div>
                {!isMobile && (
                    <div style={{ textAlign: 'center' }}>
                        <img
                            src={
                                new URL('./img/animal_icon.png', import.meta.url).href
                            }
                            style={{ width: 320, height: 200 }}
                            alt="logo"
                            decoding="async"
                        />
                    </div>
                )}
            </div>
        </div>

        <div style={{
            position: 'absolute',
            bottom: 40,
            left: '50%',
            transform: 'translateX(-50%)',
            display: 'flex',
            flexDirection: 'column',
            alignItems: 'center',
            gap: 4,
            cursor: 'pointer',
            animation: showScrollHint ? 'bounce 2s ease-in-out infinite' : 'none',
            opacity: showScrollHint ? 1 : 0,
            transition: 'opacity 0.3s ease',
            pointerEvents: showScrollHint ? 'auto' : 'none'
        }}>
            <span style={{ color: '#FFF9E6', fontSize: 12, textShadow: '0 1px 2px rgba(0,0,0,0.3)' }}>向下滑动</span>
            <svg width="16" height="16" viewBox="0 0 24 24" fill="none">
                <path d="M12 5v14M5 12l7 7 7-7" stroke="#FFF9E6" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
            </svg>
        </div>
        <style>{`
            @keyframes bounce {
                0%, 100% { transform: translateX(-50%) translateY(0); opacity: 1; }
                50% { transform: translateX(-50%) translateY(-8px); opacity: 0.7; }
            }
        `}</style>

        {/* Features */}
        <div style={{ ...S.section, padding: isMobile ? '32px 16px' : '48px 40px' }}>
            <div style={S.sectionTitle}>特性</div>
            <div style={S.sectionDesc}>为什么选择 animal-island-ui</div>
            <div style={S.features}>
                {features.map((f) => (
                    <FeatureCard key={f.title} feature={f} />
                ))}
            </div>
        </div>

        <Divider style={{ width: isMobile ? '90%' : 800, margin: '0 auto' }} />

        {/* Components */}
        <div style={{ ...S.section, padding: isMobile ? '32px 16px' : '48px 40px' }}>
            <div style={S.sectionTitle}>组件一览</div>
            <div style={S.sectionDesc}>点击卡片查看详细文档和在线演示</div>
            <div style={S.compGrid}>
                {components.map((c) => (
                    <Card
                        key={c.key}
                        style={S.compCard}
                        onClick={() => onNavigate?.(`/${c.key}`)}
                    >
                        <div style={S.compName}>{c.name}</div>
                        <div style={S.compDesc}>{c.desc}</div>
                    </Card>
                ))}
            </div>
        </div>

        <Divider style={{ width: isMobile ? '90%' : 800, margin: '0 auto' }} />

        {/* Install */}
        <div style={{ ...S.section, padding: isMobile ? '32px 16px' : '48px 40px' }}>
            <div style={S.sectionTitle}>安装</div>
            <div style={S.sectionDesc}>一行命令即可安装</div>
            <CodeBlock
                code={`// 使用 npm 安装\nnpm install animal-island-ui`}
            />
        </div>

        <Divider style={{ width: isMobile ? '90%' : 800, margin: '0 auto' }} />

        {/* Quick Start */}
        <div style={{ ...S.section, padding: isMobile ? '32px 16px' : '48px 40px' }}>
            <div style={S.sectionTitle}>快速上手</div>
            <div style={S.sectionDesc}>引入组件即可使用，样式自动加载</div>
            <CodeBlock
                code={`// 1. 引入组件\nimport { Button, Modal, Switch } from 'animal-island-ui';\nimport 'animal-island-ui/style';\n\nfunction App() {\n    return <Button>开始</Button>;\n}`}
            />
        </div>

        <Divider style={{ width: isMobile ? '90%' : 800, margin: '0 auto' }} />

        {/* Theme */}
        <div style={{ ...S.section, padding: isMobile ? '32px 16px' : '48px 40px' }}>
            <div style={S.sectionTitle}>主题定制</div>
            <div style={S.sectionDesc}>
                通过覆盖 CSS 自定义属性实现运行时换肤，无需重新构建
            </div>
            <CodeBlock
                code={`/* 覆盖主题变量 */\n:root {\n    --animal-primary-color: #19c8b9;\n    --animal-text-color: #827157;\n    --animal-font-family: 'Noto Sans SC', sans-serif;\n    --animal-border-radius-base: 18px;\n    /* ... 40+ 设计令牌 */\n}`}
            />
        </div>

        {/* Footer */}
        <div style={{ ...S.footer, padding: isMobile ? '24px 16px' : '32px 40px' }}>
            <div style={S.footerLinks}>
                <span
                    style={S.footerLink}
                    onClick={() => onNavigate?.('/button')}
                >
                    组件文档
                </span>
                <span
                    style={S.footerLink}
                    onClick={() =>
                        window.open(
                            'https://github.com/guokaigdg/animal-island-ui',
                            '_blank'
                        )
                    }
                >
                    GitHub
                </span>
            </div>
            <div>MIT License · React + TypeScript + Vite</div>
        </div>
    </div>
);
}

export default HomePage;