import '../shared/base.css';
import { App } from '@modelcontextprotocol/ext-apps';

interface VoteData {
  question: string;
  options: string[];
  winner: string | null;
  isTie: boolean;
  tally: Record<string, number>;
  confidenceByOption: Record<string, number>;
  votes: {
    voter: string;
    nickname: string;
    choice: string;
    confidence: number;
    reasoning: string;
  }[];
  totalVoters: number;
  validVotes: number;
  consensusLevel: 'unanimous' | 'majority' | 'plurality' | 'split' | 'none';
}

const consensusConfig: Record<string, { color: string; label: string }> = {
  unanimous: { color: '#4caf50', label: 'Unanimous' },
  majority: { color: '#2196f3', label: 'Majority' },
  plurality: { color: '#ff9800', label: 'Plurality' },
  split: { color: '#ff5722', label: 'Split' },
  none: { color: '#9e9e9e', label: 'No Consensus' },
};

const app = new App({ name: 'DuckVote', version: '1.0.0' }, {});

app.ontoolresult = (params) => {
  const container = document.getElementById('app')!;
  if (params.isError) {
    container.innerHTML = `<div class="error-banner">Tool execution failed</div>`;
    return;
  }

  const content = params.content;
  if (!content || !Array.isArray(content) || content.length < 2) {
    container.innerHTML = `<div class="error-banner">No structured data received</div>`;
    return;
  }

  try {
    const data: VoteData = JSON.parse((content[1] as { type: string; text: string }).text);
    render(data);
  } catch {
    container.innerHTML = `<div class="error-banner">Failed to parse vote data</div>`;
  }
};

function render(data: VoteData) {
  const container = document.getElementById('app')!;
  const cfg = consensusConfig[data.consensusLevel] || consensusConfig.none;
  const maxVotes = Math.max(...Object.values(data.tally), 1);

  let html = `<h2 class="question">${esc(data.question)}</h2>`;

  // Winner card
  if (data.winner) {
    html += `<div class="winner-card">`;
    html += `<span class="winner-label">Winner</span>`;
    html += `<span class="winner-name">${esc(data.winner)}</span>`;
    if (data.isTie) {
      html += `<span class="tie-note">Tie-breaker by confidence</span>`;
    }
    html += `</div>`;
  } else {
    html += `<div class="winner-card no-winner"><span class="winner-label">No valid votes</span></div>`;
  }

  // Consensus badge
  html += `<div class="consensus-badge" style="background:${cfg.color}">${cfg.label}</div>`;

  // Bar chart
  html += `<div class="tally-section"><h3>Vote Tally</h3>`;
  const sortedOptions = [...data.options].sort(
    (a, b) => (data.tally[b] || 0) - (data.tally[a] || 0)
  );
  for (const opt of sortedOptions) {
    const votes = data.tally[opt] || 0;
    const conf = data.confidenceByOption[opt] || 0;
    const pct = (votes / maxVotes) * 100;
    const isWinner = opt === data.winner;
    html += `<div class="bar-row${isWinner ? ' winner-row' : ''}">`;
    html += `<div class="bar-label">${esc(opt)}</div>`;
    html += `<div class="bar-track"><div class="bar-fill" style="width:${pct}%"></div></div>`;
    html += `<div class="bar-value">${votes} vote${votes !== 1 ? 's' : ''} (${conf}%)</div>`;
    html += `</div>`;
  }
  html += `</div>`;

  // Individual voters
  html += `<div class="voters-section"><h3>Individual Votes</h3><div class="voters-grid">`;
  for (const v of data.votes) {
    const hasChoice = !!v.choice;
    html += `<div class="voter-card${!hasChoice ? ' invalid-vote' : ''}">`;
    html += `<div class="voter-name">${esc(v.nickname)}</div>`;
    if (hasChoice) {
      html += `<div class="voter-choice">${esc(v.choice)}</div>`;
      html += `<div class="confidence-bar-wrap"><div class="confidence-bar" style="width:${v.confidence}%"></div></div>`;
      html += `<div class="confidence-label">${v.confidence}% confidence</div>`;
      if (v.reasoning) {
        html += `<details class="reasoning"><summary>Reasoning</summary><p>${esc(v.reasoning)}</p></details>`;
      }
    } else {
      html += `<div class="voter-choice invalid">Invalid vote</div>`;
    }
    html += `</div>`;
  }
  html += `</div></div>`;

  // Footer
  html += `<div class="footer">${data.validVotes}/${data.totalVoters} valid votes</div>`;

  container.innerHTML = html;
}

function esc(s: string): string {
  const d = document.createElement('div');
  d.textContent = s;
  return d.innerHTML;
}

app.connect().catch(console.error);