import { router } from '@inertiajs/react';
import { AppLayout } from '@/Components/Layout/AppLayout';

type Candidate = {
  id: number;
  name: string;
  slogan?: string | null;
};

type Props = {
  voting?: {
    id: number;
    title: string;
    description?: string | null;
  } | null;
  candidates?: Candidate[];
};

export default function Vote({ voting = null, candidates = [] }: Props) {
  return (
    <AppLayout title="ثبت رأی">
      <div className="page-stack">
        <section className="panel-card">
          <h2>{voting?.title || 'رأی‌گیری فعال'}</h2>
          <p>{voting?.description || 'هر دانش‌آموز واجد شرایط فقط یک بار می‌تواند رأی ثبت کند.'}</p>
        </section>
        <section className="card-grid">
          {candidates.map((candidate) => (
            <article className="panel-card" key={candidate.id}>
              <span className="icon-badge"><i className="bi bi-person-badge" /></span>
              <h3>{candidate.name}</h3>
              <p>{candidate.slogan || 'کاندیدای رأی‌گیری'}</p>
              <button
                className="btn btn-primary"
                disabled={!voting}
                type="button"
                onClick={() => {
                  if (!voting) return;
                  router.post(`/student/voting/${voting.id}/vote`, { candidate_id: candidate.id }, { preserveScroll: true });
                }}
              >
                رأی می‌دهم
              </button>
            </article>
          ))}
          {candidates.length === 0 ? <article className="panel-card"><h3>کاندیدایی برای نمایش نیست</h3><p>کاندیداها بعد از ثبت در دیتابیس اینجا نمایش داده می‌شوند.</p></article> : null}
        </section>
      </div>
    </AppLayout>
  );
}