import React, { useCallback, useEffect, useRef, useState } from 'react';
import { Link } from 'react-router-dom';
import { navLinks } from '../../routes.jsx';
import { getBlogPosts } from '../../data/blog';
import { getTodos } from '../../api';
import { getCurrentTheme } from '../../data/heroConfig';
import myPhoto from '../../assets/myPhoto.jpg';
import { useIsMobile } from '../../hooks/useIsMobile';
import SwipeableView from '../../components/SwipeableView';
import PullToRefresh from '../../components/PullToRefresh';
import './Home.css';

const TODO_COLUMNS = [
    { id: 'todo',        label: '계획',    color: 'var(--neon-purple)' },
    { id: 'in_progress', label: '진행 중', color: '#f59e0b' },
    { id: 'done',        label: '완료',    color: '#34d399' },
];

const Home = () => {
    const posts = getBlogPosts().slice(0, 3);
    const highlights = navLinks.filter((link) => link.id !== 'home');
    const theme = getCurrentTheme();
    const isMobile = useIsMobile();

    const [todosByStatus, setTodosByStatus] = useState({ todo: [], in_progress: [], done: [] });
    const [portfolio, setPortfolio] = useState(null);

    useEffect(() => {
        fetch('/api/profile/public')
            .then(r => r.ok ? r.json() : null)
            .catch(() => null)
            .then(d => setPortfolio(d));
    }, []);

    const loadTodos = useCallback(async () => {
        const data = await getTodos();
        if (!Array.isArray(data)) return;
        setTodosByStatus({
            todo:        data.filter((t) => t.status === 'todo'),
            in_progress: data.filter((t) => t.status === 'in_progress'),
            done:        data.filter((t) => t.status === 'done'),
        });
    }, []);

    useEffect(() => {
        loadTodos().catch(() => { /* 조용히 실패 */ });
    }, [loadTodos]);

    const totalTasks = todosByStatus.todo.length + todosByStatus.in_progress.length + todosByStatus.done.length;
    const doneTasks  = todosByStatus.done.length;
    const inProgress = todosByStatus.in_progress.length;

    return (
        <div className="home">
            <section className="home-hero">
                <div className="home-hero__text">
                    <p className="home-hero__kicker">Personal Archive</p>
                    <h1>기록을 모으고,<br />이야기를 이어붙이는 작은 집.</h1>
                    <p className="home-hero__lead">
                        개발, 여행 스냅, 그리고 생각을 모아두는 공간입니다.
                    </p>
                    <div className="home-hero__actions">
                        <Link className="button primary" to="/blog">
                            블로그 둘러보기
                        </Link>
                        <Link className="button ghost" to="/travel">
                            여행 갤러리 열기
                        </Link>
                    </div>
                </div>
                <div className="home-hero__card">
                    <p className="home-hero__card-eyebrow">이번 달 집중 테마</p>
                    <div className="home-hero__card-body">
                        <h2>{theme.theme}</h2>
                        <p>{theme.desc}</p>
                    </div>
                    <div className="home-hero__stats">
                        <div className="home-hero__stat">
                            <p className="stat-label">전체 태스크</p>
                            <p className="stat-value">
                                {totalTasks}<span className="stat-unit">개</span>
                            </p>
                        </div>
                        <div className="home-hero__stat">
                            <p className="stat-label">진행 중 / 완료</p>
                            <p className="stat-value stat-value--sm">
                                {inProgress}<span className="stat-unit"> / </span>{doneTasks}
                            </p>
                        </div>
                    </div>
                </div>
            </section>

            <section className="home-section">
                <div className="home-section__header">
                    <h2>공간 둘러보기</h2>
                    <p>확장 가능한 구조로 구성해 이후에도 쉽게 페이지를 추가할 수 있습니다.</p>
                </div>
                <div className="home-grid">
                    {highlights.map((item) => (
                        <Link
                            key={item.id}
                            to={item.path}
                            className="home-card"
                            style={{ '--card-accent': item.accent }}
                        >
                            <div
                                className="home-card__icon"
                                style={{ color: item.accent }}
                            >
                                {item.icon}
                            </div>
                            <div className="home-card__body">
                                <p className="home-card__title">{item.label}</p>
                                <p className="home-card__desc">{item.description}</p>
                            </div>
                            <span className="home-card__arrow">→</span>
                        </Link>
                    ))}
                </div>
            </section>

            <section className="home-section">
                <div className="home-section__header">
                    <h2>최근 블로그</h2>
                    <p>마크다운 파일을 추가하면 자동으로 목록에 반영됩니다.</p>
                </div>
                <div className="home-posts">
                    {posts.map((post) => (
                        <Link key={post.slug} to="/blog" className="home-post">
                            <div className="home-post__dot" />
                            <div className="home-post__content">
                                <p className="home-post__title">{post.title}</p>
                                <p className="home-post__excerpt">{post.excerpt}</p>
                            </div>
                            <span className="home-post__meta">{post.date || '작성일 미정'}</span>
                        </Link>
                    ))}
                </div>
            </section>

            {/* ── TODO 보드 ──────────────────────────────────────────── */}
            <section className="home-section">
                <div className="home-section__header">
                    <h2>TODO</h2>
                    <p>계획 · 진행 중 · 완료 태스크를 한눈에 확인합니다.</p>
                </div>
                <PullToRefresh onRefresh={loadTodos}>
                    {isMobile ? (
                        <SwipeableView
                            tabs={[
                                {
                                    key: 'todo',
                                    label: 'TODO',
                                    content: (
                                        <div className="home-todo-col__body">
                                            {(todosByStatus.todo || []).length === 0 ? (
                                                <p className="home-todo-col__empty">태스크가 없습니다.</p>
                                            ) : (todosByStatus.todo || []).map((todo) => (
                                                <div key={todo.id} className="home-todo-card">
                                                    <p className="home-todo-card__title">{todo.title}</p>
                                                    {todo.description && <p className="home-todo-card__desc">{todo.description}</p>}
                                                    <p className="home-todo-card__date">
                                                        {todo.updated_at
                                                            ? new Date(todo.updated_at).toLocaleDateString('ko-KR', { month: 'short', day: 'numeric' })
                                                            : ''}
                                                    </p>
                                                </div>
                                            ))}
                                        </div>
                                    ),
                                },
                                {
                                    key: 'in_progress',
                                    label: '진행중',
                                    content: (
                                        <div className="home-todo-col__body">
                                            {(todosByStatus.in_progress || []).length === 0 ? (
                                                <p className="home-todo-col__empty">태스크가 없습니다.</p>
                                            ) : (todosByStatus.in_progress || []).map((todo) => (
                                                <div key={todo.id} className="home-todo-card">
                                                    <p className="home-todo-card__title">{todo.title}</p>
                                                    {todo.description && <p className="home-todo-card__desc">{todo.description}</p>}
                                                    <p className="home-todo-card__date">
                                                        {todo.updated_at
                                                            ? new Date(todo.updated_at).toLocaleDateString('ko-KR', { month: 'short', day: 'numeric' })
                                                            : ''}
                                                    </p>
                                                </div>
                                            ))}
                                        </div>
                                    ),
                                },
                                {
                                    key: 'done',
                                    label: '완료',
                                    content: (
                                        <div className="home-todo-col__body">
                                            {(todosByStatus.done || []).length === 0 ? (
                                                <p className="home-todo-col__empty">태스크가 없습니다.</p>
                                            ) : (todosByStatus.done || []).map((todo) => (
                                                <div key={todo.id} className="home-todo-card">
                                                    <p className="home-todo-card__title">{todo.title}</p>
                                                    {todo.description && <p className="home-todo-card__desc">{todo.description}</p>}
                                                    <p className="home-todo-card__date">
                                                        {todo.updated_at
                                                            ? new Date(todo.updated_at).toLocaleDateString('ko-KR', { month: 'short', day: 'numeric' })
                                                            : ''}
                                                    </p>
                                                </div>
                                            ))}
                                        </div>
                                    ),
                                },
                            ]}
                        />
                    ) : (
                        <TodoBoard todosByStatus={todosByStatus} />
                    )}
                </PullToRefresh>
            </section>

            <section className="home-section">
                <div className="home-section__header">
                    <h2>Profile</h2>
                    <p>페이지 주인 소개 영역입니다.</p>
                </div>
                <div className="home-profile">
                    <div className="home-profile__card">
                        <div className="home-profile__identity">
                            <img
                                className="home-profile__avatar"
                                src={portfolio?.profile?.photo_url || myPhoto}
                                alt="Profile"
                            />
                            <div>
                                <p className="home-profile__role">{portfolio?.profile?.role || 'Server Developer'}</p>
                                <p className="home-profile__name">{portfolio?.profile?.name || '박 재 오'}</p>
                            </div>
                        </div>
                        <p className="home-profile__bio">
                            {portfolio?.profile?.bio || '주변 동료와 함께 소통하며 성장하는걸 좋아합니다.'}
                        </p>
                        <div className="home-profile__tags">
                            {(portfolio?.skills || []).slice(0, 8).map((s) => (
                                <span key={s.id || s.name}>{s.name}</span>
                            ))}
                            {!portfolio && ['C++', 'Git', 'AWS', 'Jira', 'MySQL', 'Docker', 'Kubernetes', 'Linux'].map((tag) => (
                                <span key={tag}>{tag}</span>
                            ))}
                        </div>
                        <div className="home-profile__actions">
                            <Link className="button ghost" to="/portfolio">
                                포트폴리오 보기
                            </Link>
                            <a className="button primary" href={`mailto:${portfolio?.profile?.email || 'bgg8988@gmail.com'}`}>
                                연락하기
                            </a>
                        </div>
                    </div>
                </div>
            </section>
        </div>
    );
};

/* ── TodoBoard ──────────────────────────────────────────────────────── */

const TodoBoard = ({ todosByStatus }) => {
    const boardRef = useRef(null);
    const [canScrollLeft,  setCanScrollLeft]  = useState(false);
    const [canScrollRight, setCanScrollRight] = useState(false);

    const checkScroll = () => {
        const el = boardRef.current;
        if (!el) return;
        setCanScrollLeft(el.scrollLeft > 4);
        setCanScrollRight(el.scrollLeft + el.clientWidth < el.scrollWidth - 4);
    };

    useEffect(() => {
        checkScroll();
        const el = boardRef.current;
        if (!el) return;
        el.addEventListener('scroll', checkScroll, { passive: true });
        const ro = new ResizeObserver(checkScroll);
        ro.observe(el);
        return () => { el.removeEventListener('scroll', checkScroll); ro.disconnect(); };
    }, [todosByStatus]);

    const scroll = (dir) => {
        const el = boardRef.current;
        if (!el) return;
        el.scrollBy({ left: dir * 280, behavior: 'smooth' });
    };

    const isEmpty = TODO_COLUMNS.every((col) => todosByStatus[col.id].length === 0);

    return (
        <div className="home-todo-wrapper">
            {canScrollLeft && (
                <button
                    className="home-todo-nav home-todo-nav--left"
                    onClick={() => scroll(-1)}
                    aria-label="왼쪽으로"
                >‹</button>
            )}
            {canScrollRight && (
                <button
                    className="home-todo-nav home-todo-nav--right"
                    onClick={() => scroll(1)}
                    aria-label="오른쪽으로"
                >›</button>
            )}

            <div className="home-todo-board" ref={boardRef}>
                {TODO_COLUMNS.map((col) => {
                    const items = todosByStatus[col.id] ?? [];
                    return (
                        <div key={col.id} className="home-todo-col">
                            <div className="home-todo-col__head">
                                <span
                                    className="home-todo-col__dot"
                                    style={{ background: col.color, boxShadow: `0 0 6px ${col.color}` }}
                                />
                                <span className="home-todo-col__label">{col.label}</span>
                                <span className="home-todo-col__count">{items.length}</span>
                            </div>
                            <div className="home-todo-col__body">
                                {items.length === 0 ? (
                                    <p className="home-todo-col__empty">태스크가 없습니다.</p>
                                ) : (
                                    items.map((todo) => (
                                        <div key={todo.id} className="home-todo-card">
                                            <p className="home-todo-card__title">{todo.title}</p>
                                            {todo.description && (
                                                <p className="home-todo-card__desc">{todo.description}</p>
                                            )}
                                            <p className="home-todo-card__date">
                                                {todo.updated_at
                                                    ? new Date(todo.updated_at).toLocaleDateString('ko-KR', { month: 'short', day: 'numeric' })
                                                    : ''}
                                            </p>
                                        </div>
                                    ))
                                )}
                            </div>
                        </div>
                    );
                })}
            </div>

            <div className="home-todo-footer">
                <Link to="/todo" className="home-todo-footer__link">
                    Todo 보드 열기 →
                </Link>
            </div>
        </div>
    );
};

export default Home;