"use client";

import { useEffect, useState, useTransition } from "react";
import { useRouter } from "next/navigation";

type PersonMode = "active" | "paused" | "on_leave";

function modeButtonClass(selected: boolean) {
  return selected
    ? "border-stone-900 bg-stone-900 text-white shadow-sm"
    : "border-transparent text-stone-500";
}

function mealButtonClass(selected: boolean) {
  return selected
    ? "border-stone-500 bg-stone-200 text-stone-900"
    : "border-stone-200 bg-stone-50 text-stone-500";
}

export function PersonDetailControls({
  person,
  setPersonModeAction,
  togglePersonMealAction,
  adjustPersonMandaziQtyAction,
  setPersonLeaveDateAction
}: {
  person: {
    id: number;
    takesLunch: boolean;
    takesMandazi: boolean;
    defaultMandaziQty: number;
    leaveStart: Date | null;
    leaveEnd: Date | null;
    currentMode: PersonMode;
  };
  setPersonModeAction: (formData: FormData) => Promise<void>;
  togglePersonMealAction: (formData: FormData) => Promise<void>;
  adjustPersonMandaziQtyAction: (formData: FormData) => Promise<void>;
  setPersonLeaveDateAction: (formData: FormData) => Promise<void>;
}) {
  const router = useRouter();
  const [isPending, startTransition] = useTransition();
  const [selectedMode, setSelectedMode] = useState<PersonMode>(person.currentMode);
  const [meals, setMeals] = useState({
    lunch: person.takesLunch,
    mandazi: person.takesMandazi
  });

  useEffect(() => {
    setSelectedMode(person.currentMode);
    setMeals({
      lunch: person.takesLunch,
      mandazi: person.takesMandazi
    });
  }, [person.currentMode, person.takesLunch, person.takesMandazi]);

  function runAction(buildFormData: () => FormData) {
    startTransition(async () => {
      const formData = buildFormData();
      if (formData.get("mode")) {
        await setPersonModeAction(formData);
      } else if (formData.get("delta")) {
        await adjustPersonMandaziQtyAction(formData);
      } else if (formData.get("meal")) {
        await togglePersonMealAction(formData);
      } else {
        await setPersonLeaveDateAction(formData);
      }
      router.refresh();
    });
  }

  function setMode(mode: PersonMode) {
    setSelectedMode(mode);
    startTransition(async () => {
      const formData = new FormData();
      formData.set("personId", String(person.id));
      formData.set("mode", mode);
      await setPersonModeAction(formData);
      router.refresh();
    });
  }

  function toggleMeal(meal: "lunch" | "mandazi") {
    const nextValue = !meals[meal];
    setMeals((current) => ({
      ...current,
      [meal]: nextValue
    }));
    startTransition(async () => {
      const formData = new FormData();
      formData.set("personId", String(person.id));
      formData.set("meal", meal);
      formData.set("enabled", String(nextValue));
      await togglePersonMealAction(formData);
      router.refresh();
    });
  }

  return (
    <div className="space-y-4">
      <div className="space-y-2">
        <p className="text-xs font-medium uppercase tracking-[0.08em] text-[var(--muted)]">Status</p>
        <div className="inline-flex rounded-xl border border-stone-200 bg-stone-50 p-1">
          {[
            { label: "Active", value: "active" as PersonMode },
            { label: "Pause", value: "paused" as PersonMode },
            { label: "On leave", value: "on_leave" as PersonMode }
          ].map((option) => (
            <button
              key={option.value}
              type="button"
              disabled={isPending}
              onClick={() => setMode(option.value)}
              className={`rounded-lg px-2.5 py-1.5 text-xs font-medium transition disabled:opacity-60 ${modeButtonClass(
                selectedMode === option.value
              )}`}
            >
              {option.label}
            </button>
          ))}
        </div>
      </div>

      {selectedMode === "on_leave" ? (
        <div className="grid gap-3">
          <label className="grid gap-1">
            <span className="text-xs font-medium uppercase tracking-[0.08em] text-[var(--muted)]">Leave start</span>
            <input
              type="date"
              defaultValue={person.leaveStart ? person.leaveStart.toISOString().split("T")[0] : ""}
              disabled={isPending}
              onChange={(event) =>
                runAction(() => {
                  const formData = new FormData();
                  formData.set("personId", String(person.id));
                  formData.set("field", "leaveStart");
                  formData.set("value", event.currentTarget.value);
                  return formData;
                })
              }
              className="rounded-lg border border-stone-200 bg-white px-3 py-2 text-sm disabled:opacity-60"
            />
          </label>
          <label className="grid gap-1">
            <span className="text-xs font-medium uppercase tracking-[0.08em] text-[var(--muted)]">Leave end</span>
            <input
              type="date"
              defaultValue={person.leaveEnd ? person.leaveEnd.toISOString().split("T")[0] : ""}
              disabled={isPending}
              onChange={(event) =>
                runAction(() => {
                  const formData = new FormData();
                  formData.set("personId", String(person.id));
                  formData.set("field", "leaveEnd");
                  formData.set("value", event.currentTarget.value);
                  return formData;
                })
              }
              className="rounded-lg border border-stone-200 bg-white px-3 py-2 text-sm disabled:opacity-60"
            />
          </label>
        </div>
      ) : null}

      <div className="space-y-2">
        <p className="text-xs font-medium uppercase tracking-[0.08em] text-[var(--muted)]">Meals</p>
        <div className="flex flex-wrap gap-2">
          {[
            { label: "Lunch", value: "lunch" as const, selected: meals.lunch },
            { label: "Mandazi", value: "mandazi" as const, selected: meals.mandazi }
          ].map((meal) => (
            <button
              key={meal.value}
              type="button"
              disabled={isPending}
              onClick={() => toggleMeal(meal.value)}
              className={`rounded-lg border px-3 py-1.5 text-xs font-medium transition disabled:opacity-60 ${mealButtonClass(meal.selected)}`}
            >
              {meal.label}
            </button>
          ))}
        </div>
      </div>

      {meals.mandazi ? (
        <div className="space-y-2">
          <p className="text-xs font-medium uppercase tracking-[0.08em] text-[var(--muted)]">Mandazi quantity</p>
          <div className="flex items-center gap-1">
            <button
              type="button"
              disabled={isPending}
              onClick={() =>
                runAction(() => {
                  const formData = new FormData();
                  formData.set("personId", String(person.id));
                  formData.set("quantity", String(person.defaultMandaziQty));
                  formData.set("delta", "-1");
                  return formData;
                })
              }
              className="inline-flex h-8 w-8 items-center justify-center rounded-lg border border-stone-200 bg-stone-50 text-sm font-medium text-stone-700 disabled:opacity-60"
            >
              -
            </button>
            <div className="flex h-8 min-w-9 items-center justify-center rounded-lg border border-stone-200 bg-white px-2 text-sm font-medium text-stone-900">
              {person.defaultMandaziQty}
            </div>
            <button
              type="button"
              disabled={isPending}
              onClick={() =>
                runAction(() => {
                  const formData = new FormData();
                  formData.set("personId", String(person.id));
                  formData.set("quantity", String(person.defaultMandaziQty));
                  formData.set("delta", "1");
                  return formData;
                })
              }
              className="inline-flex h-8 w-8 items-center justify-center rounded-lg border border-stone-200 bg-stone-50 text-sm font-medium text-stone-700 disabled:opacity-60"
            >
              +
            </button>
          </div>
        </div>
      ) : null}

      {isPending ? <p className="text-xs text-[var(--muted)]">Updating…</p> : null}
    </div>
  );
}