import { Badge, Card, CopyableId, Notice, PageTitle } from '../components/ui'
import {
  easterEggCatalog,
  easterEggKindLabel,
  type EasterEggEntry,
} from '../lib/easterEggCatalog'

function EasterEggCard({ entry }: { entry: EasterEggEntry }) {
  const kindTone =
    entry.kind === 'keyboard' ? 'brand' : entry.kind === 'admin-page' ? 'sky' : 'neutral'

  return (
    <Card className="flex flex-col gap-6">
      <div className="flex flex-wrap items-start justify-between gap-3">
        <div>
          <h2 className="text-lg font-bold text-ink">{entry.title}</h2>
          <p className="mt-2 max-w-prose text-base leading-relaxed text-ink-secondary">{entry.summary}</p>
        </div>
        <Badge tone={kindTone}>{easterEggKindLabel(entry.kind)}</Badge>
      </div>

      {entry.password ? (
        <CopyableId label="密碼（連續輸入）" value={entry.password} />
      ) : (
        <div className="ac-slot px-5 py-5">
          <div className="text-sm font-bold text-ink-secondary">密碼</div>
          <p className="mt-3 text-base text-muted">無 — 透過管理員導覽進入</p>
        </div>
      )}

      <div>
        <h3 className="text-sm font-bold text-ink-secondary">操作步驟</h3>
        <ol className="mt-3 list-decimal space-y-2 pl-5 text-base leading-relaxed text-ink">
          {entry.howTo.map((step) => (
            <li key={step}>{step}</li>
          ))}
        </ol>
      </div>

      {entry.notes ? (
        <p className="rounded-[var(--radius-md)] border border-line bg-surface-muted px-4 py-3 text-sm leading-relaxed text-ink-secondary">
          <span className="font-bold text-ink">備註：</span>
          {entry.notes}
        </p>
      ) : null}
    </Card>
  )
}

export function EasterEggsPage() {
  return (
    <div className="mx-auto max-w-3xl">
      <PageTitle
        title="彩蛋手冊"
        subtitle="管理員專用備忘 — 密碼與功能說明都記在這裡，免得下次忘記。"
      />

      <Notice
        tone="info"
        title="僅管理員可見"
        message="此頁不對一般會員開放。新增或修改彩蛋時，請同步更新 lib/easterEggCatalog.ts。"
      />

      <div className="mt-6 flex flex-col gap-5">
        {easterEggCatalog.map((entry) => (
          <EasterEggCard key={entry.id} entry={entry} />
        ))}
      </div>
    </div>
  )
}