import { Link } from '@inertiajs/react';
import { AppLayout } from '@/Components/Layout/AppLayout';
import { formatCount } from '@/lib/formatters';

type Result = { candidate: string; votes: number; percent: number };
type Props = {
  voting: { id: number; title: string; description: string | null };
  totalVotes: number;
  results: Result[];
};

export default function StudentVotingResults({ voting, totalVotes, results }: Props) {
  return (
    <AppLayout title={`نتایج ${voting.title}`}>
      <div className="page-stack">
        <section className="section-header">
          <div>
            <h2><i className="bi bi-bar-chart" style={{ marginLeft: '0.5rem', color: 'var(--color-primary)' }} />نتایج رأی‌گیری</h2>
            <p>{voting.title}</p>
          </div>
          <Link href="/student/voting" className="btn btn-ghost btn-sm"><i className="bi bi-arrow-right" /> برگشت</Link>
        </section>

        <section className="dashboard-grid">
          <article className="metric-card"><span>کل رأی‌ها</span><strong>{formatCount(totalVotes)}</strong></article>
          <article className="metric-card"><span>کاندیداها</span><strong>{formatCount(results.length)}</strong></article>
        </section>

        <section className="panel-card">
          {results.length === 0 ? (
            <p style={{ textAlign: 'center', color: 'var(--color-text-muted)' }}>نتیجه‌ای ثبت نشده است.</p>
          ) : (
            <div style={{ display: 'grid', gap: '0.75rem' }}>
              {results.map((result, index) => (
                <div key={result.candidate} style={{ display: 'grid', gap: '0.35rem' }}>
                  <div style={{ display: 'flex', justifyContent: 'space-between', gap: '1rem' }}>
                    <strong>{index + 1}. {result.candidate}</strong>
                    <span>{formatCount(result.votes)} رأی · {formatCount(result.percent)}٪</span>
                  </div>
                  <div style={{ height: 10, borderRadius: 99, background: 'var(--color-border)', overflow: 'hidden' }}>
                    <div style={{ height: '100%', width: `${Math.min(100, result.percent)}%`, background: index === 0 ? '#16a34a' : 'var(--color-primary)' }} />
                  </div>
                </div>
              ))}
            </div>
          )}
        </section>
      </div>
    </AppLayout>
  );
}