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

type Announcement = {
  title: string;
  body: string;
  isImportant: boolean;
  createdAt: string;
};

type OnlineClass = {
  id: number;
  title: string;
  subject: string;
  meetingUrl: string;
  startsAt: string;
};

type Props = {
  metrics: {
    todayClasses: number;
    activeExams: number;
    openHomeworks: number;
    monthAbsences: number;
  };
  importantMessage: string | null;
  announcements: Announcement[];
  onlineClasses: OnlineClass[];
  activeVotingCount: number;
  approvedGradeCount: number;
};

export default function StudentHome({ metrics, importantMessage, announcements, onlineClasses, activeVotingCount, approvedGradeCount }: Props) {
  return (
    <AppLayout title="پنل دانش‌آموز">
      <div className="page-stack">
        {importantMessage && (
          <section style={{ background: '#fef3c7', border: '1px solid #f59e0b', borderRadius: 'var(--radius-md)', padding: '1rem 1.25rem' }}>
            <strong><i className="bi bi-megaphone-fill" style={{ marginLeft: '0.4rem' }} />پیام مهم مدرسه</strong>
            <p style={{ margin: '0.5rem 0 0' }}>{importantMessage}</p>
          </section>
        )}

        <section className="dashboard-grid">
          <article className="metric-card"><span>کلاس‌های امروز</span><strong>{formatCount(metrics.todayClasses)}</strong></article>
          <Link
            href="/student/exams"
            className="metric-card"
            style={{ textDecoration: 'none' }}
          >
            <span>امتحان فعال</span>
            <strong>{formatCount(metrics.activeExams)}</strong>
          </Link>
          <Link
            href="/student/homeworks"
            className="metric-card"
            style={{ textDecoration: 'none' }}
          >
            <span>تکلیف باز</span>
            <strong>{formatCount(metrics.openHomeworks)}</strong>
          </Link>
          <Link href="/student/attendance" className="metric-card" style={{ textDecoration: 'none' }}>
            <span>غیبت ماه</span>
            <strong>{formatCount(metrics.monthAbsences)}</strong>
          </Link>
          {approvedGradeCount > 0 && (
            <Link
              href="/student/grades"
              className="metric-card"
              style={{ textDecoration: 'none' }}
            >
              <span><i className="bi bi-patch-check" style={{ marginLeft: '0.3rem' }} />نمرات ثبت‌شده</span>
              <strong>{formatCount(approvedGradeCount)}</strong>
            </Link>
          )}
          {activeVotingCount > 0 && (
            <Link
              href="/student/voting"
              className="metric-card"
              style={{ textDecoration: 'none', borderColor: 'var(--color-primary)', background: 'var(--color-primary-soft)' }}
            >
              <span><i className="bi bi-ballot" style={{ marginLeft: '0.3rem', color: 'var(--color-primary)' }} />رأی‌گیری فعال</span>
              <strong style={{ color: 'var(--color-primary-active)' }}>{formatCount(activeVotingCount)}</strong>
            </Link>
          )}
        </section>

        <section className="split-panel">
          <article className="panel-card">
            <h2><i className="bi bi-megaphone" style={{ marginLeft: '0.4rem' }} />اطلاعیه‌ها</h2>
            {announcements.length === 0 ? (
              <p style={{ color: 'var(--color-text-muted)' }}>اطلاعیه‌ای برای نمایش وجود ندارد.</p>
            ) : (
              <ul style={{ listStyle: 'none', padding: 0, margin: 0 }}>
                {announcements.map((a, i) => (
                  <li key={i} style={{ borderBottom: '1px solid var(--color-border)', padding: '0.75rem 0' }}>
                    <div style={{ display: 'flex', alignItems: 'center', gap: '0.4rem', marginBottom: '0.25rem' }}>
                      {a.isImportant && <span className="badge badge-warning" style={{ fontSize: '0.7rem' }}>مهم</span>}
                      <strong style={{ fontSize: '0.95rem' }}>{a.title}</strong>
                      <span style={{ color: 'var(--color-text-muted)', fontSize: '0.78rem', marginRight: 'auto' }}>{a.createdAt}</span>
                    </div>
                    <p style={{ margin: 0, fontSize: '0.875rem', color: 'var(--color-text-muted)' }}>{a.body}</p>
                  </li>
                ))}
              </ul>
            )}
          </article>

          <article className="panel-card">
            <h2><i className="bi bi-camera-video" style={{ marginLeft: '0.4rem' }} />کلاس‌های آنلاین</h2>
            {onlineClasses.length === 0 ? (
              <p style={{ color: 'var(--color-text-muted)' }}>کلاس آنلاین برنامه‌ریزی‌شده‌ای وجود ندارد.</p>
            ) : (
              <ul style={{ listStyle: 'none', padding: 0, margin: 0 }}>
                {onlineClasses.map((c) => (
                  <li key={c.id} style={{ borderBottom: '1px solid var(--color-border)', padding: '0.75rem 0', display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
                    <div>
                      <strong style={{ display: 'block' }}>{c.title}</strong>
                      <span style={{ fontSize: '0.85rem', color: 'var(--color-text-muted)' }}>{c.subject} — {c.startsAt}</span>
                    </div>
                    <a
                      href={`/student/online-classes/${c.id}/join`}
                      target="_blank"
                      rel="noreferrer"
                      className="btn btn-primary btn-sm"
                    >
                      <i className="bi bi-box-arrow-up-left" /> ورود
                    </a>
                  </li>
                ))}
              </ul>
            )}
          </article>
        </section>
      </div>
    </AppLayout>
  );
}
