import { Link } from '@tanstack/react-router';
import { useLiveQuery } from 'dexie-react-hooks';
import type { Campaign } from '@/lib/schemas';
import { diceRepo } from '@/lib/db/repositories';
import { getSystem } from '@/lib/rules';
import { useCharacters } from '@/features/characters/hooks';
import { useEncounters } from '@/features/combat/hooks';
import { useNotes, useNpcs, useQuests, useCalendar } from './hooks';
import { Page, PageHeader, RequireCampaign } from '@/components/ui/Page';

export function DashboardPage() {
  return <RequireCampaign>{(c) => <Dashboard campaign={c} />}</RequireCampaign>;
}

const LINKS = [
  { to: '/assistant', label: 'Assistant', icon: '🧠' },
  { to: '/characters', label: 'Characters', icon: '🧝' },
  { to: '/combat', label: 'Combat', icon: '⚔' },
  { to: '/notes', label: 'Notes & Wiki', icon: '📜' },
  { to: '/npcs', label: 'NPCs', icon: '🎭' },
  { to: '/quests', label: 'Quests', icon: '🗺' },
  { to: '/maps', label: 'Maps', icon: '🗺️' },
  { to: '/calendar', label: 'Calendar', icon: '📅' },
  { to: '/compendium', label: 'Compendium', icon: '📚' },
  { to: '/homebrew', label: 'Homebrew', icon: '🛠️' },
  { to: '/dice', label: 'Dice', icon: '🎲' },
  { to: '/play', label: 'Player View', icon: '📺' },
] as const;

function Dashboard({ campaign }: { campaign: Campaign }) {
  const characters = useCharacters(campaign.id);
  const encounters = useEncounters(campaign.id);
  const notes = useNotes(campaign.id);
  const npcs = useNpcs(campaign.id);
  const quests = useQuests(campaign.id);
  const calendar = useCalendar(campaign.id);
  const rolls = useLiveQuery(() => diceRepo.recent(campaign.id, 8), [campaign.id], []);

  const sys = getSystem(campaign.system);
  const pcs = characters.filter((c) => c.kind === 'pc');
  const activeQuests = quests.filter((q) => q.status === 'active').length;

  return (
    <Page>
      <PageHeader
        title={campaign.name}
        subtitle={`${sys.label}${calendar ? ` · in-world day ${calendar.currentDay}` : ''}`}
      />

      {campaign.description && <p className="mb-6 max-w-3xl text-sm text-muted">{campaign.description}</p>}

      {/* Quick stats */}
      <div className="mb-6 grid grid-cols-2 gap-3 sm:grid-cols-3 lg:grid-cols-5">
        <Stat label="Characters" value={characters.length} />
        <Stat label="Encounters" value={encounters.length} />
        <Stat label="Active quests" value={activeQuests} />
        <Stat label="NPCs" value={npcs.length} />
        <Stat label="Notes" value={notes.length} />
      </div>

      <div className="grid gap-6 lg:grid-cols-[1fr_320px]">
        {/* Navigation cards */}
        <section>
          <h2 className="mb-2 text-xs font-semibold uppercase tracking-wide text-muted">Jump to</h2>
          <div className="grid grid-cols-2 gap-3 sm:grid-cols-4">
            {LINKS.map((l) => (
              <Link
                key={l.to}
                to={l.to}
                className="flex flex-col items-center gap-1 rounded-lg border border-line bg-panel p-4 text-center transition-colors hover:border-accent/50"
              >
                <span className="text-2xl" aria-hidden>{l.icon}</span>
                <span className="text-sm text-ink">{l.label}</span>
              </Link>
            ))}
          </div>

          {/* Party overview */}
          <h2 className="mb-2 mt-6 text-xs font-semibold uppercase tracking-wide text-muted">Party</h2>
          {pcs.length === 0 ? (
            <p className="text-sm text-muted">No player characters yet.</p>
          ) : (
            <div className="grid gap-2 sm:grid-cols-2">
              {pcs.map((c) => (
                <Link
                  key={c.id}
                  to="/characters/$characterId"
                  params={{ characterId: c.id }}
                  className="flex items-center justify-between rounded-md border border-line bg-panel px-3 py-2 text-sm hover:border-accent/40"
                >
                  <span className="truncate text-ink">{c.name} <span className="text-muted">Lv {c.level}</span></span>
                  <span className="shrink-0 text-muted">
                    HP {c.hp.current}/{c.hp.max} · AC {sys.baseArmorClass({ level: c.level, abilities: c.abilities, armorBonus: c.armorBonus })}
                  </span>
                </Link>
              ))}
            </div>
          )}
        </section>

        {/* Recent rolls */}
        <aside>
          <h2 className="mb-2 text-xs font-semibold uppercase tracking-wide text-muted">Recent rolls</h2>
          {rolls.length === 0 ? (
            <p className="text-sm text-muted">No rolls yet.</p>
          ) : (
            <ul className="space-y-1">
              {rolls.map((r) => (
                <li key={r.id} className="flex items-center justify-between rounded-md border border-line bg-panel px-3 py-1.5 text-sm">
                  <span className="truncate text-muted">{r.label ? `${r.label}: ` : ''}<span className="font-mono">{r.expression}</span></span>
                  <span className="font-display font-semibold text-ink">{r.total}</span>
                </li>
              ))}
            </ul>
          )}
        </aside>
      </div>
    </Page>
  );
}

function Stat({ label, value }: { label: string; value: number }) {
  return (
    <div className="rounded-lg border border-line bg-panel p-4 text-center">
      <div className="font-display text-3xl font-bold text-accent">{value}</div>
      <div className="text-xs uppercase tracking-wide text-muted">{label}</div>
    </div>
  );
}
