import { useForm } from '@inertiajs/react';
import { AppLayout } from '@/Components/Layout/AppLayout';
import { SelectInput } from '@/Components/Forms/SelectInput';
import { TextInput } from '@/Components/Forms/TextInput';
import { DataTable } from '@/Components/Tables/DataTable';
import { formatCount } from '@/lib/formatters';

type Result = {
  candidate: string;
  votes: number;
  percent: number;
};

type Props = {
  votingId: number | null;
  totalVotes: number;
  students: Array<{ value: string | number; label: string }>;
  results: Result[];
};

export default function VotingResults({ votingId, totalVotes, students, results }: Props) {
  const form = useForm({
    student_id: '',
    display_name: '',
    slogan: '',
    description: '',
  });

  const rows = results.map((result) => [
    result.candidate,
    formatCount(result.votes),
    `${formatCount(result.percent)}٪`,
  ]);

  return (
    <AppLayout title="نتایج رأی‌گیری">
      <div className="page-stack">
        <section className="section-header">
          <div>
            <h2>نتایج و خروجی</h2>
            <p>خروجی candidateها و نتایج باید CSV/Excel قابل دانلود داشته باشد؛ رأی خام محرمانه می‌ماند.</p>
            <p className="mini-note">کل رأی ثبت‌شده: {formatCount(totalVotes)}</p>
          </div>
          <a className="btn btn-soft" href="/school/exports/voting-results.csv"><i className="bi bi-file-earmark-arrow-down" /> Export نتایج</a>
        </section>
        {rows.length > 0
          ? <DataTable columns={['کاندیدا', 'رأی', 'درصد']} rows={rows} />
          : <section className="panel-card"><h2>نتیجه‌ای برای نمایش نیست</h2><p>بعد از تعریف کاندیدا و ثبت رأی، نتایج واقعی از دیتابیس اینجا نمایش داده می‌شود.</p></section>}
        {votingId ? (
          <form className="panel-card" onSubmit={(event) => { event.preventDefault(); form.post(`/school/voting/${votingId}/candidates`, { preserveScroll: true, onSuccess: () => form.reset() }); }}>
            <h2>افزودن کاندیدا</h2>
            <div className="form-grid">
              <SelectInput label="دانش‌آموز مرتبط" value={form.data.student_id} onChange={(event) => form.setData('student_id', event.target.value)} options={[{ value: '', label: 'بدون اتصال به دانش‌آموز' }, ...students]} />
              <TextInput label="نام نمایشی" value={form.data.display_name} onChange={(event) => form.setData('display_name', event.target.value)} error={form.errors.display_name} />
              <TextInput label="شعار" value={form.data.slogan} onChange={(event) => form.setData('slogan', event.target.value)} />
              <TextInput label="توضیح" value={form.data.description} onChange={(event) => form.setData('description', event.target.value)} />
            </div>
            <button className="btn btn-primary" disabled={form.processing} type="submit">ثبت کاندیدا</button>
          </form>
        ) : null}
      </div>
    </AppLayout>
  );
}