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

type Homework = {
  id: number;
  title: string;
  classroom: string;
  subject: string;
  dueAt: string;
};

type Row = {
  studentId: number;
  name: string;
  studentCode: string;
  status: 'submitted' | 'late' | 'missing' | 'pending';
  submittedAt: string | null;
  body: string | null;
};

type Props = {
  homework: Homework;
  rows: Row[];
  submittedCount: number;
  totalCount: number;
};

const statusBadge: Record<string, { cls: string; label: string; icon: string }> = {
  submitted: { cls: 'badge-success', label: 'ارسال شد', icon: 'bi-check-circle-fill' },
  late: { cls: 'badge-warning', label: 'دیر ارسال', icon: 'bi-clock-history' },
  missing: { cls: 'badge-danger', label: 'نفرستاده', icon: 'bi-x-circle-fill' },
  pending: { cls: 'badge-secondary', label: 'در انتظار', icon: 'bi-hourglass-split' },
};

export default function HomeworkSubmissions({ homework, rows, submittedCount, totalCount }: Props) {
  const missingCount = rows.filter((r) => r.status === 'missing').length;
  const lateCount = rows.filter((r) => r.status === 'late').length;

  return (
    <AppLayout title={`ارسال‌های تکلیف: ${homework.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)' }} />
              {homework.title}
            </h2>
            <p>
              {homework.classroom}
              {homework.subject !== '—' && ` · ${homework.subject}`}
              {homework.dueAt !== '—' && ` · مهلت: ${homework.dueAt}`}
            </p>
          </div>
          <Link href="/teacher/homeworks" className="btn btn-ghost">
            <i className="bi bi-arrow-right" /> بازگشت
          </Link>
        </section>

        <div className="dashboard-grid" style={{ gridTemplateColumns: 'repeat(auto-fit, minmax(150px, 1fr))' }}>
          <div className="panel-card" style={{ textAlign: 'center' }}>
            <div style={{ fontSize: '1.8rem', fontWeight: 700, color: 'var(--color-success)' }}>{submittedCount}</div>
            <div style={{ fontSize: '0.875rem', color: 'var(--color-text-muted)' }}>ارسال کرده</div>
          </div>
          <div className="panel-card" style={{ textAlign: 'center' }}>
            <div style={{ fontSize: '1.8rem', fontWeight: 700, color: 'var(--color-danger)' }}>{missingCount}</div>
            <div style={{ fontSize: '0.875rem', color: 'var(--color-text-muted)' }}>ارسال نکرده</div>
          </div>
          {lateCount > 0 && (
            <div className="panel-card" style={{ textAlign: 'center' }}>
              <div style={{ fontSize: '1.8rem', fontWeight: 700, color: 'var(--color-warning)' }}>{lateCount}</div>
              <div style={{ fontSize: '0.875rem', color: 'var(--color-text-muted)' }}>دیر ارسال</div>
            </div>
          )}
          <div className="panel-card" style={{ textAlign: 'center' }}>
            <div style={{ fontSize: '1.8rem', fontWeight: 700 }}>{totalCount}</div>
            <div style={{ fontSize: '0.875rem', color: 'var(--color-text-muted)' }}>کل دانش‌آموزان</div>
          </div>
        </div>

        <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>
                </tr>
              </thead>
              <tbody>
                {rows.map((row, i) => {
                  const badge = statusBadge[row.status] ?? statusBadge.pending;
                  return (
                    <tr key={row.studentId}>
                      <td style={{ color: 'var(--color-text-muted)', fontSize: '0.85rem' }}>{i + 1}</td>
                      <td style={{ fontWeight: 600 }}>{row.name}</td>
                      <td>
                        <span className={`badge ${badge.cls}`}>
                          <i className={`bi ${badge.icon}`} style={{ marginLeft: '0.3rem' }} />
                          {badge.label}
                        </span>
                      </td>
                      <td style={{ fontSize: '0.85rem', color: 'var(--color-text-muted)', whiteSpace: 'nowrap' }}>
                        {row.submittedAt ?? '—'}
                      </td>
                      <td style={{ fontSize: '0.85rem', maxWidth: 220, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>
                        {row.body ? (
                          <span title={row.body}>{row.body}</span>
                        ) : (
                          <span style={{ color: 'var(--color-text-muted)' }}>—</span>
                        )}
                      </td>
                    </tr>
                  );
                })}
              </tbody>
            </table>
          </div>
        </section>
      </div>
    </AppLayout>
  );
}