import { useEffect, useMemo, useState } from 'react';
import { Link } from 'react-router-dom';
import { forumApi } from '../../utils/api';
import { timeAgo } from '../../utils/format';
import type { ForumCategory, ForumThread } from '../../types';

// ── Sub-components ─────────────────────────────────────────────────────────────

function CategoryCard({ category, threads }: { category: ForumCategory; threads: ForumThread[] }) {
  const pinned = threads.filter((t) => t.isPinned && t.categoryId === category.id);
  const regular = threads.filter((t) => !t.isPinned && t.categoryId === category.id);
  const categoryThreads = [...pinned, ...regular];

  return (
    <section className="crt-box" style={{ marginBottom: '1.5rem' }}>
      {/* Category header */}
      <div
        style={{
          padding: '1rem 1.5rem',
          borderBottom: '1px solid var(--color-border)',
          display: 'flex',
          alignItems: 'center',
          justifyContent: 'space-between',
          gap: '1rem',
          flexWrap: 'wrap',
        }}
      >
        <div style={{ display: 'flex', alignItems: 'center', gap: '0.75rem' }}>
          <span
            style={{
              fontFamily: 'var(--font-mono)',
              color: 'var(--color-green)',
              fontSize: '0.75rem',
              opacity: 0.7,
            }}
          >
            {category.icon}
          </span>
          <div>
            <h2
              style={{
                fontFamily: 'var(--font-heading)',
                color: 'var(--color-text)',
                fontSize: '1.1rem',
                margin: 0,
              }}
            >
              {category.name}
            </h2>
            <p style={{ color: 'var(--color-text-muted)', fontSize: '0.75rem', margin: 0 }}>
              {category.description}
            </p>
          </div>
        </div>
        <div
          style={{
            fontFamily: 'var(--font-mono)',
            color: 'var(--color-text-muted)',
            fontSize: '0.72rem',
            textAlign: 'right',
          }}
        >
          <span style={{ color: 'var(--color-green)' }}>{category.threadCount}</span> threads
        </div>
      </div>

      {/* Threads */}
      <div>
        {categoryThreads.length === 0 ? (
          <div style={{ padding: '1.5rem', color: 'var(--color-text-muted)', fontSize: '0.8rem', textAlign: 'center' }}>
            No threads yet. Be the first to post.
          </div>
        ) : (
          categoryThreads.map((thread, idx) => (
            <div
              key={thread.id}
              style={{
                padding: '0.85rem 1.5rem',
                borderBottom: idx < categoryThreads.length - 1 ? '1px solid var(--color-border)' : 'none',
                display: 'flex',
                alignItems: 'center',
                justifyContent: 'space-between',
                gap: '1rem',
                flexWrap: 'wrap',
                background: thread.isPinned ? 'rgba(217,119,6,0.05)' : 'transparent',
              }}
            >
              <div style={{ flex: 1, minWidth: '0' }}>
                <div style={{ display: 'flex', alignItems: 'center', gap: '0.5rem', flexWrap: 'wrap', marginBottom: '0.25rem' }}>
                  {thread.isPinned && (
                    <span className="badge badge-progress">Pinned</span>
                  )}
                  {thread.isLocked && (
                    <span className="badge badge-closed">Locked</span>
                  )}
                  <Link
                    to={`/forum/thread/${thread.id}`}
                    style={{
                      fontFamily: 'var(--font-mono)',
                      color: 'var(--color-text)',
                      fontSize: '0.87rem',
                      overflow: 'hidden',
                      textOverflow: 'ellipsis',
                      whiteSpace: 'nowrap',
                    }}
                  >
                    {thread.title}
                  </Link>
                </div>
                <div style={{ color: 'var(--color-text-muted)', fontSize: '0.72rem', fontFamily: 'var(--font-mono)' }}>
                  by <span style={{ color: 'var(--color-text-dim)' }}>{thread.authorName}</span>
                  {' '}&mdash; {timeAgo(thread.createdAt)}
                </div>
              </div>
              <div style={{ textAlign: 'right', fontFamily: 'var(--font-mono)', fontSize: '0.72rem', color: 'var(--color-text-muted)', flexShrink: 0 }}>
                <div style={{ color: 'var(--color-green)' }}>{thread.replyCount}</div>
                <div>replies</div>
              </div>
            </div>
          ))
        )}
      </div>
    </section>
  );
}

// ── Forum Page ─────────────────────────────────────────────────────────────────

export default function ForumPage() {
  const [search, setSearch] = useState('');
  const [categories, setCategories] = useState<ForumCategory[]>([]);
  const [threads, setThreads] = useState<ForumThread[]>([]);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState('');

  useEffect(() => {
    let cancelled = false;
    setLoading(true);

    Promise.all([
      forumApi.getCategories(),
      forumApi.getThreads({ limit: 200 }),
    ])
      .then(([cats, threadRes]) => {
        if (cancelled) return;
        setCategories(cats);
        setThreads(threadRes.data);
      })
      .catch(() => {
        if (cancelled) return;
        setError('Failed to load forum. Please try again.');
      })
      .finally(() => {
        if (!cancelled) setLoading(false);
      });

    return () => { cancelled = true; };
  }, []);

  const filteredCategories = useMemo(() => {
    if (!search.trim()) return categories;
    const q = search.toLowerCase();
    return categories.filter((cat) =>
      cat.name.toLowerCase().includes(q) ||
      threads.some((t) => t.categoryId === cat.id && t.title.toLowerCase().includes(q))
    );
  }, [search, categories, threads]);

  return (
    <div style={{ maxWidth: '960px', margin: '0 auto', padding: '4rem 1.5rem' }}>
      {/* Header */}
      <div style={{ marginBottom: '2.5rem', display: 'flex', alignItems: 'flex-end', justifyContent: 'space-between', flexWrap: 'wrap', gap: '1.5rem' }}>
        <div>
          <div className="section-label">Community</div>
          <h1
            style={{
              fontFamily: 'var(--font-heading)',
              color: 'var(--color-text)',
              fontSize: 'clamp(2rem, 5vw, 3rem)',
              marginTop: '0.5rem',
            }}
          >
            FORUM
          </h1>
          <p style={{ color: 'var(--color-text-muted)', fontSize: '0.8rem', marginTop: '0.5rem', fontFamily: 'var(--font-mono)' }}>
            Read freely. Login to post.
          </p>
        </div>

        {/* Search */}
        <div style={{ display: 'flex', gap: '0.5rem', alignItems: 'center' }}>
          <input
            className="input-terminal"
            type="search"
            placeholder="Search threads..."
            value={search}
            onChange={(e) => setSearch(e.target.value)}
            style={{ width: '220px' }}
            aria-label="Search forum threads"
          />
        </div>
      </div>

      {loading && (
        <div className="crt-box" style={{ padding: '2rem', textAlign: 'center', color: 'var(--color-text-muted)', fontFamily: 'var(--font-mono)' }}>
          Loading forum...
        </div>
      )}

      {error && !loading && (
        <div className="crt-box" style={{ padding: '2rem', textAlign: 'center', color: 'var(--color-red)', fontFamily: 'var(--font-mono)' }}>
          {error}
        </div>
      )}

      {/* Categories */}
      {!loading && !error && (
        filteredCategories.length === 0 ? (
          <div className="crt-box" style={{ padding: '2rem', textAlign: 'center', color: 'var(--color-text-muted)', fontFamily: 'var(--font-mono)' }}>
            {search.trim() ? `No results found for "${search}"` : 'No forum categories available yet.'}
          </div>
        ) : (
          filteredCategories.map((cat) => (
            <CategoryCard key={cat.id} category={cat} threads={threads} />
          ))
        )
      )}
    </div>
  );
}