"use client";

import { useEffect, useState } from "react";
import { api } from "@/lib/api";

interface ClassRoom {
  id: string;
  name: string;
}

interface ResultEntry {
  id: string;
  subject: { name: string };
  ca1: number;
  ca2: number;
  exam: number;
  total: number;
  grade: string;
}

interface ResultData {
  id: string;
  term: string;
  session: string;
  overallRemark: string | null;
  student: { firstName: string; lastName: string; admissionNumber: string };
  class: { name: string };
  entries: ResultEntry[];
}

const TERMS = [
  { value: "FIRST_TERM", label: "First Term" },
  { value: "SECOND_TERM", label: "Second Term" },
  { value: "THIRD_TERM", label: "Third Term" },
];

export default function ResultCheckerPage() {
  const [classes, setClasses] = useState<ClassRoom[]>([]);
  const [form, setForm] = useState({
    admissionNumber: "",
    classId: "",
    term: "FIRST_TERM",
    session: "2025/2026",
    pin: "",
    checkedByRole: "STUDENT",
  });
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState("");
  const [result, setResult] = useState<ResultData | null>(null);
  const [usesRemaining, setUsesRemaining] = useState<number | null>(null);

  useEffect(() => {
    api
      .get<ClassRoom[]>("/classes")
      .then((res) => setClasses(res.data || []))
      .catch(() => setClasses([]));
  }, []);

  async function handleSubmit(e: React.FormEvent) {
    e.preventDefault();
    setLoading(true);
    setError("");
    setResult(null);
    try {
      const res = await api.post<{ result: ResultData; pin: { usesRemaining: number } }>(
        "/result-pins/check",
        form
      );
      setResult(res.data!.result);
      setUsesRemaining(res.data!.pin.usesRemaining);
    } catch (err) {
      setError(err instanceof Error ? err.message : "Something went wrong");
    } finally {
      setLoading(false);
    }
  }

  return (
    <div className="mx-auto max-w-4xl px-4 py-14">
      <h1 className="text-3xl font-bold text-[var(--brand-blue)] mb-2">Result Checker</h1>
      <p className="text-gray-600 mb-8">
        Enter the admission number, class, term, session and a valid result-checking PIN. Each PIN works
        for one term only and can be used up to 5 times in total, whether by the student or a parent.
      </p>

      <form onSubmit={handleSubmit} className="grid sm:grid-cols-2 gap-4 bg-white border border-[var(--brand-border)] rounded-2xl p-6 shadow-sm">
        <div>
          <label className="text-sm font-medium">Admission Number</label>
          <input
            required
            value={form.admissionNumber}
            onChange={(e) => setForm({ ...form, admissionNumber: e.target.value })}
            className="mt-1 w-full rounded-md border border-[var(--brand-border)] px-3 py-2 text-sm"
            placeholder="e.g. SDC-STU-0001"
          />
        </div>

        <div>
          <label className="text-sm font-medium">Class</label>
          <select
            required
            value={form.classId}
            onChange={(e) => setForm({ ...form, classId: e.target.value })}
            className="mt-1 w-full rounded-md border border-[var(--brand-border)] px-3 py-2 text-sm"
          >
            <option value="">Select class</option>
            {classes.map((c) => (
              <option key={c.id} value={c.id}>
                {c.name}
              </option>
            ))}
          </select>
        </div>

        <div>
          <label className="text-sm font-medium">Term</label>
          <select
            value={form.term}
            onChange={(e) => setForm({ ...form, term: e.target.value })}
            className="mt-1 w-full rounded-md border border-[var(--brand-border)] px-3 py-2 text-sm"
          >
            {TERMS.map((t) => (
              <option key={t.value} value={t.value}>
                {t.label}
              </option>
            ))}
          </select>
        </div>

        <div>
          <label className="text-sm font-medium">Session</label>
          <input
            required
            value={form.session}
            onChange={(e) => setForm({ ...form, session: e.target.value })}
            className="mt-1 w-full rounded-md border border-[var(--brand-border)] px-3 py-2 text-sm"
            placeholder="e.g. 2025/2026"
          />
        </div>

        <div>
          <label className="text-sm font-medium">PIN</label>
          <input
            required
            value={form.pin}
            onChange={(e) => setForm({ ...form, pin: e.target.value.toUpperCase() })}
            className="mt-1 w-full rounded-md border border-[var(--brand-border)] px-3 py-2 text-sm tracking-widest"
            placeholder="SDC-XXXX-XXXX"
          />
        </div>

        <div>
          <label className="text-sm font-medium">Checking as</label>
          <select
            value={form.checkedByRole}
            onChange={(e) => setForm({ ...form, checkedByRole: e.target.value })}
            className="mt-1 w-full rounded-md border border-[var(--brand-border)] px-3 py-2 text-sm"
          >
            <option value="STUDENT">Student</option>
            <option value="PARENT">Parent</option>
          </select>
        </div>

        <div className="sm:col-span-2">
          <button
            type="submit"
            disabled={loading}
            className="w-full rounded-full bg-[var(--brand-magenta)] text-white py-3 font-semibold hover:bg-[var(--brand-blue)] transition-colors disabled:opacity-60"
          >
            {loading ? "Checking..." : "Check Result"}
          </button>
        </div>
      </form>

      {error && (
        <div className="mt-6 rounded-lg bg-red-50 border border-red-200 text-red-700 px-4 py-3 text-sm">
          {error}
        </div>
      )}

      {result && (
        <div className="mt-8 bg-white border border-[var(--brand-border)] rounded-2xl p-6 shadow-sm print:shadow-none" id="printable-result">
          <div className="flex justify-between items-start border-b border-[var(--brand-border)] pb-4 mb-4">
            <div>
              <h2 className="font-bold text-[var(--brand-blue)] text-lg">
                {result.student.firstName} {result.student.lastName}
              </h2>
              <p className="text-sm text-gray-600">
                Admission No: {result.student.admissionNumber} · Class: {result.class.name}
              </p>
              <p className="text-sm text-gray-600">
                {TERMS.find((t) => t.value === result.term)?.label} · {result.session}
              </p>
            </div>
            {usesRemaining !== null && (
              <span className="text-xs font-medium bg-[var(--brand-gold)]/30 text-[var(--brand-blue)] px-3 py-1 rounded-full">
                {usesRemaining} of 5 checks remaining on this PIN
              </span>
            )}
          </div>

          <table className="w-full text-sm">
            <thead>
              <tr className="text-left text-gray-500 border-b border-[var(--brand-border)]">
                <th className="py-2">Subject</th>
                <th className="py-2">CA1</th>
                <th className="py-2">CA2</th>
                <th className="py-2">Exam</th>
                <th className="py-2">Total</th>
                <th className="py-2">Grade</th>
              </tr>
            </thead>
            <tbody>
              {result.entries.map((e) => (
                <tr key={e.id} className="border-b border-[var(--brand-border)]">
                  <td className="py-2">{e.subject.name}</td>
                  <td className="py-2">{e.ca1}</td>
                  <td className="py-2">{e.ca2}</td>
                  <td className="py-2">{e.exam}</td>
                  <td className="py-2 font-semibold">{e.total}</td>
                  <td className="py-2">{e.grade}</td>
                </tr>
              ))}
            </tbody>
          </table>

          {result.overallRemark && (
            <p className="mt-4 text-sm text-gray-700">
              <span className="font-semibold">Remark:</span> {result.overallRemark}
            </p>
          )}

          <button
            onClick={() => window.print()}
            className="mt-6 rounded-full border border-[var(--brand-blue)] text-[var(--brand-blue)] px-5 py-2 text-sm font-semibold hover:bg-[var(--brand-blue)] hover:text-white transition-colors print:hidden"
          >
            Print / Save as PDF
          </button>
        </div>
      )}
    </div>
  );
}