import React from 'react';
import { Link } from 'react-router-dom';
import './EffectLab.css';

const LAB_ITEMS = [
    {
        id: 'sword-stream',
        path: '/lab/sword-stream',
        title: 'Sword Stream',
        category: '3D · 인터랙티브',
        desc: '1,500개의 검 파티클이 마우스를 따라 흐릅니다. 클릭하면 나선형 궤도로 전환됩니다.',
        tags: ['Three.js', '파티클', '인터랙티브'],
        accent: '#44aadd',
        icon: '⚔️',
        status: 'live',
    },
    {
        id: 'day-calc',
        path: '/lab/day-calc',
        title: '일수 계산기',
        category: '유틸리티 · 날짜',
        desc: '두 날짜 사이의 기간을 일, 주, 월, 연 단위로 계산하고 기념일 날짜를 확인합니다.',
        tags: ['날짜', '계산기', '기념일'],
        accent: '#fbbf24',
        icon: '📅',
        status: 'live',
    },
    {
        id: 'agent-office',
        path: '/agent-office',
        title: 'Agent Office',
        category: 'AI · 자동화',
        desc: 'AI 에이전트들이 사무실에서 자동으로 작업하는 가상 오피스',
        tags: ['Canvas 2D', 'WebSocket', 'AI Agent', 'Telegram'],
        accent: '#8b5cf6',
        icon: '🏢',
        status: 'wip',
    },
];

const STATUS_LABEL = {
    live: { label: 'LIVE', color: '#34d399' },
    wip: { label: 'WIP', color: '#fbbf24' },
    planned: { label: 'PLANNED', color: '#94a3b8' },
};

const LabCard = ({ item }) => {
    const st = STATUS_LABEL[item.status] || STATUS_LABEL.planned;
    return (
        <Link to={item.path} className="lab-card" style={{ '--card-accent': item.accent }}>
            <div className="lab-card__top">
                <span className="lab-card__icon">{item.icon}</span>
                <span className="lab-card__status" style={{ color: st.color, borderColor: `${st.color}40` }}>
                    {st.label}
                </span>
            </div>
            <div className="lab-card__body">
                <p className="lab-card__category">{item.category}</p>
                <h2 className="lab-card__title">{item.title}</h2>
                <p className="lab-card__desc">{item.desc}</p>
            </div>
            <div className="lab-card__footer">
                <div className="lab-card__tags">
                    {item.tags.map((t) => (
                        <span key={t} className="lab-card__tag">{t}</span>
                    ))}
                </div>
                <span className="lab-card__arrow">→</span>
            </div>
        </Link>
    );
};

const EffectLab = () => (
    <div className="lab">
        <header className="lab__header">
            <p className="lab__kicker">STREAM</p>
            <h1>Lab</h1>
            <p className="lab__desc">
                실험적인 UI, 인터랙티브 효과, 유틸리티 도구를 테스트하고 탐구하는 공간입니다.
            </p>
        </header>

        <div className="lab__grid">
            {LAB_ITEMS.map((item) => (
                <LabCard key={item.id} item={item} />
            ))}
        </div>
    </div>
);

export default EffectLab;