import { useState } from 'react';
import { router } from '@inertiajs/react';
import { AppLayout } from '@/Components/Layout/AppLayout';
import { LineChart, Line, XAxis, YAxis, Tooltip, Legend, ResponsiveContainer } from 'recharts';

type Grade = {
  id: number;
  score: number;
  maxScore: number;
  subject: string;
  examTitle: string | null;
  description: string | null;
  status: 'submitted' | 'approved' | 'rejected';
  rejectReason: string | null;
  teacherComment: string | null;
  approvedAt: string | null;
  term: number | null;
  objectionStatus: string | null;
};

type SchoolYear = { id: number; title: string };

type Props = {
  grades: Grade[];
  average: number | null;
  eterazEnabledForLevel: boolean;
  myObjections: Record<number, string>;
  schoolYears: SchoolYear[];
  selectedYear: number | null;
};

function scoreColor(score: number, max: number) {
  const pct = (score / max) * 100;
  if (pct >= 70) return 'var(--color-primary-active)';
  if (pct >= 50) return '#f59e0b';
  return '#ef4444';
}

const statusMeta = {
  approved: { label: 'تایید شده', icon: 'bi-patch-check-fill', color: '#16a34a' },
  submitted: { label: 'در انتظار تایید', icon: 'bi-hourglass-split', color: '#d97706' },
  rejected: { label: 'رد شده', icon: 'bi-x-circle-fill', color: '#dc2626' },
};

type ObjectionFormState = { gradeId: number; reason: string } | null;

export default function StudentGrades({
  grades,
  average,
  eterazEnabledForLevel,
  schoolYears,
  selectedYear,
}: Props) {
  const [objectionForm, setObjectionForm] = useState<ObjectionFormState>(null);
  const [submitting, setSubmitting] = useState(false);

  function filterYear(yearId: number | '') {
    router.get('/student/grades', yearId ? { year: yearId } : {}, { preserveScroll: false });
  }

  function submitObjection(gradeId: number) {
    if (! objectionForm || objectionForm.gradeId !== gradeId || ! objectionForm.reason.trim()) return;
    setSubmitting(true);
    router.post(
      `/student/grades/${gradeId}/eteraz`,
      { reason: objectionForm.reason },
      {
        onFinish: () => { setSubmitting(false); setObjectionForm(null); },
      }
    );
  }

  const approvedCount = grades.filter((g) => g.status === 'approved').length;
  const pendingCount = grades.filter((g) => g.status === 'submitted').length;
  const rejectedCount = grades.filter((g) => g.status === 'rejected').length;

  // Chart: group approved grades by subject, chronological
  const approvedGrades = [...grades].filter((g) => g.status === 'approved').reverse();
  const subjectNames = [...new Set(approvedGrades.map((g) => g.subject))];
  const CHART_COLORS = ['#0ea5e9', '#16a34a', '#d97706', '#8b5cf6', '#ef4444', '#ec4899'];
  // Group by subject → array of pcts in chronological order
  const subjectGrades: Record<string, number[]> = {};
  approvedGrades.forEach((g) => {
    if (!subjectGrades[g.subject]) subjectGrades[g.subject] = [];
    subjectGrades[g.subject].push(Math.round((g.score / g.maxScore) * 100));
  });
  const maxLen = subjectNames.length > 0 ? Math.max(...subjectNames.map((s) => subjectGrades[s]?.length ?? 0)) : 0;
  const chartData: Record<string, number | string>[] = Array.from({ length: maxLen }, (_, i) => {
    const point: Record<string, number | string> = { name: String(i + 1) };
    subjectNames.forEach((s) => {
      const val = subjectGrades[s]?.[i];
      if (val !== undefined) point[s] = val;
    });
    return point;
  });
  const showChart = approvedGrades.length >= 2 && subjectNames.length > 0;

  return (
    <AppLayout title="نمرات">
      <div className="page-stack">
        <section className="section-header">
          <div>
            <h2>
              <i className="bi bi-patch-check" style={{ marginLeft: '0.5rem', color: 'var(--color-primary)' }} />
              نمرات
            </h2>
            <p>وضعیت کلیه نمرات ثبت‌شده توسط معلمان</p>
          </div>
          {average !== null && (
            <div
              style={{
                display: 'flex',
                flexDirection: 'column',
                alignItems: 'center',
                background: 'var(--color-primary-soft)',
                borderRadius: 'var(--radius-md)',
                padding: '0.75rem 1.25rem',
                minWidth: 100,
              }}
            >
              <span style={{ fontSize: '0.8rem', color: 'var(--color-text-muted)' }}>میانگین تایید‌شده</span>
              <strong style={{ fontSize: '1.5rem', color: 'var(--color-primary-active)', lineHeight: 1.2 }}>
                {average.toFixed(1)}
              </strong>
              <span style={{ fontSize: '0.75rem', color: 'var(--color-text-muted)' }}>از ۲۰</span>
            </div>
          )}
        </section>

        {/* Stats + filter row */}
        <div style={{ display: 'flex', gap: '0.75rem', flexWrap: 'wrap', alignItems: 'center' }}>
          <StatChip icon="bi-patch-check-fill" color="#16a34a" label="تایید شده" count={approvedCount} />
          <StatChip icon="bi-hourglass-split" color="#d97706" label="در انتظار" count={pendingCount} />
          <StatChip icon="bi-x-circle-fill" color="#dc2626" label="رد شده" count={rejectedCount} />

          {schoolYears.length > 0 && (
            <div style={{ marginRight: 'auto', display: 'flex', gap: '0.5rem', alignItems: 'center' }}>
              <label style={{ fontSize: '0.85rem', color: 'var(--color-text-muted)' }}>سال تحصیلی:</label>
              <select
                value={selectedYear ?? ''}
                onChange={(e) => filterYear(e.target.value === '' ? '' : Number(e.target.value))}
                style={{
                  border: '1px solid var(--color-border)',
                  borderRadius: 'var(--radius-sm)',
                  padding: '0.3rem 0.6rem',
                  background: 'var(--color-surface)',
                  color: 'var(--color-text)',
                  fontSize: '0.85rem',
                }}
              >
                <option value="">همه سال‌ها</option>
                {schoolYears.map((y) => (
                  <option key={y.id} value={y.id}>{y.title}</option>
                ))}
              </select>
            </div>
          )}
        </div>

        {showChart && (
          <section className="panel-card">
            <h3 style={{ marginBottom: '1rem', fontSize: '0.95rem' }}>
              <i className="bi bi-graph-up" style={{ marginLeft: '0.4rem', color: 'var(--color-primary)' }} />
              روند نمرات (درصد)
            </h3>
            <ResponsiveContainer width="100%" height={200}>
              <LineChart data={chartData} margin={{ top: 5, right: 10, left: -20, bottom: 5 }}>
                <XAxis dataKey="name" tick={{ fontSize: 11 }} />
                <YAxis domain={[0, 100]} tick={{ fontSize: 11 }} tickFormatter={(v) => `${v}%`} />
                <Tooltip formatter={(v: number) => `${v}%`} />
                <Legend wrapperStyle={{ fontSize: '0.8rem' }} />
                {subjectNames.map((sub, i) => (
                  <Line
                    key={sub}
                    type="monotone"
                    dataKey={sub}
                    stroke={CHART_COLORS[i % CHART_COLORS.length]}
                    strokeWidth={2}
                    dot={{ r: 4 }}
                    connectNulls
                  />
                ))}
              </LineChart>
            </ResponsiveContainer>
          </section>
        )}

        {grades.length === 0 ? (
          <section className="panel-card">
            <div style={{ textAlign: 'center', padding: '2rem 1rem' }}>
              <div className="icon-badge" style={{ width: 56, height: 56, fontSize: '1.5rem', margin: '0 auto 1rem' }}>
                <i className="bi bi-patch-check" />
              </div>
              <h2>نمره‌ای ثبت نشده</h2>
              <p>هنوز نمره‌ای توسط معلم برای شما ثبت نشده است.</p>
            </div>
          </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>
                    {eterazEnabledForLevel && <th>اعتراض</th>}
                  </tr>
                </thead>
                <tbody>
                  {grades.map((g) => {
                    const normalized = (g.score / g.maxScore) * 20;
                    const pct = Math.round((g.score / g.maxScore) * 100);
                    const scoreClr = scoreColor(g.score, g.maxScore);
                    const meta = statusMeta[g.status] ?? statusMeta.submitted;
                    const showObjForm = objectionForm?.gradeId === g.id;

                    return (
                      <>
                        <tr key={g.id}>
                          <td style={{ fontWeight: 600 }}>{g.subject}</td>
                          <td style={{ color: 'var(--color-text-muted)', fontSize: '0.875rem' }}>
                            {g.examTitle ?? (g.description ?? '—')}
                          </td>
                          <td>
                            <div style={{ display: 'flex', alignItems: 'center', gap: '0.5rem' }}>
                              <strong style={{ color: scoreClr, fontSize: '1rem', minWidth: 40 }}>
                                {g.score.toFixed(1)}
                              </strong>
                              <span style={{ color: 'var(--color-text-muted)', fontSize: '0.8rem' }}>/ {g.maxScore}</span>
                              <div style={{ flex: 1, minWidth: 60, height: 6, background: 'var(--color-border)', borderRadius: 99, overflow: 'hidden' }}>
                                <div style={{ height: '100%', width: `${pct}%`, background: scoreClr, borderRadius: 99 }} />
                              </div>
                            </div>
                            {g.maxScore !== 20 && (
                              <div style={{ fontSize: '0.75rem', color: 'var(--color-text-muted)' }}>معادل ۲۰: {normalized.toFixed(1)}</div>
                            )}
                          </td>
                          <td>
                            <span style={{ background: meta.color + '18', color: meta.color, border: `1px solid ${meta.color}30`, borderRadius: 'var(--radius-sm)', padding: '0.2rem 0.55rem', fontSize: '0.78rem', fontWeight: 600, display: 'inline-flex', alignItems: 'center', gap: '0.3rem' }}>
                              <i className={meta.icon} />
                              {meta.label}
                            </span>
                            {g.status === 'rejected' && g.rejectReason && (
                              <div style={{ fontSize: '0.78rem', color: '#dc2626', marginTop: '0.2rem', maxWidth: 200 }}>
                                دلیل: {g.rejectReason}
                              </div>
                            )}
                            {g.teacherComment && (
                              <div style={{ fontSize: '0.78rem', color: 'var(--color-text-muted)', marginTop: '0.2rem', fontStyle: 'italic' }}>
                                نظر معلم: {g.teacherComment}
                              </div>
                            )}
                          </td>
                          <td style={{ color: 'var(--color-text-muted)', fontSize: '0.85rem' }}>
                            {g.approvedAt ?? '—'}
                          </td>
                          {eterazEnabledForLevel && (
                            <td>
                              {g.status === 'approved' && (
                                g.objectionStatus ? (
                                  <ObjectionStatusBadge status={g.objectionStatus} />
                                ) : (
                                  <button
                                    type="button"
                                    onClick={() => setObjectionForm(showObjForm ? null : { gradeId: g.id, reason: '' })}
                                    style={{ fontSize: '0.8rem', padding: '0.2rem 0.6rem', borderRadius: 'var(--radius-sm)', border: '1px solid #d97706', color: '#d97706', background: '#d9770610', cursor: 'pointer' }}
                                  >
                                    <i className="bi bi-megaphone" style={{ marginLeft: '0.25rem' }} />
                                    {showObjForm ? 'انصراف' : 'ثبت اعتراض'}
                                  </button>
                                )
                              )}
                            </td>
                          )}
                        </tr>
                        {showObjForm && (
                          <tr key={`eteraz-${g.id}`}>
                            <td colSpan={eterazEnabledForLevel ? 6 : 5} style={{ background: 'var(--color-bg-subtle)', padding: '0.75rem 1rem' }}>
                              <div style={{ display: 'flex', gap: '0.5rem', alignItems: 'flex-start' }}>
                                <textarea
                                  rows={3}
                                  placeholder="دلیل اعتراض خود را توضیح دهید (حداقل ۱۰ کاراکتر)..."
                                  value={objectionForm?.reason ?? ''}
                                  onChange={(e) => setObjectionForm((p) => p ? { ...p, reason: e.target.value } : p)}
                                  style={{ flex: 1, border: '1px solid var(--color-border)', borderRadius: 'var(--radius-sm)', padding: '0.5rem', background: 'var(--color-surface)', color: 'var(--color-text)', fontSize: '0.875rem', resize: 'vertical' }}
                                />
                                <button
                                  type="button"
                                  disabled={submitting || ! objectionForm?.reason || objectionForm.reason.length < 10}
                                  onClick={() => submitObjection(g.id)}
                                  className="btn btn-primary"
                                  style={{ whiteSpace: 'nowrap' }}
                                >
                                  {submitting ? 'در حال ارسال...' : 'ثبت اعتراض'}
                                </button>
                              </div>
                            </td>
                          </tr>
                        )}
                      </>
                    );
                  })}
                </tbody>
              </table>
            </div>
          </section>
        )}
      </div>
    </AppLayout>
  );
}

function StatChip({ icon, color, label, count }: { icon: string; color: string; label: string; count: number }) {
  return (
    <div style={{ display: 'inline-flex', alignItems: 'center', gap: '0.4rem', background: color + '15', color, border: `1px solid ${color}30`, borderRadius: 'var(--radius-sm)', padding: '0.3rem 0.7rem', fontSize: '0.82rem', fontWeight: 600 }}>
      <i className={icon} />
      {label}: {count}
    </div>
  );
}

function ObjectionStatusBadge({ status }: { status: string }) {
  const map: Record<string, { label: string; color: string }> = {
    pending:  { label: 'اعتراض ثبت‌شده', color: '#d97706' },
    approved: { label: 'اعتراض پذیرفته شد', color: '#16a34a' },
    rejected: { label: 'اعتراض رد شد', color: '#dc2626' },
  };
  const m = map[status] ?? map.pending;
  return (
    <span style={{ fontSize: '0.78rem', color: m.color, fontStyle: 'italic' }}>
      <i className="bi bi-chat-square-text" style={{ marginLeft: '0.25rem' }} />
      {m.label}
    </span>
  );
}