NextChair/src/features/owner/components/service-form-sheet.tsx

"use client";

import { useRouter } from "next/navigation";
import { useState, useTransition } from "react";
import { Button } from "@/components/ui/button";
import { BottomSheet } from "@/components/ui/bottom-sheet";
import { Input } from "@/components/ui/input";
import { Select } from "@/components/ui/select";
import { Switch } from "@/components/ui/switch";
import { Textarea } from "@/components/ui/textarea";
import { MediaPicker } from "@/features/media/components/media-picker";
import { createServiceAction, updateServiceAction } from "../actions/catalogue";

export interface EditableService {
  id: string;
  categoryId: string;
  name: string;
  description: string;
  imageUrl: string | null;
  durationMinutes: number;
  price: string;
  bufferBeforeMinutes: number;
  bufferAfterMinutes: number;
  allowOnlineBooking: boolean;
}

export function ServiceFormSheet({
  open,
  onClose,
  categories,
  defaultCategoryId,
  existing,
}: {
  open: boolean;
  onClose: () => void;
  categories: { id: string; name: string }[];
  defaultCategoryId: string;
  existing?: EditableService | null;
}) {
  const router = useRouter();
  const [categoryId, setCategoryId] = useState(existing?.categoryId ?? defaultCategoryId);
  const [name, setName] = useState(existing?.name ?? "");
  const [description, setDescription] = useState(existing?.description ?? "");
  const [imageUrl, setImageUrl] = useState(existing?.imageUrl ?? "");
  const [duration, setDuration] = useState(String(existing?.durationMinutes ?? 30));
  const [price, setPrice] = useState(existing?.price ?? "");
  const [bufferBefore, setBufferBefore] = useState(String(existing?.bufferBeforeMinutes ?? 0));
  const [bufferAfter, setBufferAfter] = useState(String(existing?.bufferAfterMinutes ?? 0));
  const [allowOnlineBooking, setAllowOnlineBooking] = useState(existing?.allowOnlineBooking ?? true);
  const [error, setError] = useState<string | null>(null);
  const [isPending, startTransition] = useTransition();

  const submit = () => {
    setError(null);
    const durationMinutes = Number(duration);
    const bufferBeforeMinutes = Number(bufferBefore);
    const bufferAfterMinutes = Number(bufferAfter);
    if (!Number.isInteger(durationMinutes) || durationMinutes <= 0) {
      setError("Duration must be a positive number of minutes.");
      return;
    }
    startTransition(async () => {
      const input = {
        categoryId,
        name,
        description: description || undefined,
        imageUrl: imageUrl || undefined,
        durationMinutes,
        price,
        bufferBeforeMinutes,
        bufferAfterMinutes,
        allowOnlineBooking,
      };
      const result = existing ? await updateServiceAction(existing.id, input) : await createServiceAction(input);
      if (!result.success) {
        setError(result.error ?? "Something went wrong.");
        return;
      }
      onClose();
      router.refresh();
    });
  };

  return (
    <BottomSheet open={open} onClose={onClose} title={existing ? "Edit Service" : "New Service"}>
      <div className="space-y-4 pb-2">
        <Select label="Category" value={categoryId} onChange={(e) => setCategoryId(e.target.value)}>
          {categories.map((c) => (
            <option key={c.id} value={c.id}>
              {c.name}
            </option>
          ))}
        </Select>
        <Input label="Name" value={name} onChange={(e) => setName(e.target.value)} />
        <Textarea label="Description (optional)" value={description} onChange={(e) => setDescription(e.target.value)} />
        <MediaPicker label="Photo (optional)" value={imageUrl} onChange={(url) => setImageUrl(url ?? "")} category="service" />
        <div className="grid grid-cols-2 gap-4">
          <Input label="Duration (min)" type="number" min={1} value={duration} onChange={(e) => setDuration(e.target.value)} />
          <Input label="Price" placeholder="22.50" value={price} onChange={(e) => setPrice(e.target.value)} />
        </div>
        <div className="grid grid-cols-2 gap-4">
          <Input label="Buffer Before (min)" type="number" min={0} value={bufferBefore} onChange={(e) => setBufferBefore(e.target.value)} />
          <Input label="Buffer After (min)" type="number" min={0} value={bufferAfter} onChange={(e) => setBufferAfter(e.target.value)} />
        </div>
        <Switch label="Available for online booking" checked={allowOnlineBooking} onCheckedChange={setAllowOnlineBooking} />
        {error && (
          <p role="alert" className="text-danger text-sm font-medium">
            {error}
          </p>
        )}
        <Button className="w-full" isLoading={isPending} onClick={submit}>
          {existing ? "Save Changes" : "Add Service"}
        </Button>
      </div>
    </BottomSheet>
  );
}