"use client";

import { useActionState, useState } from "react";
import { useFormStatus } from "react-dom";
import { createCase, updateCase } from "@/lib/actions";
import {
  GROUPS,
  serviceChoices,
  specialtyById,
  SPECIALTIES,
  type Lang,
} from "@/lib/catalog";

export type CaseFormInitial = {
  id?: number;
  firstName: string;
  lastName: string;
  mobile: string;
  language: Lang;
  country: string;
  city: string;
  specialtyId: string;
  requested: string[];
  received: string[];
  centerName: string;
  summary: string;
  arrived: string;
  visitedCompany: string;
  visitedCenter: string;
  departed: string;
  internalNote: string;
  pathDates: { title: string; eventDate: string }[];
};

function Submit({ label }: { label: string }) {
  const { pending } = useFormStatus();
  return <button type="submit" disabled={pending}>{pending ? "در حال ذخیره" : label}</button>;
}

export function CaseForm({ mode, initial }: { mode: "create" | "edit"; initial: CaseFormInitial }) {
  const actionFn = mode === "create" ? createCase : updateCase;
  const [state, formAction] = useActionState(actionFn, { ok: true, message: "" });
  const [specialtyId, setSpecialtyId] = useState(initial.specialtyId);
  const [requested, setRequested] = useState(initial.requested);
  const [received, setReceived] = useState(initial.received);
  const [pathDates, setPathDates] = useState(initial.pathDates);
  const [details, setDetails] = useState({
    firstName: initial.firstName,
    lastName: initial.lastName,
    mobile: initial.mobile,
    language: initial.language,
    country: initial.country,
    city: initial.city,
    centerName: initial.centerName,
    summary: initial.summary,
    internalNote: initial.internalNote,
    arrived: initial.arrived,
    visitedCompany: initial.visitedCompany,
    visitedCenter: initial.visitedCenter,
    departed: initial.departed,
  });
  function setDetail(key: keyof typeof details, value: string) {
    setDetails((current) => ({ ...current, [key]: value }));
  }
  const specialty = specialtyById(specialtyId) ?? SPECIALTIES[0];
  const choices = serviceChoices(specialty);
  const locked = specialty.services.length === 0;
  const group = GROUPS.find((item) => item.id === specialty.groupId);

  function chooseSpecialty(id: string) {
    const next = specialtyById(id);
    if (!next) return;
    const nextLocked = next.services.length === 0;
    setSpecialtyId(id);
    setRequested(nextLocked ? [next.id] : []);
    setReceived([]);
  }

  function toggle(list: string[], id: string, checked: boolean) {
    return checked ? [...list, id] : list.filter((item) => item !== id);
  }

  return (
    <form action={formAction} className="stack">
      {initial.id ? <input type="hidden" name="id" value={initial.id} /> : null}
      {!state.ok ? <p className="alert">{state.message}</p> : null}
      <div className="fields two">
        <label>
          نام
          <input name="firstName" value={details.firstName} onChange={(event) => setDetail("firstName", event.target.value)} required maxLength={80} />
        </label>
        <label>
          نام خانوادگی
          <input name="lastName" value={details.lastName} onChange={(event) => setDetail("lastName", event.target.value)} required maxLength={80} />
        </label>
        <label>
          موبایل
          <input name="mobile" type="tel" value={details.mobile} onChange={(event) => setDetail("mobile", event.target.value)} required autoComplete="tel" />
          <span className="hint">بیمار با همین شماره وارد می‌شود. شکل ۰۹۱۲ و +98912 هر دو پذیرفته می‌شود.</span>
        </label>
        <label>
          زبان پرونده
          <select name="language" value={details.language} onChange={(event) => setDetail("language", event.target.value)}>
            <option value="fa">فارسی</option>
            <option value="en">English</option>
            <option value="ar">العربية</option>
          </select>
        </label>
        <label>
          کشور محل سکونت
          <input name="country" value={details.country} onChange={(event) => setDetail("country", event.target.value)} required maxLength={80} />
        </label>
        <label>
          شهر محل سکونت
          <input name="city" value={details.city} onChange={(event) => setDetail("city", event.target.value)} required maxLength={80} />
        </label>
        <label className="span-2">
          تخصص
          <select name="specialtyId" value={specialtyId} onChange={(event) => chooseSpecialty(event.target.value)}>
            {GROUPS.map((item) => (
              <optgroup key={item.id} label={item.fa}>
                {SPECIALTIES.filter((specialtyItem) => specialtyItem.groupId === item.id).map((specialtyItem) => (
                  <option key={specialtyItem.id} value={specialtyItem.id}>
                    {specialtyItem.fa} ({specialtyItem.en})
                  </option>
                ))}
              </optgroup>
            ))}
          </select>
          <span className="hint">گروه: {group?.fa}. هر پرونده یک تخصص دارد. برای دو تخصص، دو پرونده بسازید.</span>
        </label>
      </div>

      <fieldset>
        <legend>خدمت درخواستی</legend>
        <div className="checks">
          {locked ? <input type="hidden" name="requested" value={specialty.id} /> : null}
          {choices.map((item) => (
            <label className="plain" key={`req-${item.id}`}>
              <input
                type="checkbox"
                name={locked ? undefined : "requested"}
                value={item.id}
                checked={locked || requested.includes(item.id)}
                disabled={locked}
                onChange={(event) => setRequested(toggle(requested, item.id, event.target.checked))}
              />
              <span>{item.en}</span>
            </label>
          ))}
        </div>
      </fieldset>

      <fieldset>
        <legend>خدمت دریافت‌شده</legend>
        <div className="checks">
          {choices.map((item) => (
            <label className="plain" key={`got-${item.id}`}>
              <input
                type="checkbox"
                name="received"
                value={item.id}
                checked={received.includes(item.id)}
                onChange={(event) => setReceived(toggle(received, item.id, event.target.checked))}
              />
              <span>{item.en}</span>
            </label>
          ))}
        </div>
      </fieldset>

      <div className="fields two">
        <label>
          نام مرکز درمانی
          <input name="centerName" value={details.centerName} onChange={(event) => setDetail("centerName", event.target.value)} maxLength={200} />
        </label>
        <label>
          تاریخ ورود به ایران
          <input name="arrived" type="date" value={details.arrived} onChange={(event) => setDetail("arrived", event.target.value)} />
        </label>
        <label>
          تاریخ مراجعه به شرکت ایران هلث
          <input name="visitedCompany" type="date" value={details.visitedCompany} onChange={(event) => setDetail("visitedCompany", event.target.value)} />
        </label>
        <label>
          تاریخ مراجعه به مرکز درمانی
          <input name="visitedCenter" type="date" value={details.visitedCenter} onChange={(event) => setDetail("visitedCenter", event.target.value)} />
        </label>
        <label>
          تاریخ خروج از ایران
          <input name="departed" type="date" value={details.departed} onChange={(event) => setDetail("departed", event.target.value)} />
        </label>
      </div>

      <div>
        <h3>تاریخ‌های دیگر مسیر</h3>
        <p className="hint">عنوان را خودتان می‌نویسید. نمونه: ویزا، پرواز، مشاوره، زمان عمل، ترخیص.</p>
        {pathDates.map((row, index) => (
          <div className="path-row" key={`path-${index}`}>
            <input
              name="pathTitle"
              value={row.title}
              placeholder="عنوان"
              maxLength={80}
              onChange={(event) => {
                const next = [...pathDates];
                next[index] = { ...row, title: event.target.value };
                setPathDates(next);
              }}
            />
            <input
              name="pathDate"
              type="date"
              value={row.eventDate}
              onChange={(event) => {
                const next = [...pathDates];
                next[index] = { ...row, eventDate: event.target.value };
                setPathDates(next);
              }}
            />
            <button
              type="button"
              className="secondary"
              onClick={() => setPathDates(pathDates.filter((_, rowIndex) => rowIndex !== index))}
            >
              حذف
            </button>
          </div>
        ))}
        <button
          type="button"
          className="secondary"
          onClick={() => setPathDates([...pathDates, { title: "", eventDate: "" }])}
        >
          افزودن تاریخ
        </button>
      </div>

      <label>
        توضیح کوتاه خدمت
        <textarea name="summary" value={details.summary} onChange={(event) => setDetail("summary", event.target.value)} maxLength={2000} />
      </label>
      <label>
        یادداشت داخلی
        <textarea name="internalNote" value={details.internalNote} onChange={(event) => setDetail("internalNote", event.target.value)} maxLength={5000} />
        <span className="hint">بیمار این یادداشت را نمی‌بیند. ذخیره ویرایش، پیامک تازه نمی‌فرستد.</span>
      </label>
      <Submit label={mode === "create" ? "ذخیره پرونده" : "به‌روزرسانی پرونده"} />
    </form>
  );
}