'use client';

// Mira 側邊欄（桌機左固定欄 / 手機底部 tab bar）
// SDD: polaris/mira/.agents/specs/mira-app/design.md §5.2 v2.1 + §3.7.4
// 對應 task: 10B0.1 / 10B0.2 / 10B0.4
// 現階段入口手寫；detector framework（#8）上線後改讀 detector view 規格動態生成

import { useState } from 'react';
import Link from 'next/link';
import { usePathname, useRouter } from 'next/navigation';

type NavItem = {
  href: string;
  icon: string;
  label: string;
  status: 'live' | 'planned';
};

// 側邊欄入口 = 各 detector 的 view（§3.7.4）。河道是固定輸入入口，其餘是 detector 產物頁。
const NAV_ITEMS: NavItem[] = [
  { href: '/mira/feed', icon: '🌊', label: '河道', status: 'live' },
  { href: '/mira/chat', icon: '💬', label: '對話', status: 'live' },
  { href: '/mira/wiki', icon: '📚', label: 'Wiki', status: 'live' },
  { href: '/mira/projects', icon: '📋', label: '專案', status: 'live' },
  { href: '/mira/dissent', icon: '⚔️', label: '異見牆', status: 'planned' },
];

function isActive(pathname: string | null, href: string): boolean {
  if (!pathname) return false;
  if (href === '/mira/feed') return pathname === '/mira/feed' || pathname === '/mira';
  return pathname === href || pathname.startsWith(href + '/');
}

export default function MiraSidebar() {
  const pathname = usePathname();
  const router = useRouter();
  const [q, setQ] = useState('');

  const submitSearch = (e: React.FormEvent) => {
    e.preventDefault();
    const query = q.trim();
    if (!query) return;
    router.push(`/mira/search?q=${encodeURIComponent(query)}`);
  };

  return (
    <nav className="mira-sidebar" aria-label="Mira 導覽">
      <Link href="/mira/feed" className="mira-sidebar-logo">
        <span className="mira-sidebar-logo-icon">🦔</span>
        <span className="mira-sidebar-logo-text">Mira</span>
      </Link>
      {/* 桌機：側欄輸入框 */}
      <form className="mira-sidebar-search" onSubmit={submitSearch}>
        <input
          value={q}
          onChange={e => setQ(e.target.value)}
          placeholder="🔍 搜尋 wiki…"
          aria-label="搜尋"
        />
      </form>
      {/* 手機：底部 bar 已滿，搜尋收成一個放大鏡 icon → 去搜尋頁輸入 */}
      <Link
        href="/mira/search"
        className={`mira-sidebar-search-icon${isActive(pathname, '/mira/search') ? ' is-active' : ''}`}
        aria-label="搜尋"
        title="搜尋"
      >
        🔍
      </Link>
      <ul className="mira-sidebar-list">
        {NAV_ITEMS.map(item => {
          const active = isActive(pathname, item.href);
          const planned = item.status === 'planned';
          const className = `mira-sidebar-item${active ? ' is-active' : ''}${planned ? ' is-planned' : ''}`;
          const inner = (
            <>
              <span className="mira-sidebar-icon">{item.icon}</span>
              <span className="mira-sidebar-label">{item.label}</span>
              {planned && <span className="mira-sidebar-badge">即將</span>}
            </>
          );
          return (
            <li key={item.href}>
              {planned ? (
                <span className={className} aria-disabled="true" title="即將開放">
                  {inner}
                </span>
              ) : (
                <Link href={item.href} className={className} aria-current={active ? 'page' : undefined}>
                  {inner}
                </Link>
              )}
            </li>
          );
        })}
      </ul>
    </nav>
  );
}