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

type Props = {
  weights: { quiz: number; midterm: number; final: number };
};

export default function GradeWeights({ weights }: Props) {
  const form = useForm({
    quiz: String(weights.quiz),
    midterm: String(weights.midterm),
    final: String(weights.final),
  });
  const total = Number(form.data.quiz || 0) + Number(form.data.midterm || 0) + Number(form.data.final || 0);

  return (
    <AppLayout title="وزن نمرات">
      <div className="page-stack">
        <section className="section-header">
          <div>
            <h2>تنظیم وزن نمرات</h2>
            <p>کوییز، میان‌ترم و پایان‌ترم باید در مجموع ۱۰۰٪ شوند.</p>
          </div>
        </section>
        <form className="panel-card" onSubmit={(e) => { e.preventDefault(); form.put('/school/grade-weights'); }}>
          <div className="form-grid">
            <TextInput label="کوییز ٪" type="number" value={form.data.quiz} onChange={(e) => form.setData('quiz', e.target.value)} error={form.errors.quiz} />
            <TextInput label="میان‌ترم ٪" type="number" value={form.data.midterm} onChange={(e) => form.setData('midterm', e.target.value)} error={form.errors.midterm} />
            <TextInput label="پایان‌ترم ٪" type="number" value={form.data.final} onChange={(e) => form.setData('final', e.target.value)} error={form.errors.final} />
          </div>
          <div className={`badge ${total === 100 ? 'badge-success' : 'badge-danger'}`}>جمع: {total}٪</div>
          <div className="action-row" style={{ marginTop: 12 }}>
            <button className="btn btn-primary" disabled={form.processing || total !== 100} type="submit">ذخیره</button>
          </div>
        </form>
      </div>
    </AppLayout>
  );
}