frontend/components/organisms/shift-schedule/ShiftCreateModal.tsx

"use client";

import { DEPARTMENTS } from "@/lib/constants";
import { useShift } from "@/lib/shift-context";
import { useEffect, useState } from "react";

import { formatDateISO } from "./MonthlyCalendar";
import type { ShiftCreateModalProps } from "./ShiftSchedule.types";

function TimeInput({
  value,
  onChange,
  title,
}: {
  value: string;
  onChange: (v: string) => void;
  title: string;
}) {
  const [h24, m] = value.split(":").map(Number);
  const isPM = h24 >= 12;
  const hour12 = h24 === 0 ? 12 : h24 > 12 ? h24 - 12 : h24;

  const emit = (newH12: number, newM: number, newIsPM: boolean) => {
    let h = newIsPM
      ? newH12 === 12
        ? 12
        : newH12 + 12
      : newH12 === 12
        ? 0
        : newH12;
    onChange(
      `${h.toString().padStart(2, "0")}:${newM.toString().padStart(2, "0")}`,
    );
  };

  return (
    <div className="flex items-center overflow-hidden rounded-xl border border-(--color-border-light) transition focus-within:border-(--color-primary) focus-within:ring-1 focus-within:ring-(--color-primary)">
      <input
        title={`${title} hour`}
        type="number"
        min={1}
        max={12}
        value={hour12}
        onChange={(e) =>
          emit(Math.min(12, Math.max(1, Number(e.target.value))), m, isPM)
        }
        className="text-foreground w-12 border-none bg-transparent py-2.5 pl-3 text-sm outline-none"
      />
      <span className="text-sm text-(--color-text-muted) select-none">:</span>
      <input
        title={`${title} minute`}
        type="number"
        min={0}
        max={59}
        value={m.toString().padStart(2, "0")}
        onChange={(e) =>
          emit(hour12, Math.min(59, Math.max(0, Number(e.target.value))), isPM)
        }
        className="text-foreground w-10 border-none bg-transparent py-2.5 text-sm outline-none"
      />
      <button
        type="button"
        onClick={() => emit(hour12, m, !isPM)}
        className="mr-2 ml-1 cursor-pointer rounded-lg border-none bg-(--color-primary)/10 px-2 py-1 text-xs font-bold text-(--color-primary) transition hover:bg-(--color-primary) hover:text-white"
      >
        {isPM ? "PM" : "AM"}
      </button>
    </div>
  );
}

export default function ShiftCreateModal({
  isOpen,
  onClose,
  defaultDate,
}: ShiftCreateModalProps) {
  const { createShift } = useShift();

  const [date, setDate] = useState<Date>(new Date(defaultDate ?? "2026-04-10"));
  const [startTime, setStartTime] = useState("08:00");
  const [endTime, setEndTime] = useState("12:00");
  const [department, setDepartment] = useState("bar");
  const [maxStaff, setMaxStaff] = useState(2);
  const [wage, setWage] = useState(120000);
  const [error, setError] = useState<string | null>(null);

  useEffect(() => {
    if (isOpen) {
      setDate(new Date(defaultDate ?? "2026-04-10"));
    }
  }, [defaultDate, isOpen]);

  if (!isOpen) return null;

  const handleSubmit = (e: React.FormEvent) => {
    e.preventDefault();
    setError(null);

    // Validate
    if (!date || !startTime || !endTime) {
      setError("Please fill in all required fields.");
      return;
    }

    const [sh, sm] = startTime.split(":").map(Number);
    const [eh, em] = endTime.split(":").map(Number);
    const startMinutes = sh * 60 + sm;
    const endMinutes = eh * 60 + em;

    if (endMinutes <= startMinutes) {
      setError("End time must be after start time.");
      return;
    }

    const deptName =
      DEPARTMENTS.find((d) => d.id === department)?.name ?? department;

    createShift({
      name: `${deptName} - ${formatDateISO(date)}`,
      date,
      startTime,
      endTime,
      wage,
      maxStaff,
    });

    onClose();
  };

  return (
    <div className="fixed inset-0 z-50 flex items-center justify-center p-4">
      {/* Backdrop */}
      <div className="absolute inset-0 bg-black/40" onClick={onClose} />

      {/* Modal */}
      <div className="relative w-full max-w-md rounded-2xl bg-white shadow-xl">
        {/* Header */}
        <div className="flex items-center justify-between border-b border-(--color-border-light) px-5 py-4">
          <div>
            <h2 className="text-foreground text-base font-bold">
              Create New Shift
            </h2>
            <p className="text-xs text-(--color-text-muted)">
              Add a shift time slot for staff
            </p>
          </div>
          <button
            title="Close"
            type="button"
            onClick={onClose}
            className="flex h-8 w-8 cursor-pointer items-center justify-center rounded-full border-none bg-transparent text-(--color-text-muted) transition hover:bg-gray-100"
          >
            <i className="fa-solid fa-xmark"></i>
          </button>
        </div>

        {/* Form */}
        <form onSubmit={handleSubmit} className="space-y-4 px-5 py-4">
          {/* Date */}
          <div>
            <label className="mb-1 block text-xs font-semibold text-(--color-text-secondary)">
              Date
            </label>
            <input
              title="Date"
              type="date"
              value={formatDateISO(date)}
              onChange={(e) => setDate(new Date(e.target.value))}
              className="text-foreground w-full rounded-xl border border-(--color-border-light) px-3 py-2.5 text-sm transition outline-none focus:border-(--color-primary) focus:ring-1 focus:ring-(--color-primary)"
            />
          </div>

          {/* Time range */}
          <div className="grid grid-cols-2 gap-3">
            <div>
              <label className="mb-1 block text-xs font-semibold text-(--color-text-secondary)">
                Start Time
              </label>
              <TimeInput
                title="Start Time"
                value={startTime}
                onChange={setStartTime}
              />
            </div>
            <div>
              <label className="mb-1 block text-xs font-semibold text-(--color-text-secondary)">
                End Time
              </label>
              <TimeInput
                title="End Time"
                value={endTime}
                onChange={setEndTime}
              />
            </div>
          </div>

          {/* Department */}
          <div>
            <label className="mb-1 block text-xs font-semibold text-(--color-text-secondary)">
              Department
            </label>
            <select
              title="Department"
              value={department}
              onChange={(e) => setDepartment(e.target.value)}
              className="text-foreground w-full rounded-xl border border-(--color-border-light) px-3 py-2.5 text-sm transition outline-none focus:border-(--color-primary) focus:ring-1 focus:ring-(--color-primary)"
            >
              {DEPARTMENTS.map((dept) => (
                <option key={dept.id} value={dept.id}>
                  {dept.name}
                </option>
              ))}
            </select>
          </div>

          {/* Max staff & Wage */}
          <div className="grid grid-cols-2 gap-3">
            <div>
              <label className="mb-1 block text-xs font-semibold text-(--color-text-secondary)">
                Max staff
              </label>
              <input
                title="Max Staff"
                type="number"
                min={1}
                max={10}
                value={maxStaff}
                onChange={(e) => setMaxStaff(Number(e.target.value))}
                className="text-foreground w-full rounded-xl border border-(--color-border-light) px-3 py-2.5 text-sm transition outline-none focus:border-(--color-primary) focus:ring-1 focus:ring-(--color-primary)"
              />
            </div>
            <div>
              <label className="mb-1 block text-xs font-semibold text-(--color-text-secondary)">
                Shift wage (VND)
              </label>
              <input
                title="Wage"
                type="number"
                min={0}
                step={10000}
                value={wage}
                onChange={(e) => setWage(Number(e.target.value))}
                className="text-foreground w-full rounded-xl border border-(--color-border-light) px-3 py-2.5 text-sm transition outline-none focus:border-(--color-primary) focus:ring-1 focus:ring-(--color-primary)"
              />
            </div>
          </div>

          {/* Error */}
          {error && (
            <div className="rounded-xl bg-red-50 px-4 py-3 text-sm text-red-700">
              <i className="fa-solid fa-circle-exclamation mr-2"></i>
              {error}
            </div>
          )}

          {/* Actions */}
          <div className="flex gap-2 pt-2">
            <button
              type="submit"
              className="flex-1 cursor-pointer rounded-xl border-none bg-(--color-primary) px-4 py-2.5 text-sm font-semibold text-white transition hover:opacity-90"
            >
              <i className="fa-solid fa-plus mr-2"></i>
              Create shift
            </button>
            <button
              type="button"
              onClick={onClose}
              className="cursor-pointer rounded-xl border border-(--color-border-light) bg-transparent px-4 py-2.5 text-sm font-medium text-(--color-text-secondary) transition hover:bg-gray-50"
            >
              Cancel
            </button>
          </div>
        </form>
      </div>
    </div>
  );
}