import { useEffect, useState } from 'react';
import { Link } from 'react-router-dom';
import { apiGet, apiPost } from '../api.js';
import { Markdown } from '../markdown.jsx';
import { SkeletonCards } from '../components/Skeleton.jsx';
import { IconThumbsUp, IconMessage } from '../icons.jsx';
import { useT, useFmt } from '../i18n.jsx';

const ZIEL = { month: 'long', year: 'numeric' };

/** Milestone-Gruppe bestimmen: Fertig / In Arbeit / Geplant */
function groupOf(m) {
    if (m.state === 'closed') return 'done';
    return m.closed > 0 ? 'active' : 'planned';
}

const GROUPS = [
    { id: 'active', tag: 'roadmap.active', empty: 'roadmap.nothingActive' },
    { id: 'planned', tag: 'roadmap.planned', empty: null },
    { id: 'done', tag: 'roadmap.done', empty: null },
];

// Stand eines Wunsches. „offen" braucht kein Schild — das ist der Normalfall.
const WISH_STATUS = {
    offen: 'wish.offen',
    geplant: 'wish.geplant',
    in_arbeit: 'wish.inArbeit',
    umgesetzt: 'wish.umgesetzt',
    abgelehnt: 'wish.abgelehnt',
};
const WISH_SORT = [
    { id: 'top', key: 'roadmap.sortTop' },
    { id: 'bewegung', key: 'roadmap.sortTrend' },
    { id: 'neu', key: 'roadmap.sortNew' },
];
const WISH_FILTER = [
    { id: 'alle', key: 'wish.alle' },
    { id: 'offen', key: 'wish.offen' },
    { id: 'geplant', key: 'wish.geplant' },
    { id: 'in_arbeit', key: 'wish.inArbeit' },
    { id: 'umgesetzt', key: 'wish.umgesetzt' },
    { id: 'abgelehnt', key: 'wish.abgelehnt' },
];

function Milestone({ m }) {
    const { t } = useT();
    const { datum } = useFmt();
    const total = m.open + m.closed;
    const pct = total > 0 ? Math.round((m.closed / total) * 100) : m.state === 'closed' ? 100 : 0;
    return (
        <article className="card milestone">
            <div className="card-meta">
                <span className="milestone-title">{m.title}</span>
                {m.due_on && m.state !== 'closed' && (
                    <span className="card-rel">{t('roadmap.due', datum(m.due_on, ZIEL))}</span>
                )}
            </div>
            {m.description && (
                <div className="card-body">
                    <Markdown text={m.description} />
                </div>
            )}
            <div className="progress">
                <div className="progress-bar" style={{ width: `${pct}%` }} />
            </div>
            <div className="progress-info">
                <span>{pct}%</span>
                {total > 0 && <span>{t('roadmap.tasks', m.closed, total)}</span>}
            </div>
        </article>
    );
}

/** GitHub-Style-Heatmap: 52 Wochen × 7 Tage */
function Heatmap({ days }) {
    const { t } = useT();
    const byDay = new Map(days.map((d) => [d.day, d.n]));
    const max = Math.max(1, ...days.map((d) => d.n));
    const today = new Date();
    // Start: Montag vor ~52 Wochen
    const start = new Date(today.getTime() - 364 * 86400000);
    start.setDate(start.getDate() - ((start.getDay() + 6) % 7));

    const weeks = [];
    for (let w = 0; w < 53; w++) {
        const col = [];
        for (let d = 0; d < 7; d++) {
            const date = new Date(start.getTime() + (w * 7 + d) * 86400000);
            if (date > today) break;
            const key = date.toISOString().slice(0, 10);
            const n = byDay.get(key) ?? 0;
            const level = n === 0 ? 0 : Math.min(4, Math.ceil((n / max) * 4));
            col.push(
                <span
                    key={d}
                    className={`hm-cell hm-${level}`}
                    title={n === 1 ? t('roadmap.commitOn', key) : t('roadmap.commitsOn', key, n)}
                />
            );
        }
        weeks.push(<span className="hm-week" key={w}>{col}</span>);
    }
    const total = days.reduce((sum, d) => sum + d.n, 0);
    return (
        <div className="roadmap-group">
            <h2 className="settings-title">{t('roadmap.activity', total)}</h2>
            <div className="hm-wrap">{weeks}</div>
        </div>
    );
}

export default function Roadmap() {
    const { t } = useT();
    const [data, setData] = useState(null);
    const [wishes, setWishes] = useState([]);
    const [canVote, setCanVote] = useState(false);
    const [idea, setIdea] = useState('');
    const [submitMsg, setSubmitMsg] = useState('');
    const [heatmap, setHeatmap] = useState(null);
    const [error, setError] = useState(false);
    const [filter, setFilter] = useState('alle');
    const [bereich, setBereich] = useState('alle');
    const [bereiche, setBereiche] = useState([]);
    const [neuerBereich, setNeuerBereich] = useState('');
    const [sort, setSort] = useState('top');
    const [aehnliche, setAehnliche] = useState([]);

    useEffect(() => {
        apiGet('/api/roadmap').then(setData).catch(() => setError(true));
        apiGet('/api/heatmap').then((d) => setHeatmap(d.days)).catch(() => {});
        window.scrollTo(0, 0);
    }, []);

    // Sortiert wird auf dem Server — „Bewegung" braucht die Zeitstempel der
    // Stimmen, die hier gar nicht ankommen
    useEffect(() => {
        apiGet(`/api/wishes?sort=${sort}`)
            .then((d) => {
                setWishes(d.wishes);
                setCanVote(d.canVote);
                setBereiche(d.bereiche ?? []);
            })
            .catch(() => {});
    }, [sort]);

    // Während des Tippens nachschlagen, ob es das schon gibt. Kurz warten,
    // damit nicht jeder Tastendruck eine Anfrage auslöst.
    useEffect(() => {
        const text = idea.trim();
        if (text.length < 3) { setAehnliche([]); return undefined; }
        const timer = setTimeout(() => {
            apiGet(`/api/wishes/suche?q=${encodeURIComponent(text)}`)
                .then((d) => setAehnliche(d.treffer ?? []))
                .catch(() => setAehnliche([]));
        }, 350);
        return () => clearTimeout(timer);
    }, [idea]);

    const sichtbareWuensche = wishes
        .filter((w) => filter === 'alle' || (w.status ?? 'offen') === filter)
        .filter((w) => bereich === 'alle' || w.category_id === bereich);

    async function vote(id) {
        try {
            const res = await apiPost(`/api/wishes/${id}/vote`);
            setWishes((old) => old.map((w) => w.id !== id
                ? w
                : { ...w, voted: res.voted, score: w.score + (res.voted ? 1 : -1) }));
            setAehnliche((old) => old.map((w) => (w.id === id ? { ...w, score: w.score + 1 } : w)));
        } catch (e) {
            if (e.status === 403) setSubmitMsg(t('roadmap.voteMembersOnly'));
        }
    }

    async function submitWish() {
        const text = idea.trim();
        if (text.length < 5) { setSubmitMsg(t('roadmap.tooShort')); return; }
        try {
            await apiPost('/api/wishes', {
                idea: text,
                category_id: neuerBereich ? Number(neuerBereich) : null,
            });
            setIdea('');
            setSubmitMsg(t('roadmap.submitted'));
            apiGet(`/api/wishes?sort=${sort}`).then((d) => setWishes(d.wishes)).catch(() => {});
        } catch (e) {
            setSubmitMsg(e.status === 403 ? t('roadmap.submitMembersOnly') : t('roadmap.submitFailed'));
        }
    }

    return (
        <>
            <section className="page-header">
                <div className="page-bg-text">ROADMAP</div>
                <div className="page-header-grid" aria-hidden="true" />
                <div className="page-header-content">
                    <div className="page-tag">{t('roadmap.tag')}</div>
                    <h1 className="page-title">{t('nav.roadmap')}</h1>
                    <p className="page-subtitle">{t('roadmap.subtitle')}</p>
                </div>
            </section>

            <section className="content">
                {error && <p className="notice">{t('roadmap.error')}</p>}
                {!error && !data && <SkeletonCards n={3} />}
                {data?.milestones.length === 0 && (
                    <p className="notice">{t('roadmap.noMilestones')}</p>
                )}

                {heatmap && heatmap.length > 0 && <Heatmap days={heatmap} />}

                {(wishes.length > 0 || canVote) && (
                    <div className="roadmap-group">
                        <h2 className="settings-title">{t('roadmap.wishes')}</h2>

                        <div className="wish-bar">
                            {/* Sortierung: die Rangliste allein zementiert alte
                                Wünsche — „Bewegung" zeigt, wo diese Woche etwas
                                passiert, „Neu" das Frischeste. */}
                            <div className="wish-filter">
                                <span className="wish-filter-label">{t('roadmap.sort')}</span>
                                {WISH_SORT.map(({ id, key }) => (
                                    <button
                                        key={id}
                                        className={`wish-chip${sort === id ? ' aktiv' : ''}`}
                                        onClick={() => setSort(id)}
                                    >
                                        {t(key)}
                                    </button>
                                ))}
                            </div>

                            <div className="wish-filter">
                                <span className="wish-filter-label">{t('roadmap.status')}</span>
                                {WISH_FILTER.map(({ id, key }) => {
                                    const n = id === 'alle'
                                        ? wishes.length
                                        : wishes.filter((w) => (w.status ?? 'offen') === id).length;
                                    if (n === 0 && id !== 'alle') return null;
                                    return (
                                        <button
                                            key={id}
                                            className={`wish-chip${filter === id ? ' aktiv' : ''}`}
                                            onClick={() => setFilter(id)}
                                        >
                                            {t(key)} <span className="wish-chip-n">{n}</span>
                                        </button>
                                    );
                                })}
                            </div>

                            {bereiche.length > 0 && (
                                <div className="wish-filter">
                                    <span className="wish-filter-label">{t('roadmap.area')}</span>
                                    <button
                                        className={`wish-chip${bereich === 'alle' ? ' aktiv' : ''}`}
                                        onClick={() => setBereich('alle')}
                                    >
                                        {t('wish.alle')}
                                    </button>
                                    {bereiche.map((b) => (
                                        <button
                                            key={b.id}
                                            className={`wish-chip${bereich === b.id ? ' aktiv' : ''}`}
                                            onClick={() => setBereich(b.id)}
                                        >
                                            {b.emoji} {b.name}
                                        </button>
                                    ))}
                                </div>
                            )}
                        </div>

                        {sichtbareWuensche.length === 0 && (
                            <p className="notice">{t('roadmap.noneInFilter')}</p>
                        )}

                        {sichtbareWuensche.map((w, i) => {
                            const status = w.status ?? 'offen';
                            return (
                                <div className={`wish-row st-${status}`} key={w.id ?? `${w.created_at}-${i}`}>
                                    {canVote && w.id ? (
                                        <button
                                            className={`wish-vote with-icon${w.voted ? ' voted' : ''}`}
                                            title={w.voted ? t('roadmap.unvote') : t('roadmap.vote')}
                                            onClick={() => vote(w.id)}
                                        >
                                            <IconThumbsUp size={14} /> {w.score}
                                        </button>
                                    ) : (
                                        <span className="wish-score with-icon"><IconThumbsUp size={14} /> {w.score}</span>
                                    )}
                                    <Link className="wish-idea" to={`/wunsch/${w.id}`}>
                                        <span className="wish-schilder">
                                            {status !== 'offen' && (
                                                <span className={`wish-status ${status}`}>{t(WISH_STATUS[status])}</span>
                                            )}
                                            {w.kategorie && (
                                                <span className="wish-area">
                                                    {w.kategorie_emoji} {w.kategorie}
                                                </span>
                                            )}
                                        </span>
                                        {w.idea}
                                        {w.status_grund && (
                                            <span className="wish-grund">{w.status_grund}</span>
                                        )}
                                    </Link>
                                    {/* Geredet wird im Thread unter dem Post — der
                                        Zähler führt direkt dorthin */}
                                    {w.thread_url && (
                                        <a className="wish-komm" href={w.thread_url} target="_blank" rel="noreferrer">
                                            <IconMessage size={13} /> {w.kommentare ?? 0}
                                        </a>
                                    )}
                                    <span className="wish-author">{w.author}</span>
                                </div>
                            );
                        })}

                        {canVote ? (
                            <div className="wish-form-wrap">
                                <div className="wish-form">
                                    {bereiche.length > 0 && (
                                        <select
                                            className="wish-area-select"
                                            value={neuerBereich}
                                            onChange={(e) => setNeuerBereich(e.target.value)}
                                        >
                                            <option value="">{t('roadmap.areaPick')}</option>
                                            {bereiche.map((b) => (
                                                <option key={b.id} value={b.id}>
                                                    {b.emoji} {b.name}
                                                </option>
                                            ))}
                                        </select>
                                    )}
                                    <input
                                        type="text" maxLength={500} placeholder={t('roadmap.ideaPlaceholder')}
                                        value={idea}
                                        onChange={(e) => setIdea(e.target.value)}
                                        onKeyDown={(e) => { if (e.key === 'Enter') submitWish(); }}
                                    />
                                    <button className="btn btn-save" onClick={submitWish}>{t('roadmap.submit')}</button>
                                </div>
                                {/* Beim Tippen zeigen, was es schon gibt — ein Klick
                                    auf einen Treffer ist besser als ein Doppler */}
                                {aehnliche.length > 0 && (
                                    <div className="wish-hits">
                                        <span className="wish-hits-label">{t('roadmap.alreadyThere')}</span>
                                        {aehnliche.map((w) => (
                                            <button
                                                key={w.id}
                                                className="wish-hit"
                                                onClick={() => { setIdea(''); vote(w.id); }}
                                                title={t('roadmap.vote')}
                                            >
                                                <IconThumbsUp size={12} /> {w.score} · {w.idea}
                                            </button>
                                        ))}
                                    </div>
                                )}
                            </div>
                        ) : (
                            <p className="notice" style={{ padding: '.6rem 0 0' }}>
                                {t('roadmap.hint').split('%s')[0]}<code>/wunsch</code>{t('roadmap.hint').split('%s')[1]}
                            </p>
                        )}
                        {submitMsg && <p className="notice" style={{ padding: '.6rem 0 0' }}>{submitMsg}</p>}
                    </div>
                )}

                {GROUPS.map(({ id, tag, empty }) => {
                    const items = (data?.milestones ?? []).filter((m) => groupOf(m) === id);
                    if (items.length === 0 && !empty) return null;
                    return (
                        <div className="roadmap-group" key={id}>
                            <h2 className="settings-title">{t(tag)}</h2>
                            {items.length === 0 && <p className="notice">{t(empty)}</p>}
                            {items.map((m) => (
                                <Milestone m={m} key={m.title} />
                            ))}
                        </div>
                    );
                })}
            </section>
        </>
    );
}