Untitled

"use client";

import { useEffect } from "react";
import { useForm } from "react-hook-form";
import { useCases } from "@/hooks/useCases";

type CaseFormInputs = {
  date: string;
  patient_id: number;
  protocol: string;
  doctor: string;
  diagnosis?: string;
  status: string;
  stage: string;
};

type CaseType = {
  id: number;
  date: string;
  patient_id?: number;
  patient: string;
  protocol: string;
  doctor: string;
  diagnosis: string;
  status: string;
  stage: string;
};

type Props = {
  open: boolean;
  onClose: () => void;
  editingCase?: CaseType | null;
};

export default function CaseCreateDialog({ open, onClose, editingCase }: Props) {
  const { createCase, updateCase } = useCases();

  const {
    register,
    handleSubmit,
    reset,
    formState: { errors },
  } = useForm<CaseFormInputs>();

  useEffect(() => {
    if (open) {
      if (editingCase) {
        reset({
          date: editingCase.date,
          patient_id: editingCase.patient_id || 0,
          protocol: editingCase.protocol,
          doctor: editingCase.doctor,
          diagnosis: editingCase.diagnosis,
          status: editingCase.status,
          stage: editingCase.stage,
        });
      } else {
        reset({
          date: new Date().toISOString().slice(0, 10),
          patient_id: 0,
          protocol: "",
          doctor: "",
          diagnosis: "",
          status: "Bekliyor",
          stage: "Pre-analitik",
        });
      }
    }
  }, [open, editingCase, reset]);

  const onSubmit = (data: CaseFormInputs) => {
    if (editingCase?.id) {
      updateCase.mutate({ id: editingCase.id, ...data }, { onSuccess: () => onClose() });
    } else {
      createCase.mutate(data, { onSuccess: () => onClose() });
    }
  };

  if (!open) return null;

  // Ortak input ve select stilleri
  const inputStyle = {
    background: "var(--bg-dark)",
    color: "var(--text-primary)",
    borderColor: "var(--border-dark)",
    padding: "0.5rem",
    borderRadius: "0.25rem",
  };

  return (
    <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/40">
      <div
        className="w-full max-w-lg rounded-xl p-6 shadow-xl"
        style={{
          background: "var(--bg)",
          color: "var(--text-primary)",
          border: "1px solid var(--border-light)",
        }}
      >
        <h2 className="text-lg font-semibold mb-4">
          {editingCase ? "Vaka Güncelle" : "Yeni Vaka"}
        </h2>
        <form onSubmit={handleSubmit(onSubmit)} className="grid gap-3">
          <input type="date" {...register("date", { required: true })} style={inputStyle} />
          <input
            type="number"
            placeholder="Hasta ID"
            {...register("patient_id", { required: true, min: 1 })}
            style={inputStyle}
          />
          <input placeholder="Protokol No" {...register("protocol", { required: true })} style={inputStyle} />
          <input placeholder="Hekim" {...register("doctor", { required: true })} style={inputStyle} />
          <input placeholder="Tanı (isteğe bağlı)" {...register("diagnosis")} style={inputStyle} />
          <select {...register("status")} style={inputStyle}>
            <option>Bekliyor</option>
            <option>İptal</option>
            <option>Tamamlandı</option>
          </select>
          <select {...register("stage")} style={inputStyle}>
            <option>Pre-analitik</option>
            <option>Analitik</option>
            <option>Post-analitik</option>
          </select>
          <div className="flex justify-end gap-2 pt-2">
            <button
              type="button"
              onClick={onClose}
              className="px-3 py-2 rounded"
              style={{
                background: "var(--bg-light)",
                color: "var(--text-primary)",
                border: "1px solid var(--border-dark)",
              }}
            >
              İptal
            </button>
            <button type="submit" className="px-3 py-2 rounded text-white" style={{ background: "var(--accent)" }}>
              {editingCase ? "Güncelle" : "Kaydet"}
            </button>
          </div>
        </form>
      </div>
    </div>
  );
}