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

type Option = { value: number; label: string };
type Club = { id: number; name: string; description: string | null; teacher: string; meeting: string; status: string; members: number };
type Props = { clubs: Club[]; teachers: Option[]; students: Option[] };

export default function Clubs({ clubs, teachers, students }: Props) {
  const [selectedClub, setSelectedClub] = useState<number>(clubs[0]?.id ?? 0);
  const [studentId, setStudentId] = useState<number>(students[0]?.value ?? 0);

  function createClub(e: React.FormEvent<HTMLFormElement>) {
    e.preventDefault();
    router.post('/school/clubs', Object.fromEntries(new FormData(e.currentTarget)));
    e.currentTarget.reset();
  }

  function addMember(e: React.FormEvent) {
    e.preventDefault();
    if (!selectedClub || !studentId) return;
    router.post(`/school/clubs/${selectedClub}/members`, { student_id: studentId }, { preserveScroll: true });
  }

  return (
    <AppLayout title="باشگاه‌ها">
      <div className="page-stack">
        <section className="section-header"><div><h2>باشگاه و فوق برنامه</h2><p>ساخت کلاس‌های فوق برنامه و افزودن اعضا</p></div></section>
        <form className="panel-card" onSubmit={createClub}>
          <div className="form-grid">
            <input className="form-input" name="name" required placeholder="نام باشگاه" />
            <select className="form-select" name="teacher_id" defaultValue=""><option value="">مربی</option>{teachers.map((t) => <option key={t.value} value={t.value}>{t.label}</option>)}</select>
            <input className="form-input" name="meeting_day" placeholder="روز جلسه" />
            <input className="form-input" name="meeting_time" type="time" />
            <textarea className="form-input" name="description" placeholder="توضیح" style={{ gridColumn: '1 / -1' }} />
          </div>
          <button className="btn btn-primary" type="submit" style={{ marginTop: 16 }}><i className="bi bi-plus-circle" /> ثبت باشگاه</button>
        </form>
        <form className="panel-card" onSubmit={addMember}>
          <h3 style={{ marginTop: 0 }}>افزودن عضو</h3>
          <div className="form-grid">
            <select className="form-select" value={selectedClub} onChange={(e) => setSelectedClub(Number(e.target.value))}>{clubs.map((c) => <option key={c.id} value={c.id}>{c.name}</option>)}</select>
            <select className="form-select" value={studentId} onChange={(e) => setStudentId(Number(e.target.value))}>{students.map((s) => <option key={s.value} value={s.value}>{s.label}</option>)}</select>
          </div>
          <button className="btn btn-soft" type="submit" style={{ marginTop: 16 }}>افزودن</button>
        </form>
        <div className="dashboard-grid">
          {clubs.map((club) => (
            <article className="panel-card" key={club.id}>
              <h3 style={{ marginTop: 0 }}>{club.name}</h3>
              <p style={{ color: 'var(--color-text-muted)' }}>{club.description || 'بدون توضیح'}</p>
              <div className="action-row"><span className="badge badge-muted">{club.teacher}</span><span className="badge badge-success">{club.members} عضو</span><span className="badge badge-warning">{club.meeting}</span></div>
            </article>
          ))}
        </div>
      </div>
    </AppLayout>
  );
}