"use client";

import * as React from "react";
import { useRouter } from "next/navigation";
import { useForm, Controller } from "react-hook-form";
import { zodResolver } from "@hookform/resolvers/zod";
import { z } from "zod";
import { toast } from "sonner";
import { Button } from "@/components/ui/button";
import { Input, Textarea, Field } from "@/components/ui/input";
import { Checkbox, Switch } from "@/components/ui/primitives";
import { AMENITIES } from "@/lib/domain";
import { createApartment, updateApartment, type ApartmentInput } from "@/lib/actions/apartments";
import { cn } from "@/lib/utils";

const schema = z.object({
  code: z.string().trim().min(1, "Required").max(12),
  name: z.string().trim().min(2, "Required"),
  building: z.string().optional(),
  floor: z.string().optional(),
  address: z.string().trim().min(3, "Required"),
  city: z.string().trim().min(2, "Required"),
  bedrooms: z.number().int().min(0),
  beds: z.number().int().min(1),
  bathrooms: z.number().int().min(1),
  maxGuests: z.number().int().min(1),
  basePrice: z.number().min(0),
  weekendPrice: z.number().min(0).optional(),
  amenities: z.array(z.string()),
  notes: z.string().optional(),
  isActive: z.boolean(),
});
type Values = z.infer<typeof schema>;

export function ApartmentForm({ initial, id, currency }: { initial?: Partial<Values>; id?: string; currency: string }) {
  const router = useRouter();
  const [pending, setPending] = React.useState(false);
  const { register, handleSubmit, control, formState } = useForm<Values>({
    resolver: zodResolver(schema),
    defaultValues: { code: "", name: "", building: "", floor: "", address: "", city: "Casablanca", bedrooms: 1, beds: 1, bathrooms: 1, maxGuests: 2, basePrice: 500, weekendPrice: undefined, amenities: ["Wi-Fi"], notes: "", isActive: true, ...initial },
  });
  const err = (k: keyof Values) => formState.errors[k]?.message as string | undefined;

  async function onSubmit(v: Values) {
    setPending(true);
    const payload: ApartmentInput = { ...v, weekendPrice: v.weekendPrice || null };
    const res = id ? await updateApartment(id, payload) : await createApartment(payload);
    setPending(false);
    if (!res.ok) return toast.error(res.error);
    toast.success(id ? "Apartment updated" : "Apartment created");
    router.push(`/apartments/${id ?? (res.data as { id: string }).id}`);
  }

  return (
    <form onSubmit={handleSubmit(onSubmit)} className="space-y-6">
      <section className="grid gap-4 sm:grid-cols-2 lg:grid-cols-4">
        <Field label="Internal code" required error={err("code")} hint="Short and unique, e.g. A03">
          <Input {...register("code")} className="font-mono uppercase" placeholder="A03" />
        </Field>
        <Field label="Name" required error={err("name")} className="lg:col-span-2">
          <Input {...register("name")} placeholder="Anfa Sky Studio" />
        </Field>
        <Field label="Active" hint="Inactive apartments are hidden from booking">
          <Controller control={control} name="isActive" render={({ field }) => <div className="flex h-9 items-center"><Switch checked={field.value} onCheckedChange={field.onChange} /></div>} />
        </Field>
        <Field label="Building">
          <Input {...register("building")} />
        </Field>
        <Field label="Floor">
          <Input {...register("floor")} />
        </Field>
        <Field label="Address" required error={err("address")} className="sm:col-span-2">
          <Input {...register("address")} />
        </Field>
        <Field label="City" required error={err("city")}>
          <Input {...register("city")} />
        </Field>
      </section>
      <section>
        <h3 className="mb-3 text-sm font-semibold">Capacity</h3>
        <div className="grid grid-cols-2 gap-4 sm:grid-cols-4">
          <Field label="Bedrooms" hint="0 = studio">
            <Input type="number" min={0} {...register("bedrooms", { valueAsNumber: true })} />
          </Field>
          <Field label="Beds">
            <Input type="number" min={1} {...register("beds", { valueAsNumber: true })} />
          </Field>
          <Field label="Bathrooms">
            <Input type="number" min={1} {...register("bathrooms", { valueAsNumber: true })} />
          </Field>
          <Field label="Max guests" required>
            <Input type="number" min={1} {...register("maxGuests", { valueAsNumber: true })} />
          </Field>
        </div>
      </section>
      <section>
        <h3 className="mb-3 text-sm font-semibold">Pricing</h3>
        <div className="grid grid-cols-2 gap-4 sm:max-w-md">
          <Field label="Default nightly price" required>
            <Input type="number" min={0} step="10" {...register("basePrice", { valueAsNumber: true })} suffix={currency} />
          </Field>
          <Field label="Weekend price" hint="Applied on weekend nights (Settings → Pricing)">
            <Input type="number" min={0} step="10" {...register("weekendPrice", { valueAsNumber: true })} suffix={currency} />
          </Field>
        </div>
      </section>
      <section>
        <h3 className="mb-3 text-sm font-semibold">Amenities</h3>
        <Controller
          control={control}
          name="amenities"
          render={({ field }) => (
            <div className="flex flex-wrap gap-2">
              {AMENITIES.map((a) => {
                const on = field.value.includes(a);
                return (
                  <label key={a} className={cn("flex cursor-pointer items-center gap-2 rounded-full border px-3 py-1.5 text-xs font-medium transition", on ? "border-primary bg-primary/10 text-primary" : "border-border text-fg-muted hover:border-border-strong")}>
                    <Checkbox checked={on} onCheckedChange={(v) => field.onChange(v ? [...field.value, a] : field.value.filter((x) => x !== a))} className="size-3.5" />
                    {a}
                  </label>
                );
              })}
            </div>
          )}
        />
      </section>
      <Field label="Notes" hint="Access codes, parking, quirks — visible to staff">
        <Textarea {...register("notes")} rows={3} />
      </Field>
      <div className="flex justify-end gap-2">
        <Button type="button" variant="secondary" onClick={() => router.back()}>
          Cancel
        </Button>
        <Button type="submit" loading={pending}>
          {id ? "Save changes" : "Create apartment"}
        </Button>
      </div>
    </form>
  );
}