'use client';

import { useEffect, useState } from 'react';

interface WorldArtifact {
  id: string;
  title: string;
  node: string;
  type: 'world' | 'lore' | 'code';
  timestamp: string;
  link: string;
}

const TYPE_COLORS: Record<string, string> = {
  world: '#2979FF',
  lore: '#9C27B0',
  code: '#FF1D6C',
};

const NODE_EMOJI: Record<string, string> = {
  aria64: '🔴',
  alice: '🔵',
};

export default function WorldsPage() {
  const [worlds, setWorlds] = useState<WorldArtifact[]>([]);
  const [total, setTotal] = useState(0);
  const [loading, setLoading] = useState(true);
  const [filter, setFilter] = useState<string>('all');

  useEffect(() => {
    async function load() {
      try {
        const res = await fetch('/api/worlds?limit=60');
        const data = await res.json();
        setWorlds(data.worlds || []);
        setTotal(data.total || 0);
      } finally {
        setLoading(false);
      }
    }
    load();
    const interval = setInterval(load, 60000); // refresh every 60s
    return () => clearInterval(interval);
  }, []);

  const filtered = filter === 'all' ? worlds : worlds.filter(w => w.type === filter || w.node === filter);

  return (
    <div className="p-6 max-w-5xl mx-auto">
      <div className="mb-6 flex items-center justify-between">
        <div>
          <h1 className="text-2xl font-bold text-white">🌍 World Artifacts</h1>
          <p className="text-gray-400 text-sm mt-1">
            {total} artifacts generated by the Pi fleet · auto-refreshes every 60s
          </p>
        </div>
        <a
          href="https://worlds.blackroad.io/rss"
          target="_blank"
          rel="noreferrer"
          className="text-xs px-3 py-1 rounded border border-gray-600 text-gray-400 hover:text-white hover:border-gray-400 transition-colors"
        >
          RSS Feed ↗
        </a>
      </div>

      {/* Filter pills */}
      <div className="flex gap-2 mb-4 flex-wrap">
        {['all', 'world', 'lore', 'code', 'aria64', 'alice'].map(f => (
          <button
            key={f}
            onClick={() => setFilter(f)}
            className={`px-3 py-1 rounded-full text-xs font-medium transition-colors ${
              filter === f
                ? 'bg-white text-black'
                : 'bg-gray-800 text-gray-400 hover:bg-gray-700 hover:text-white'
            }`}
          >
            {f === 'all' ? 'All' : f}
          </button>
        ))}
      </div>

      {loading ? (
        <div className="text-gray-500 text-sm">Loading worlds…</div>
      ) : (
        <div className="grid gap-2">
          {filtered.map(w => (
            <a
              key={w.id}
              href={w.link}
              target="_blank"
              rel="noreferrer"
              className="flex items-center gap-3 p-3 rounded-lg bg-gray-900 border border-gray-800 hover:border-gray-600 transition-colors group"
            >
              <span
                className="w-2 h-2 rounded-full flex-shrink-0"
                style={{ backgroundColor: TYPE_COLORS[w.type] || '#666' }}
              />
              <span className="text-white text-sm font-medium flex-1 group-hover:text-blue-300 transition-colors">
                {w.title}
              </span>
              <span className="text-xs text-gray-500">
                {NODE_EMOJI[w.node] || '⚪'} {w.node}
              </span>
              <span
                className="text-xs px-2 py-0.5 rounded"
                style={{
                  backgroundColor: (TYPE_COLORS[w.type] || '#666') + '22',
                  color: TYPE_COLORS[w.type] || '#aaa',
                }}
              >
                {w.type}
              </span>
              <span className="text-xs text-gray-600 font-mono">
                {new Date(w.timestamp).toLocaleTimeString()}
              </span>
            </a>
          ))}
        </div>
      )}

      {!loading && filtered.length === 0 && (
        <div className="text-gray-500 text-sm text-center py-12">No artifacts match this filter.</div>
      )}
    </div>
  );
}