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

type ClassOption = { id: number; name: string };
type Summary = {
  classId: number;
  classroom: string;
  students: number;
  homeworks: number;
  submitted: number;
  missing: number;
  late: number;
  submissionRate: number;
};
type Detail = {
  id: number;
  title: string;
  subject: string;
  teacher: string;
  dueAt: string;
  students: number;
  submitted: number;
  missing: number;
  late: number;
  submissionRate: number;
};

type Props = {
  classes: ClassOption[];
  summaries: Summary[];
  details: Detail[];
  filters: { class_id: number | null };
};

export default function HomeworkReports({ classes, summaries, details, filters }: Props) {
  function selectClass(classId: string) {
    router.get('/school/homework-reports', { class_id: classId || undefined }, { preserveState: true });
  }

  return (
    <AppLayout title="گزارش تکالیف">
      <div className="page-stack">
        <section className="section-header">
          <div>
            <h2><i className="bi bi-journal-check" style={{ marginLeft: '0.5rem', color: 'var(--color-primary)' }} />گزارش تکالیف</h2>
            <p>آمار ارسال، جاافتاده و تاخیری تکالیف به تفکیک کلاس.</p>
          </div>
          <select className="form-input" value={filters.class_id ?? ''} onChange={(e) => selectClass(e.target.value)} style={{ maxWidth: 260 }}>
            <option value="">جزئیات کلاس...</option>
            {classes.map((c) => <option key={c.id} value={c.id}>{c.name}</option>)}
          </select>
        </section>

        <section className="panel-card" style={{ padding: 0, overflow: 'hidden' }}>
          <div style={{ overflowX: 'auto' }}>
            <table className="data-table" style={{ width: '100%' }}>
              <thead>
                <tr>
                  <th>کلاس</th>
                  <th>دانش‌آموز</th>
                  <th>تکلیف</th>
                  <th>ارسال</th>
                  <th>جاافتاده</th>
                  <th>تاخیری</th>
                  <th>نرخ ارسال</th>
                </tr>
              </thead>
              <tbody>
                {summaries.map((row) => (
                  <tr key={row.classId} onClick={() => selectClass(String(row.classId))} style={{ cursor: 'pointer' }}>
                    <td style={{ fontWeight: 700 }}>{row.classroom}</td>
                    <td>{row.students}</td>
                    <td>{row.homeworks}</td>
                    <td><span className="badge badge-success">{row.submitted}</span></td>
                    <td><span className={row.missing > 0 ? 'badge badge-danger' : 'badge badge-success'}>{row.missing}</span></td>
                    <td><span className={row.late > 0 ? 'badge badge-warning' : 'badge badge-secondary'}>{row.late}</span></td>
                    <td style={{ minWidth: 130 }}>
                      <div style={{ display: 'flex', alignItems: 'center', gap: '0.5rem' }}>
                        <div style={{ flex: 1, height: 8, background: 'var(--color-border)', borderRadius: 99, overflow: 'hidden' }}>
                          <div style={{ width: `${Math.min(100, row.submissionRate)}%`, height: '100%', background: row.submissionRate >= 80 ? '#16a34a' : row.submissionRate >= 50 ? '#f59e0b' : '#dc2626' }} />
                        </div>
                        <strong>{row.submissionRate}%</strong>
                      </div>
                    </td>
                  </tr>
                ))}
              </tbody>
            </table>
          </div>
        </section>

        {filters.class_id && (
          <section className="panel-card" style={{ padding: 0, overflow: 'hidden' }}>
            <div style={{ padding: '1rem 1rem 0' }}>
              <h3 style={{ margin: 0, fontSize: '1rem' }}>جزئیات کلاس</h3>
            </div>
            {details.length === 0 ? (
              <p style={{ padding: '2rem', textAlign: 'center', color: 'var(--color-text-muted)' }}>برای این کلاس تکلیفی ثبت نشده است.</p>
            ) : (
              <div style={{ overflowX: 'auto' }}>
                <table className="data-table" style={{ width: '100%' }}>
                  <thead>
                    <tr>
                      <th>تکلیف</th>
                      <th>درس</th>
                      <th>معلم</th>
                      <th>مهلت</th>
                      <th>ارسال/کل</th>
                      <th>جاافتاده</th>
                      <th>تاخیری</th>
                    </tr>
                  </thead>
                  <tbody>
                    {details.map((row) => (
                      <tr key={row.id}>
                        <td style={{ fontWeight: 700 }}>{row.title}</td>
                        <td>{row.subject}</td>
                        <td>{row.teacher}</td>
                        <td style={{ whiteSpace: 'nowrap', color: 'var(--color-text-muted)', fontSize: '0.82rem' }}>{row.dueAt}</td>
                        <td>{row.submitted} / {row.students} ({row.submissionRate}%)</td>
                        <td>{row.missing}</td>
                        <td>{row.late}</td>
                      </tr>
                    ))}
                  </tbody>
                </table>
              </div>
            )}
          </section>
        )}
      </div>
    </AppLayout>
  );
}