"use client";

import { useState } from "react";
import type { AdminCaseDetail } from "@/lib/admin-types";
import ShapFactorsChart from "@/components/scoring/ShapFactorsChart";

interface Props {
  caseDetail: AdminCaseDetail;
  onOverride: (payload: { score: number; outcome: string; notes: string }) => Promise<void>;
}

export default function ScoringOverridePanel({ caseDetail, onOverride }: Props) {
  const [score, setScore] = useState(String(caseDetail.scoring.score ?? 700));
  const [outcome, setOutcome] = useState(caseDetail.scoring.eligibilityOutcome ?? "eligible");
  const [notes, setNotes] = useState(caseDetail.scoring.scoringMeta?.officerOverride?.notes ?? "");
  const [saving, setSaving] = useState(false);
  const [message, setMessage] = useState("");

  const submit = async () => {
    setSaving(true);
    setMessage("");
    try {
      await onOverride({ score: Number(score), outcome, notes });
      setMessage("Scoring override saved.");
    } catch (e: unknown) {
      setMessage(e instanceof Error ? e.message : "Override failed");
    } finally {
      setSaving(false);
    }
  };

  return (
    <div className="space-y-6">
      <section className="rounded-xl border border-[#042718]/8 bg-white p-5 space-y-4">
        <h3 className="font-onest text-lg font-semibold text-[#042718]">Scoring detail</h3>
        <div className="grid grid-cols-2 sm:grid-cols-4 gap-3">
          {[
            ["Score", caseDetail.scoring.score ?? "—"],
            ["Outcome", caseDetail.scoring.eligibilityOutcome ?? "—"],
            ["Risk rating", caseDetail.scoring.scoringMeta?.riskRating ?? "—"],
            ["Model", caseDetail.scoring.scoringMeta?.modelVersion ?? "—"],
          ].map(([label, value]) => (
            <div key={label} className="rounded-lg bg-[#042718]/[0.03] px-3 py-2">
              <p className="font-inter text-[10px] uppercase tracking-wide text-[#042718]/40">{label}</p>
              <p className="font-inter text-sm font-medium text-[#042718]">{value}</p>
            </div>
          ))}
        </div>

        {caseDetail.scoring.reasonCodes.length > 0 && (
          <div>
            <p className="font-inter text-xs font-medium text-[#042718]/50 uppercase tracking-wide mb-2">
              SHAP factors
            </p>
            <ShapFactorsChart factors={caseDetail.scoring.reasonCodes} locale="uz" maxItems={5} />
          </div>
        )}
      </section>

      <section className="rounded-xl border border-[#042718]/8 bg-white p-5 space-y-4">
        <h3 className="font-onest text-lg font-semibold text-[#042718]">Officer override</h3>
        <p className="font-inter text-sm text-[#042718]/60">
          Adjust the credit score or eligibility outcome. Changes are logged for audit.
        </p>

        <div className="grid grid-cols-1 sm:grid-cols-3 gap-3">
          <div>
            <label htmlFor="override-score" className="block font-inter text-xs text-[#042718]/60 mb-1">
              Score
            </label>
            <input
              id="override-score"
              type="number"
              min={300}
              max={900}
              value={score}
              onChange={(e) => setScore(e.target.value)}
              className="w-full px-3 py-2 rounded-lg border border-[#042718]/10 font-inter text-sm"
            />
          </div>
          <div>
            <label htmlFor="override-outcome" className="block font-inter text-xs text-[#042718]/60 mb-1">
              Outcome
            </label>
            <select
              id="override-outcome"
              value={outcome}
              onChange={(e) => setOutcome(e.target.value)}
              className="w-full px-3 py-2 rounded-lg border border-[#042718]/10 font-inter text-sm"
            >
              <option value="eligible">Eligible</option>
              <option value="conditional">Conditional</option>
              <option value="ineligible">Ineligible</option>
            </select>
          </div>
          <div className="sm:col-span-1">
            <label htmlFor="override-notes" className="block font-inter text-xs text-[#042718]/60 mb-1">
              Notes
            </label>
            <input
              id="override-notes"
              type="text"
              value={notes}
              onChange={(e) => setNotes(e.target.value)}
              placeholder="Reason for override"
              className="w-full px-3 py-2 rounded-lg border border-[#042718]/10 font-inter text-sm"
            />
          </div>
        </div>

        <button
          type="button"
          onClick={submit}
          disabled={saving}
          className="px-5 py-2.5 rounded-full bg-[#042718] text-white font-inter text-sm font-medium hover:bg-[#042718]/90 disabled:opacity-50 cursor-pointer"
        >
          {saving ? "Saving…" : "Apply override"}
        </button>

        {message && <p className="font-inter text-sm text-[#198F38]">{message}</p>}

        {caseDetail.scoring.scoringMeta?.officerOverride && (
          <p className="font-inter text-xs text-[#042718]/40">
            Last override by {caseDetail.scoring.scoringMeta.officerOverride.officerId} at{" "}
            {new Date(caseDetail.scoring.scoringMeta.officerOverride.overriddenAt).toLocaleString()}
          </p>
        )}
      </section>
    </div>
  );
}