"use client";

import { useState } from "react";
import { useRouter } from "next/navigation";
import { TRADES, getTradeByCode } from "@/lib/constants";
import { calculateResult } from "@/lib/result-calculator";

export default function NewTraineePage() {
  const router = useRouter();
  const [tradeCode, setTradeCode] = useState<string>("CT");
  const [regNo, setRegNo] = useState("");
  const [candidateName, setCandidateName] = useState("");
  const [dob, setDob] = useState("");
  const [saving, setSaving] = useState(false);
  const [error, setError] = useState<string | null>(null);

  // Subject marks state: record of subject name -> obtained
  const [subjectMarks, setSubjectMarks] = useState<Record<string, number>>({});

  const activeTrade = getTradeByCode(tradeCode) || TRADES[0];

  // Compute live result
  const rawSubjects = activeTrade.subjects.map((s) => ({
    name: s.name,
    obtained: subjectMarks[s.name] ?? 0,
  }));
  const liveCalc = calculateResult(activeTrade.code, rawSubjects);

  function handleTradeChange(newCode: string) {
    setTradeCode(newCode);
    setSubjectMarks({});
    setError(null);
  }

  function handleMarkChange(subjectName: string, max: number, value: string) {
    const num = Math.max(0, Math.min(max, Number(value) || 0));
    setSubjectMarks((prev) => ({ ...prev, [subjectName]: num }));
  }

  async function handleSubmit(e: React.FormEvent) {
    e.preventDefault();
    setError(null);

    if (!regNo.trim()) {
      setError("Please enter a valid Registration Number.");
      return;
    }
    if (!candidateName.trim()) {
      setError("Please enter the Trainee Name.");
      return;
    }
    if (!dob.trim()) {
      setError("Please enter Date of Birth.");
      return;
    }

    setSaving(true);
    try {
      const res = await fetch("/api/admin/trainees", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({
          regNo: regNo.trim(),
          candidateName: candidateName.trim(),
          fatherName: "—",
          dob: dob.trim(),
          tradeCode: activeTrade.code,
          subjects: rawSubjects,
        }),
      });

      const json = await res.json();
      if (!json.ok) {
        setError(json.error || "Failed to save trainee record");
        return;
      }

      router.push("/admin/trainees");
    } catch {
      setError("Network error. Please try again.");
    } finally {
      setSaving(false);
    }
  }

  return (
    <div className="mx-auto max-w-4xl space-y-6">
      {/* Header */}
      <div className="flex items-center justify-between border-b border-ink/15 pb-4">
        <div>
          <h1 className="font-display text-2xl font-bold text-maroon-950">
            Add Trainee Result Entry
          </h1>
          <p className="text-xs text-ink/60">
            Industrial School Common Examination July 2026 · Result Entry
          </p>
        </div>
        <button
          type="button"
          onClick={() => router.back()}
          className="rounded-sm border border-ink/25 px-3 py-1.5 text-xs font-semibold text-ink/80 hover:bg-white"
        >
          ← Back to List
        </button>
      </div>

      <form onSubmit={handleSubmit} className="space-y-6">
        {/* Trainee Details Card */}
        <div className="card-shadow rounded-md border border-ink/15 bg-white p-6">
          <h2 className="text-xs font-bold uppercase tracking-[0.2em] text-maroon-900">
            1. Trainee Information
          </h2>

          <div className="mt-4 grid gap-4 sm:grid-cols-2">
            {/* Trade Selector */}
            <div className="sm:col-span-2">
              <label
                htmlFor="trade-select"
                className="block text-xs font-bold uppercase tracking-wider text-ink/75"
              >
                Trade / Course <span className="text-maroon-700">*</span>
              </label>
              <select
                id="trade-select"
                value={tradeCode}
                onChange={(e) => handleTradeChange(e.target.value)}
                className="mt-1.5 w-full rounded-sm border border-ink/30 bg-gold-50/50 px-4 py-2.5 text-sm font-semibold text-maroon-950 outline-none focus:border-maroon-900 focus:ring-1 focus:ring-maroon-900"
              >
                {TRADES.map((t) => (
                  <option key={t.code} value={t.code}>
                    {t.name} ({t.code}) — {t.totalSubjects} Subjects (Max: {t.totalMax})
                  </option>
                ))}
              </select>
            </div>

            {/* Registration Number */}
            <div>
              <label
                htmlFor="reg-no"
                className="block text-xs font-bold uppercase tracking-wider text-ink/75"
              >
                Registration Number <span className="text-maroon-700">*</span>
              </label>
              <input
                id="reg-no"
                type="text"
                value={regNo}
                onChange={(e) => setRegNo(e.target.value.toUpperCase())}
                placeholder="e.g. SMT/2026/CT/0101"
                required
                className="mt-1.5 w-full rounded-sm border border-ink/30 px-3.5 py-2 font-mono text-sm tracking-wider text-ink outline-none focus:border-maroon-900 focus:ring-1 focus:ring-maroon-900"
              />
            </div>

            {/* Trainee Name */}
            <div>
              <label
                htmlFor="candidate-name"
                className="block text-xs font-bold uppercase tracking-wider text-ink/75"
              >
                Trainee Name (Candidate) <span className="text-maroon-700">*</span>
              </label>
              <input
                id="candidate-name"
                type="text"
                value={candidateName}
                onChange={(e) => setCandidateName(e.target.value.toUpperCase())}
                placeholder="e.g. S. ANITHA"
                required
                className="mt-1.5 w-full rounded-sm border border-ink/30 px-3.5 py-2 font-display text-sm font-semibold text-ink outline-none focus:border-maroon-900 focus:ring-1 focus:ring-maroon-900"
              />
            </div>

            {/* Date of Birth */}
            <div className="sm:col-span-2">
              <label
                htmlFor="dob"
                className="block text-xs font-bold uppercase tracking-wider text-ink/75"
              >
                Date of Birth (YYYY-MM-DD) <span className="text-maroon-700">*</span>
              </label>
              <input
                id="dob"
                type="date"
                value={dob}
                onChange={(e) => setDob(e.target.value)}
                required
                className="mt-1.5 w-full rounded-sm border border-ink/30 px-3.5 py-2 text-sm text-ink outline-none focus:border-maroon-900 focus:ring-1 focus:ring-maroon-900"
              />
            </div>
          </div>
        </div>

        {/* Dynamic Subject Marks Entry Table */}
        <div className="card-shadow rounded-md border border-ink/15 bg-white p-6">
          <div className="flex items-center justify-between border-b border-ink/10 pb-3">
            <div>
              <h2 className="text-xs font-bold uppercase tracking-[0.2em] text-maroon-900">
                2. Subject-wise Marks Entry ({activeTrade.name})
              </h2>
              <p className="text-[11px] text-ink/60">
                Minimum pass mark is strictly enforced per official Department of Employment and
                Training guidelines.
              </p>
            </div>
            <span className="rounded-xs bg-gold-100 px-3 py-1 font-mono text-xs font-bold text-maroon-950">
              {activeTrade.totalSubjects} Subjects
            </span>
          </div>

          <div className="mt-4 overflow-x-auto">
            <table className="w-full border-collapse text-left text-xs sm:text-sm">
              <thead>
                <tr className="bg-maroon-900 text-cream text-[10px] uppercase tracking-wider">
                  <th className="px-3 py-2.5 text-center w-12">#</th>
                  <th className="px-4 py-2.5">Subject Name</th>
                  <th className="px-3 py-2.5 text-center w-24">Max Marks</th>
                  <th className="px-3 py-2.5 text-center w-24">Min Pass</th>
                  <th className="px-4 py-2.5 text-center w-36">Marks Secured</th>
                  <th className="px-3 py-2.5 text-center w-24">Status</th>
                </tr>
              </thead>
              <tbody className="divide-y divide-ink/10">
                {activeTrade.subjects.map((sub, idx) => {
                  const currentVal = subjectMarks[sub.name] ?? "";
                  const numVal = Number(currentVal) || 0;
                  const isPass = numVal >= sub.minPass;

                  return (
                    <tr key={sub.name} className={idx % 2 === 0 ? "bg-white" : "bg-cream/40"}>
                      <td className="px-3 py-2.5 text-center font-mono text-xs text-ink/60">
                        {idx + 1}
                      </td>
                      <td className="px-4 py-2.5">
                        <span className="font-semibold text-ink">{sub.name}</span>
                        {sub.tamil && (
                          <span className="font-tamil block text-[11px] text-ink/50">
                            {sub.tamil}
                          </span>
                        )}
                      </td>
                      <td className="px-3 py-2.5 text-center font-mono text-ink/70">{sub.max}</td>
                      <td className="px-3 py-2.5 text-center font-mono font-bold text-maroon-900">
                        {sub.minPass}
                      </td>
                      <td className="px-4 py-2.5 text-center">
                        <input
                          type="number"
                          min="0"
                          max={sub.max}
                          value={currentVal}
                          onChange={(e) => handleMarkChange(sub.name, sub.max, e.target.value)}
                          placeholder="0"
                          className="w-24 rounded-sm border border-ink/30 px-2 py-1 text-center font-mono text-sm font-bold text-ink focus:border-maroon-900 focus:ring-1 focus:ring-maroon-900"
                        />
                      </td>
                      <td className="px-3 py-2.5 text-center">
                        <span
                          className={`inline-block rounded-xs px-2 py-0.5 text-[10px] font-bold ${
                            isPass
                              ? "bg-forest-100 text-forest-800 border border-forest-600/30"
                              : "bg-maroon-100 text-maroon-900 border border-maroon-600/30"
                          }`}
                        >
                          {isPass ? "PASS" : "FAIL"}
                        </span>
                      </td>
                    </tr>
                  );
                })}
              </tbody>
            </table>
          </div>

          {/* Live Calculated Summary */}
          <div className="mt-5 grid grid-cols-2 gap-3 rounded-sm border border-gold-600/40 bg-gold-50/70 p-4">
            <div>
              <span className="text-[10px] font-bold uppercase tracking-wider text-ink/60">
                Total Marks Secured:
              </span>
              <p className="font-mono text-xl font-black text-maroon-950">
                {liveCalc.totalObtained} / {liveCalc.totalMax}
              </p>
            </div>

            <div>
              <span className="text-[10px] font-bold uppercase tracking-wider text-ink/60">
                Final Result Status:
              </span>
              <p
                className={`font-display text-xl font-black ${
                  liveCalc.resultStatus === "PASS" ? "text-forest-800" : "text-maroon-900"
                }`}
              >
                {liveCalc.resultStatus}
              </p>
            </div>
          </div>
        </div>

        {/* Error Banner */}
        {error && (
          <div className="rounded-sm border border-maroon-800/40 bg-maroon-50 p-3.5 text-xs font-semibold text-maroon-900">
            {error}
          </div>
        )}

        {/* Form Actions */}
        <div className="flex items-center gap-3">
          <button
            type="submit"
            disabled={saving}
            className="rounded-md bg-maroon-900 px-8 py-3 text-xs font-bold uppercase tracking-[0.18em] text-cream shadow-md transition-all hover:bg-maroon-800 disabled:opacity-60"
          >
            {saving ? "Saving Result…" : "Save & Publish Result"}
          </button>
          <button
            type="button"
            onClick={() => router.push("/admin/trainees")}
            className="rounded-md border border-ink/25 px-6 py-3 text-xs font-semibold uppercase tracking-wider text-ink/70 hover:bg-white"
          >
            Cancel
          </button>
        </div>
      </form>
    </div>
  );
}