"use client";

import { useState } from "react";
import { updateEvaluation } from "@/actions/evaluations";

interface CandidateFormProps {
  evaluationId?: string;
  candidateName: string;
  candidateRole: string;
  candidateTeam?: string;
  evaluatorName: string;
  evaluationDate: string;
  templateId: string;
  templates: { id: string; name: string }[];
  onChange: (field: string, value: string) => void;
  disabled?: boolean;
  templateDisabled?: boolean;
}

const inputClass =
  "w-full h-10 rounded-lg border border-zinc-200 dark:border-zinc-600 bg-white dark:bg-zinc-700/60 px-3 py-2 text-sm text-zinc-900 dark:text-zinc-100 placeholder-zinc-400 dark:placeholder-zinc-500 focus:border-cyan-500 focus:ring-2 focus:ring-cyan-500/20 transition-all box-border";

const labelClass = "mb-1 block text-xs font-medium text-zinc-500 dark:text-zinc-400";

const savedStyle = { borderColor: "#a855f7", boxShadow: "0 0 0 1px #a855f733" };

export function CandidateForm({
  evaluationId,
  candidateName,
  candidateRole,
  candidateTeam = "",
  evaluatorName,
  evaluationDate,
  templateId,
  templates,
  onChange,
  disabled,
  templateDisabled,
}: CandidateFormProps) {
  const [dirtyFields, setDirtyFields] = useState<Record<string, boolean>>({});
  const [savedField, setSavedField] = useState<string | null>(null);

  const markDirty = (field: string, value: string) => {
    setDirtyFields((p) => ({ ...p, [field]: true }));
    setSavedField(null);
    onChange(field, value);
  };

  const saveOnBlur = (field: string, value: string) => {
    if (!dirtyFields[field] || !evaluationId) return;
    setDirtyFields((p) => ({ ...p, [field]: false }));
    setSavedField(field);
    updateEvaluation(evaluationId, { [field]: value || null } as Parameters<typeof updateEvaluation>[1]);
    setTimeout(() => setSavedField((cur) => (cur === field ? null : cur)), 800);
  };

  const fieldStyle = (field: string) => (savedField === field ? savedStyle : undefined);

  return (
    <div className="grid gap-6 sm:grid-cols-2 lg:grid-cols-3">
      <div className="sm:col-span-2 lg:col-span-1">
        <label className={labelClass}>Candidat</label>
        <input
          type="text"
          value={candidateName}
          onChange={(e) => markDirty("candidateName", e.target.value)}
          onBlur={(e) => saveOnBlur("candidateName", e.target.value)}
          className={`${inputClass} transition-colors duration-200`}
          style={fieldStyle("candidateName")}
          disabled={disabled}
          placeholder="Alice Chen"
        />
      </div>
      <div>
        <label className={labelClass}>Rôle</label>
        <input
          type="text"
          value={candidateRole}
          onChange={(e) => markDirty("candidateRole", e.target.value)}
          onBlur={(e) => saveOnBlur("candidateRole", e.target.value)}
          className={`${inputClass} transition-colors duration-200`}
          style={fieldStyle("candidateRole")}
          disabled={disabled}
          placeholder="ML Engineer"
        />
      </div>
      <div>
        <label className={labelClass}>Équipe</label>
        <input
          type="text"
          value={candidateTeam}
          onChange={(e) => markDirty("candidateTeam", e.target.value)}
          onBlur={(e) => saveOnBlur("candidateTeam", e.target.value)}
          className={`${inputClass} transition-colors duration-200`}
          style={fieldStyle("candidateTeam")}
          disabled={disabled}
          placeholder="Peaksys"
        />
      </div>
      <div className="border-t border-zinc-200 dark:border-zinc-600 pt-4 sm:col-span-2 lg:col-span-3" />
      <div>
        <label className={labelClass}>Évaluateur</label>
        <input
          type="text"
          value={evaluatorName}
          onChange={(e) => markDirty("evaluatorName", e.target.value)}
          onBlur={(e) => saveOnBlur("evaluatorName", e.target.value)}
          className={`${inputClass} transition-colors duration-200`}
          style={fieldStyle("evaluatorName")}
          disabled={disabled}
          placeholder="Jean D."
        />
      </div>
      <div>
        <label className={labelClass}>Date</label>
        <input
          type="date"
          value={evaluationDate}
          onChange={(e) => markDirty("evaluationDate", e.target.value)}
          onBlur={(e) => saveOnBlur("evaluationDate", e.target.value)}
          className={`${inputClass} transition-colors duration-200`}
          style={fieldStyle("evaluationDate")}
          disabled={disabled}
        />
      </div>
      <div>
        <label className={labelClass}>Modèle</label>
        <select
          value={templateId}
          onChange={(e) => markDirty("templateId", e.target.value)}
          onBlur={(e) => saveOnBlur("templateId", e.target.value)}
          className={`${inputClass} transition-colors duration-200`}
          style={fieldStyle("templateId")}
          disabled={disabled || templateDisabled}
        >
          <option value="">—</option>
          {templates.map((t) => (
            <option key={t.id} value={t.id}>
              {t.name}
            </option>
          ))}
        </select>
      </div>
    </div>
  );
}
