import { useForm } from '@inertiajs/react';
import { AppLayout } from '@/Components/Layout/AppLayout';
import { TextInput } from '@/Components/Forms/TextInput';
import { SelectInput } from '@/Components/Forms/SelectInput';
import { JalaliDateTimePicker } from '@/Components/Forms/JalaliDateTimePicker';

type Option = { value: string | number; label: string };

type Props = {
  grades: Option[];
  classes: Option[];
};

export default function VotingBuilder({ grades, classes }: Props) {
  const form = useForm({
    title: '',
    description: '',
    type: 'student_council',
    starts_at: '',
    ends_at: '',
    grade_level_ids: [] as Array<string | number>,
    classroom_ids: [] as Array<string | number>,
  });

  const gradeOptions = grades.length > 0 ? grades : [{ value: '', label: 'پایه‌ای فعال نیست' }];
  const classOptions = classes.length > 0 ? classes : [{ value: '', label: 'کلاسی ثبت نشده' }];

  return (
    <AppLayout title="ساخت رأی‌گیری">
      <div className="page-stack">
        <section className="split-panel">
          <form className="panel-card" onSubmit={(event) => { event.preventDefault(); form.post('/school/voting'); }}>
            <h2>تنظیمات رأی‌گیری</h2>
            <div className="form-grid">
              <TextInput label="عنوان" placeholder="شورای دانش‌آموزی ۱۴۰۵" value={form.data.title} onChange={(event) => form.setData('title', event.target.value)} error={form.errors.title} />
              <SelectInput label="نوع" value={form.data.type} onChange={(event) => form.setData('type', event.target.value)} options={[
                { value: 'student_council', label: 'شورای دانش‌آموزی' },
                { value: 'class_representative', label: 'نماینده کلاس' },
                { value: 'survey', label: 'نظرسنجی' },
                { value: 'custom', label: 'سفارشی' },
              ]} />
              <SelectInput label="پایه مجاز" onChange={(event) => form.setData('grade_level_ids', event.target.value ? [event.target.value] : [])} options={[{ value: '', label: 'بدون محدودیت پایه' }, ...gradeOptions]} />
              <SelectInput label="کلاس مجاز" onChange={(event) => form.setData('classroom_ids', event.target.value ? [event.target.value] : [])} options={[{ value: '', label: 'بدون محدودیت کلاس' }, ...classOptions]} />
              <JalaliDateTimePicker label="شروع" value={form.data.starts_at} onChange={(value) => form.setData('starts_at', value)} />
              <JalaliDateTimePicker label="پایان" value={form.data.ends_at} onChange={(value) => form.setData('ends_at', 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>
          <aside className="panel-card">
            <h2>کاندیداها</h2>
            <p>بعد از ذخیره رأی‌گیری، کاندیداها از جدول voting_candidates خوانده و اینجا مدیریت می‌شوند.</p>
            <button className="btn btn-soft full" type="button">افزودن کاندیدا</button>
          </aside>
        </section>
      </div>
    </AppLayout>
  );
}