'use client';

// Mira 首頁（Profile / KM Hub）
// SDD: polaris/mira/.agents/specs/mira-app/design.md §5.2
// 這頁是 leo 的 KM 首頁，列出所有同層子頁的入口
// 河道 / Wiki 是同層子頁，不是父子關係

import Link from 'next/link';
import './mira.css';

type Entry = {
  href: string;
  emoji: string;
  title: string;
  desc: string;
  status?: 'live' | 'wip' | 'planned';
};

const ENTRIES: Entry[] = [
  {
    href: '/mira/feed',
    emoji: '🌊',
    title: '河道',
    desc: '時間軸式貼文流，所有 source 進來的內容都在這',
    status: 'live',
  },
  {
    href: '/mira/wiki',
    emoji: '📚',
    title: 'Wiki',
    desc: 'leo 的個人觀點累積（Karpathy LLM Wiki 風格）',
    status: 'live',
  },
  {
    href: '/mira/plan',
    emoji: '📋',
    title: '計劃',
    desc: 'Task 列表 + 狀態切換 + workflow 觸發',
    status: 'planned',
  },
  {
    href: '/mira/dissent',
    emoji: '⚔️',
    title: '異見牆',
    desc: 'Triplet 列表（含 ai-idea / 矛盾標記）',
    status: 'planned',
  },
];

export default function MiraHubPage() {
  return (
    <main className="mira-app">
      <div className="mira-content">
        <header style={{ padding: '32px 0 24px' }}>
          <h1 style={{ fontSize: 32, fontWeight: 700, color: '#fff', margin: 0 }}>
            🦔 Mira
          </h1>
          <p style={{ color: '#888', fontSize: 15, marginTop: 6 }}>
            leo 的個人 KM 系統
          </p>
        </header>

        <div style={{ display: 'grid', gap: 12, paddingBottom: 40 }}>
          {ENTRIES.map((e) => (
            <EntryCard key={e.href} entry={e} />
          ))}
        </div>
      </div>
    </main>
  );
}

function EntryCard({ entry }: { entry: Entry }) {
  const isClickable = entry.status === 'live';
  const card = (
    <div
      style={{
        padding: '18px 20px',
        background: '#1a1a1a',
        border: '1px solid #2a2a2a',
        borderRadius: 8,
        opacity: isClickable ? 1 : 0.5,
        cursor: isClickable ? 'pointer' : 'not-allowed',
        transition: 'border-color 0.15s',
      }}
      onMouseEnter={(e) => {
        if (isClickable) e.currentTarget.style.borderColor = '#444';
      }}
      onMouseLeave={(e) => {
        if (isClickable) e.currentTarget.style.borderColor = '#2a2a2a';
      }}
    >
      <div style={{ display: 'flex', alignItems: 'center', gap: 12, marginBottom: 6 }}>
        <span style={{ fontSize: 24 }}>{entry.emoji}</span>
        <span style={{ fontSize: 18, fontWeight: 600, color: '#fff' }}>
          {entry.title}
        </span>
        {entry.status === 'planned' && (
          <span
            style={{
              fontSize: 11,
              padding: '2px 8px',
              background: '#2a2a3a',
              color: '#aab',
              borderRadius: 3,
            }}
          >
            未實作
          </span>
        )}
      </div>
      <div style={{ color: '#888', fontSize: 14, marginLeft: 36 }}>{entry.desc}</div>
    </div>
  );
  return isClickable ? (
    <Link href={entry.href} style={{ textDecoration: 'none' }}>
      {card}
    </Link>
  ) : (
    card
  );
}