import { useMemo, useState } from 'react';
import { Link } from 'react-router-dom';
import { useKanbanBoard } from '../../components/kanban/useKanbanBoard';
import { KanbanCard } from '../../components/kanban/KanbanCard';
import { useOrchestrator } from '../../components/kanban/useOrchestrator';
import { useCustomPages } from '../../lib/customPagesStore';
import type { Card, Column } from '../../lib/kanbanApi';

const COLUMNS: { key: Column; title: string; color: string; bgColor: string }[] = [
  { key: 'done', title: 'DONE', color: 'var(--green)', bgColor: 'rgba(34,197,94,0.05)' },
  { key: 'in-progress', title: 'IN PROGRESS', color: 'var(--accent)', bgColor: 'rgba(240,160,48,0.05)' },
  { key: 'todo', title: 'TODO', color: 'var(--red)', bgColor: 'rgba(239,68,68,0.05)' },
  { key: 'backlog', title: 'BACKLOG', color: 'var(--muted)', bgColor: 'var(--surface-raised)' },
];

const CATEGORIES = [
  'Onboarding', 'Core', 'Content', 'In-System', 'UI', 'Navigation', 'Economy', 'Ships',
  'Combat', 'NPCs', 'Social', 'Progression', 'Industry', 'Narrative', 'UX', 'Infrastructure',
];

const DEFAULT_AUTHOR = 'User';

export function KanbanBoardPage() {
  const {
    board,
    pages,
    loading,
    error,
    reload,
    moveCard,
    addComment,
    deleteComment,
    addTag,
    removeTag,
    addReference,
    removeReference,
    reset,
  } = useKanbanBoard();

  // Custom pages power the "custom page reference" picker on each card.
  const { pages: customPages } = useCustomPages();

  // Agentic orchestrator: launch/watch/steer pi runs from the board.
  const orch = useOrchestrator();

  const [expandedId, setExpandedId] = useState<string | null>(null);

  const byColumn = useMemo(() => {
    const groups: Record<Column, Card[]> = { done: [], 'in-progress': [], todo: [], backlog: [] };
    if (board) {
      for (const card of board.cards) {
        groups[card.status].push(card);
      }
    }
    return groups;
  }, [board]);

  const counts = useMemo(() => {
    const c = { done: 0, 'in-progress': 0, todo: 0, backlog: 0, total: 0 };
    if (board) {
      for (const card of board.cards) {
        c[card.status]++;
        c.total++;
      }
    }
    return c;
  }, [board]);

  const completionRate = useMemo(() => {
    if (counts.total === 0) return 0;
    const weighted = counts.done + counts['in-progress'] * 0.3;
    return Math.round((weighted / counts.total) * 100);
  }, [counts]);

  return (
    <div className="mx-auto max-w-content">
      {/* Header */}
      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: '8px' }}>
        <h1 style={{ marginBottom: '0' }}>Implementation Board</h1>
        <div style={{ display: 'flex', gap: 'var(--sp-2)', alignItems: 'center' }}>
          <SyncStatus loading={loading} error={error} />
          <button type="button" onClick={() => void reload()} style={headerButtonStyle}>
            Reload
          </button>
          <button
            type="button"
            onClick={() => {
              if (
                confirm(
                  'Reset the board? This clears all comments, tags, and user references, and restores cards to their default columns.',
                )
              ) {
                void reset();
                setExpandedId(null);
              }
            }}
            style={headerButtonStyle}
          >
            Reset
          </button>
        </div>
      </div>
      <p style={{ color: 'var(--fg-dim)', fontSize: '0.95rem', maxWidth: '720px' }}>
        Interactive implementation board, backed by{' '}
        <code style={{ fontSize: '0.85em' }}>apps/api</code> (SQLite). Cards reference the{' '}
        <Link to="/docs/overview" style={{ color: 'var(--cyan)', textDecoration: 'underline' }}>
          design docs
        </Link>{' '}
        — click a card to comment, tag, move, or add references. Comments persist to the database.
      </p>

      {/* Error banner */}
      {error && (
        <div
          style={{
            marginTop: 'var(--sp-4)',
            padding: '10px 14px',
            border: '1px solid var(--red)',
            background: 'rgba(239,68,68,0.08)',
            color: 'var(--red)',
            borderRadius: 'var(--radius-sm)',
            fontSize: '0.85rem',
          }}
        >
          ⚠ {error} — <button onClick={() => void reload()} style={{ background: 'none', border: 'none', color: 'inherit', textDecoration: 'underline', cursor: 'pointer' }}>retry</button>
        </div>
      )}

      {/* Loading state */}
      {loading && !board && (
        <div style={{ marginTop: 'var(--sp-6)', color: 'var(--muted)', fontSize: '0.9rem' }}>Loading board…</div>
      )}

      {board && (
        <>
          {/* Stats */}
          <div
            className="grid gap-4"
            style={{
              marginTop: 'var(--sp-5)',
              gridTemplateColumns: 'repeat(auto-fit, minmax(140px, 1fr))',
            }}
          >
            {COLUMNS.map((col) => (
              <StatCard key={col.key} label={col.title} value={counts[col.key]} color={col.color} />
            ))}
          </div>

          {/* Progress */}
          <div style={{ marginTop: 'var(--sp-4)', marginBottom: 'var(--sp-4)', padding: 'var(--sp-4)', border: '1px solid var(--border)', background: 'var(--surface)', borderRadius: 'var(--radius-lg)' }}>
            <div style={{ display: 'flex', alignItems: 'center', gap: 'var(--sp-3)', marginBottom: 'var(--sp-2)' }}>
              <span style={{ fontSize: '0.85rem', color: 'var(--fg)', fontWeight: 500 }}>Overall Implementation Progress</span>
              <span style={{ marginLeft: 'auto', fontFamily: 'var(--font-mono)', fontSize: '0.85rem', color: 'var(--fg-dim)' }}>
                {completionRate}%
              </span>
            </div>
            <div style={{ width: '100%', height: '8px', borderRadius: '4px', background: 'var(--surface-raised)', overflow: 'hidden' }}>
              <div
                style={{
                  width: `${completionRate}%`,
                  height: '100%',
                  borderRadius: '4px',
                  background: completionRate > 50 ? 'var(--green)' : completionRate > 25 ? 'var(--accent)' : 'var(--red)',
                }}
              />
            </div>
          </div>

          {/* Insight */}
          <div
            style={{
              maxWidth: '720px',
              marginBottom: 'var(--sp-5)',
              padding: '14px 20px',
              border: '1px solid rgba(245,158,11,0.3)',
              background: 'rgba(245,158,11,0.1)',
              color: 'var(--amber, #f59e0b)',
              borderRadius: 'var(--radius-md)',
              fontSize: '0.85rem',
              lineHeight: 1.5,
            }}
          >
            <strong>Current state:</strong> complete onboarding (galaxy → character → base) plus built-but-unbacked
            frameworks for NPC AI, narrative event logging/history, and in-system contextual actions. Still missing the
            playable loop: no damage/combat resolution, no resources/cargo, no economy, no disk persistence. See the{' '}
            <Link to="/docs/roadmap" style={{ color: 'inherit', textDecoration: 'underline' }}>Roadmap</Link> and{' '}
            <Link to="/docs/gap-analysis" style={{ color: 'inherit', textDecoration: 'underline' }}>Gap Analysis</Link>.
          </div>

          {/* Board */}
          <div
            style={{
              display: 'grid',
              gridTemplateColumns: 'repeat(4, minmax(280px, 1fr))',
              gap: 'var(--sp-4)',
              overflowX: 'auto',
              paddingBottom: 'var(--sp-4)',
            }}
          >
            {COLUMNS.map((col) => (
              <div
                key={col.key}
                style={{
                  background: col.bgColor,
                  borderRadius: 'var(--radius-md)',
                  padding: 'var(--sp-3)',
                  border: '1px solid var(--border)',
                  minHeight: '400px',
                  display: 'flex',
                  flexDirection: 'column',
                }}
              >
                <div style={{ display: 'flex', alignItems: 'center', gap: 'var(--sp-2)', marginBottom: 'var(--sp-3)', paddingBottom: 'var(--sp-2)', borderBottom: '2px solid var(--border)' }}>
                  <span style={{ width: '10px', height: '10px', borderRadius: '50%', background: col.color, boxShadow: `0 0 8px ${col.color}66` }} />
                  <h3 style={{ margin: 0, fontSize: '0.9rem', fontWeight: 600, color: 'var(--fg)' }}>{col.title}</h3>
                  <span style={{ marginLeft: 'auto', fontFamily: 'var(--font-mono)', fontSize: '0.75rem', color: 'var(--muted)', background: 'var(--surface)', padding: '2px 8px', borderRadius: 'var(--radius-pill)' }}>
                    {byColumn[col.key].length}
                  </span>
                </div>

                <div style={{ display: 'flex', flexDirection: 'column', gap: 'var(--sp-2)', flex: 1 }}>
                  {byColumn[col.key].map((card) => (
                    <KanbanCard
                      key={card.id}
                      card={card}
                      pages={pages}
                      customPages={customPages}
                      orch={orch}
                      expanded={expandedId === card.id}
                      onToggle={() => setExpandedId(expandedId === card.id ? null : card.id)}
                      onMove={(status) => void moveCard(card.id, status)}
                      onAddComment={(text) => void addComment(card.id, text, DEFAULT_AUTHOR)}
                      onDeleteComment={(commentId) => void deleteComment(commentId, card.id)}
                      onAddTag={(tag) => void addTag(card.id, tag)}
                      onRemoveTag={(tag) => void removeTag(card.id, tag)}
                      onAddReference={(ref) => void addReference(card.id, ref)}
                      onRemoveReference={(href) => void removeReference(card.id, href)}
                    />
                  ))}
                </div>
              </div>
            ))}
          </div>

          {/* Legend */}
          <div style={{ marginTop: 'var(--sp-6)', padding: 'var(--sp-3)', background: 'var(--surface-raised)', borderRadius: 'var(--radius-md)', border: '1px solid var(--border)' }}>
            <h4 style={{ margin: '0 0 var(--sp-2) 0', fontSize: '0.85rem', color: 'var(--fg)' }}>Categories</h4>
            <div style={{ display: 'flex', flexWrap: 'wrap', gap: 'var(--sp-2)', fontSize: '0.75rem', color: 'var(--fg-dim)' }}>
              {CATEGORIES.map((cat) => (
                <span key={cat} style={{ padding: '2px 8px', background: 'var(--surface)', borderRadius: 'var(--radius-sm)', border: '1px solid var(--border)' }}>
                  {cat}
                </span>
              ))}
            </div>
          </div>
        </>
      )}
    </div>
  );
}

function StatCard({ label, value, color }: { label: string; value: number; color: string }) {
  return (
    <div
      className="rounded-xl border border-border bg-surface p-4 max-md:rounded-lg max-md:p-3"
      style={{ borderTop: `3px solid ${color}` }}
    >
      <div className="font-mono text-[1.4rem] font-bold tabular-nums" style={{ color }}>
        {value}
      </div>
      <div className="mt-1 text-[0.7rem] uppercase tracking-[0.05em] text-muted">{label}</div>
    </div>
  );
}

function SyncStatus({ loading, error }: { loading: boolean; error: string | null }) {
  const state = error ? 'error' : loading ? 'loading' : 'synced';
  const conf = {
    loading: { label: 'Syncing…', color: 'var(--muted)', tip: 'Talking to the API…' },
    synced: { label: 'Synced', color: 'var(--green)', tip: 'Changes persist to the SQLite backend.' },
    error: { label: 'Error', color: 'var(--red)', tip: 'Last request failed — see banner.' },
  }[state];
  return (
    <span title={conf.tip} style={syncPillStyle(conf.color)}>
      <span style={{ width: '7px', height: '7px', borderRadius: '50%', background: conf.color, boxShadow: `0 0 6px ${conf.color}` }} />
      {conf.label}
    </span>
  );
}

function syncPillStyle(color: string): React.CSSProperties {
  return {
    display: 'inline-flex',
    alignItems: 'center',
    gap: '6px',
    fontSize: '0.72rem',
    color,
    padding: '3px 8px',
    borderRadius: 'var(--radius-pill)',
    border: '1px solid var(--border)',
    background: 'var(--surface)',
    whiteSpace: 'nowrap',
  };
}

const headerButtonStyle: React.CSSProperties = {
  padding: '4px 12px',
  fontSize: '0.8rem',
  background: 'var(--surface)',
  border: '1px solid var(--border)',
  borderRadius: 'var(--radius-sm)',
  cursor: 'pointer',
  color: 'var(--fg)',
};
