import { router } from '@inertiajs/react';
import {
  Bar, BarChart, CartesianGrid, Cell, PolarAngleAxis, PolarGrid, PolarRadiusAxis, Radar, RadarChart, ResponsiveContainer, Tooltip, XAxis, YAxis,
} from 'recharts';
import { AppLayout } from '@/Components/Layout/AppLayout';

type ClassGrade = {
  classroom: string;
  avgScore: number;
  studentCount: number;
  passRate: number;
};

type SubjectAvg = {
  subject: string;
  avgScore: number;
  studentCount: number;
};

type AbsenceRow = {
  classroom: string;
  absentCount: number;
  absenceRate: number;
};

type Summary = {
  avgGpa: number;
  passRate: number;
  absenceRate: number;
  atRiskCount: number;
};

type SchoolYear = { value: number; label: string; active: boolean };
type RadarMetric = { metric: string; score: number };

type Props = {
  schoolYears: SchoolYear[];
  selectedYear: number | null;
  gradesByClass: ClassGrade[];
  subjectAverages: SubjectAvg[];
  absenceByClass: AbsenceRow[];
  summary: Summary;
  evaluationRadar: RadarMetric[];
};

const COLORS = ['#0EA678', '#06b6d4', '#8b5cf6', '#f59e0b', '#ef4444', '#10b981', '#3b82f6', '#ec4899'];

function scoreColor(score: number) {
  if (score >= 16) return '#0EA678';
  if (score >= 12) return '#06b6d4';
  if (score >= 10) return '#f59e0b';
  return '#ef4444';
}

function StatCard({ label, value, sub, color }: { label: string; value: string; sub?: string; color?: string }) {
  return (
    <div className="panel-card" style={{ flex: '1 1 180px', minWidth: 0, padding: '1.25rem 1.5rem' }}>
      <div style={{ fontSize: '.85rem', opacity: .65, marginBottom: '.3rem' }}>{label}</div>
      <div style={{ fontSize: '2rem', fontWeight: 800, color: color ?? 'var(--color-primary)', lineHeight: 1 }}>{value}</div>
      {sub && <div style={{ fontSize: '.8rem', opacity: .55, marginTop: '.3rem' }}>{sub}</div>}
    </div>
  );
}

export default function Analytics({ schoolYears, selectedYear, gradesByClass, subjectAverages, absenceByClass, summary, evaluationRadar }: Props) {
  function changeYear(e: React.ChangeEvent<HTMLSelectElement>) {
    router.get('/school/analytics', { year: e.target.value }, { preserveScroll: true });
  }

  return (
    <AppLayout title="آمار و تحلیل مدرسه">
      <div className="page-stack">
        <section className="section-header">
          <div>
            <h2>آمار و تحلیل مدرسه</h2>
            <p>نمای کلی عملکرد تحصیلی و حضور و غیاب</p>
          </div>
          {schoolYears.length > 0 && (
            <select className="form-select" value={selectedYear ?? ''} onChange={changeYear} style={{ minWidth: 160 }}>
              {schoolYears.map((y) => (
                <option key={y.value} value={y.value}>{y.label}{y.active ? ' (فعال)' : ''}</option>
              ))}
            </select>
          )}
        </section>

        {/* KPI Cards */}
        <div style={{ display: 'flex', gap: '1rem', flexWrap: 'wrap' }}>
          <StatCard label="میانگین کل نمرات" value={summary.avgGpa > 0 ? `${summary.avgGpa}` : '—'} sub="از ۲۰" color={scoreColor(summary.avgGpa)} />
          <StatCard label="نرخ قبولی" value={summary.passRate > 0 ? `${summary.passRate}٪` : '—'} sub="نمره ≥ ۱۰" color="#0EA678" />
          <StatCard label="دانش‌آموزان در خطر" value={`${summary.atRiskCount}`} sub="میانگین < ۱۰" color="#ef4444" />
          <StatCard label="نرخ غیبت ماه اخیر" value={`${summary.absenceRate}٪`} sub="میانگین کلاس‌ها" color="#f59e0b" />
        </div>

        {evaluationRadar.length > 0 && (
          <div className="panel-card">
            <h2 style={{ marginBottom: '1.25rem' }}>نمودار ارزیابی مدرسه</h2>
            <ResponsiveContainer width="100%" height={320}>
              <RadarChart data={evaluationRadar}>
                <PolarGrid />
                <PolarAngleAxis dataKey="metric" tick={{ fontSize: 12 }} />
                <PolarRadiusAxis angle={90} domain={[0, 100]} tick={{ fontSize: 10 }} />
                <Radar name="امتیاز" dataKey="score" stroke="#0EA678" fill="#0EA678" fillOpacity={0.25} />
                <Tooltip
                  formatter={(v: number) => [`${v} از ۱۰۰`, 'امتیاز']}
                  contentStyle={{ direction: 'rtl', fontFamily: 'Vazirmatn, Tahoma' }}
                />
              </RadarChart>
            </ResponsiveContainer>
          </div>
        )}

        {/* Grade by class chart */}
        {gradesByClass.length > 0 && (
          <div className="panel-card">
            <h2 style={{ marginBottom: '1.25rem' }}>میانگین نمرات به تفکیک کلاس</h2>
            <ResponsiveContainer width="100%" height={260}>
              <BarChart data={gradesByClass} margin={{ top: 0, right: 16, left: -8, bottom: 48 }}>
                <CartesianGrid strokeDasharray="3 3" stroke="var(--color-border, #333)" opacity={.3} />
                <XAxis dataKey="classroom" tick={{ fontSize: 11 }} angle={-35} textAnchor="end" interval={0} />
                <YAxis domain={[0, 20]} tick={{ fontSize: 11 }} />
                <Tooltip
                  formatter={(v: number) => [`${v} از ۲۰`, 'میانگین']}
                  labelFormatter={(l) => `کلاس: ${l}`}
                  contentStyle={{ direction: 'rtl', fontFamily: 'Vazirmatn, Tahoma' }}
                />
                <Bar dataKey="avgScore" radius={[4, 4, 0, 0]}>
                  {gradesByClass.map((entry, i) => (
                    <Cell key={i} fill={scoreColor(entry.avgScore)} />
                  ))}
                </Bar>
              </BarChart>
            </ResponsiveContainer>
          </div>
        )}

        {/* Subject averages */}
        {subjectAverages.length > 0 && (
          <div className="panel-card">
            <h2 style={{ marginBottom: '1.25rem' }}>میانگین به تفکیک درس</h2>
            <ResponsiveContainer width="100%" height={260}>
              <BarChart data={subjectAverages} layout="vertical" margin={{ top: 0, right: 40, left: 80, bottom: 0 }}>
                <CartesianGrid strokeDasharray="3 3" stroke="var(--color-border, #333)" opacity={.3} horizontal={false} />
                <XAxis type="number" domain={[0, 20]} tick={{ fontSize: 11 }} />
                <YAxis dataKey="subject" type="category" tick={{ fontSize: 11 }} width={80} />
                <Tooltip
                  formatter={(v: number) => [`${v} از ۲۰`, 'میانگین']}
                  contentStyle={{ direction: 'rtl', fontFamily: 'Vazirmatn, Tahoma' }}
                />
                <Bar dataKey="avgScore" radius={[0, 4, 4, 0]}>
                  {subjectAverages.map((entry, i) => (
                    <Cell key={i} fill={COLORS[i % COLORS.length]} />
                  ))}
                </Bar>
              </BarChart>
            </ResponsiveContainer>
          </div>
        )}

        {/* Absence by class */}
        {absenceByClass.length > 0 && (
          <div className="panel-card">
            <h2 style={{ marginBottom: '1.25rem' }}>نرخ غیبت هر کلاس (۳۰ روز اخیر)</h2>
            <ResponsiveContainer width="100%" height={220}>
              <BarChart data={absenceByClass} margin={{ top: 0, right: 16, left: -8, bottom: 48 }}>
                <CartesianGrid strokeDasharray="3 3" stroke="var(--color-border, #333)" opacity={.3} />
                <XAxis dataKey="classroom" tick={{ fontSize: 11 }} angle={-35} textAnchor="end" interval={0} />
                <YAxis tick={{ fontSize: 11 }} unit="٪" />
                <Tooltip
                  formatter={(v: number) => [`${v}٪`, 'نرخ غیبت']}
                  contentStyle={{ direction: 'rtl', fontFamily: 'Vazirmatn, Tahoma' }}
                />
                <Bar dataKey="absenceRate" radius={[4, 4, 0, 0]} fill="#ef4444" />
              </BarChart>
            </ResponsiveContainer>
          </div>
        )}

        {/* Pass rate table */}
        {gradesByClass.length > 0 && (
          <div className="panel-card">
            <h2 style={{ marginBottom: '1rem' }}>جزئیات کلاس‌ها</h2>
            <div className="table-wrap">
              <table className="data-table">
                <thead>
                  <tr>
                    <th>کلاس</th>
                    <th>تعداد دانش‌آموز</th>
                    <th>میانگین نمره</th>
                    <th>نرخ قبولی</th>
                  </tr>
                </thead>
                <tbody>
                  {gradesByClass.map((r, i) => (
                    <tr key={i}>
                      <td>{r.classroom}</td>
                      <td>{r.studentCount}</td>
                      <td>
                        <span style={{ color: scoreColor(r.avgScore), fontWeight: 700 }}>{r.avgScore}</span>
                        <span style={{ opacity: .5 }}> از ۲۰</span>
                      </td>
                      <td>
                        <span style={{ color: r.passRate >= 70 ? '#0EA678' : r.passRate >= 50 ? '#f59e0b' : '#ef4444', fontWeight: 600 }}>
                          {r.passRate}٪
                        </span>
                      </td>
                    </tr>
                  ))}
                </tbody>
              </table>
            </div>
          </div>
        )}

        {gradesByClass.length === 0 && subjectAverages.length === 0 && (
          <div className="panel-card" style={{ textAlign: 'center', padding: '3rem' }}>
            <i className="bi bi-bar-chart" style={{ fontSize: '3rem', opacity: .3 }} />
            <p style={{ marginTop: '1rem', opacity: .6 }}>اطلاعاتی برای نمایش وجود ندارد. ابتدا نمرات تایید‌شده ثبت کنید.</p>
          </div>
        )}
      </div>
    </AppLayout>
  );
}