"use client";

import { useMemo, useState } from "react";
import { useRouter } from "next/navigation";
import { useQuery } from "@tanstack/react-query";
import { zodResolver } from "@hookform/resolvers/zod";
import { useForm, Controller, type Resolver } from "react-hook-form";
import { toast } from "sonner";
import { z } from "zod";
import { PageHeader, Breadcrumbs } from "@/components/shared/page-header";
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { FormField } from "@/components/ui/form-field";
import { Alert } from "@/components/ui/alert";
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
import { useT } from "@/i18n";
import { createVehicle } from "@/services/vehicles";
import { getDrivers } from "@/services/drivers";
import { queryKeys } from "@/lib/query-keys";
import { friendlyErrorMessage, applyFieldErrors } from "@/lib/errors";
import type { Driver } from "@/types/driver";

const OWNERSHIP_OPTIONS = [
  { value: "company_owned", labelKey: "vehicles.ownership.company_owned" as const },
  { value: "personal", labelKey: "vehicles.ownership.personal" as const },
];

const TYPE_OPTIONS = [
  { value: "motorcycle", labelKey: "vehicles.types.motorcycle" as const },
  { value: "car", labelKey: "vehicles.types.car" as const },
  { value: "van", labelKey: "vehicles.types.van" as const },
  { value: "pickup_truck", labelKey: "vehicles.types.pickup_truck" as const },
  { value: "truck", labelKey: "vehicles.types.truck" as const },
];

const formSchema = z.object({
  driver_uuid: z.string().min(1, "errors.required"),
  ownership_type: z.string().min(1, "errors.required"),
  vehicle_type: z.string().min(1, "errors.required"),
  plate_number: z.string().min(1, "errors.required").max(20),
  brand: z.string().min(1, "errors.required").max(100),
  model: z.string().min(1, "errors.required").max(100),
  manufacture_year: z.coerce.number().int().min(1950, "errors.generic").max(new Date().getFullYear() + 1, "errors.generic"),
  color: z.string().min(1, "errors.required").max(50),
  registration_number: z.string().max(50).optional(),
  registration_expires_at: z.string().optional(),
  insurance_policy_number: z.string().max(50).optional(),
  insurance_expires_at: z.string().optional(),
});

type FormValues = z.infer<typeof formSchema>;

const resolver = zodResolver(formSchema) as unknown as Resolver<FormValues>;

export default function NewVehiclePage() {
  const t = useT();
  const router = useRouter();
  const [serverError, setServerError] = useState<string | null>(null);
  const [vehicleImage, setVehicleImage] = useState<File | null>(null);
  const [mechanicsImage, setMechanicsImage] = useState<File | null>(null);
  const [captainSearch, setCaptainSearch] = useState("");

  const form = useForm<FormValues>({
    resolver,
    mode: "onTouched",
    defaultValues: {
      driver_uuid: "",
      ownership_type: "company_owned",
      vehicle_type: "",
      plate_number: "",
      brand: "",
      model: "",
      manufacture_year: new Date().getFullYear(),
      color: "",
      registration_number: "",
      registration_expires_at: "",
      insurance_policy_number: "",
      insurance_expires_at: "",
    },
  });

  const captainQuery = useQuery({
    queryKey: queryKeys.drivers.list({ page: 1, rows: 25, status: "approved", search: captainSearch || undefined }),
    queryFn: () => getDrivers({ page: 1, rows: 25, status: "approved", search: captainSearch || undefined }),
  });

  const captains = useMemo(() => captainQuery.data?.Model ?? [], [captainQuery.data]);

  async function onSubmit(values: FormValues) {
    setServerError(null);
    try {
      const response = await createVehicle({
        driver_uuid: values.driver_uuid,
        ownership_type: values.ownership_type as "company_owned" | "personal",
        vehicle_type: values.vehicle_type as "motorcycle" | "car" | "van" | "pickup_truck" | "truck",
        plate_number: values.plate_number,
        brand: values.brand,
        model: values.model,
        manufacture_year: values.manufacture_year,
        color: values.color,
        registration_number: values.registration_number || null,
        registration_expires_at: values.registration_expires_at || null,
        insurance_policy_number: values.insurance_policy_number || null,
        insurance_expires_at: values.insurance_expires_at || null,
        vehicle_image: vehicleImage,
        mechanics_image: mechanicsImage,
      });
      toast.success(response.Message || t("vehicles.created"));
      const vehicle = response.Model;
      if (vehicle) {
        router.replace(`/vehicles/${vehicle.uuid}`);
        return;
      }
      router.replace("/vehicles");
    } catch (error) {
      setServerError(friendlyErrorMessage(error, t));
      applyFieldErrors(error, (field, message) => form.setError(field as never, { message }));
    }
  }

  return (
    <div className="mx-auto max-w-4xl">
      <Breadcrumbs
        items={[
          { label: t("nav.vehicles"), href: "/vehicles" },
          { label: t("vehicles.createTitle") },
        ]}
      />
      <form onSubmit={form.handleSubmit(onSubmit)} noValidate>
        <PageHeader
          title={t("vehicles.createTitle")}
          subtitle={t("vehicles.createSubtitle")}
          actions={
            <Button type="submit" loading={form.formState.isSubmitting}>
              {t("vehicles.create")}
            </Button>
          }
        />
        {serverError ? <Alert variant="destructive" className="mb-6" title={serverError} /> : null}

        <Card>
          <CardHeader>
            <CardTitle>{t("vehicles.fieldDriver")}</CardTitle>
          </CardHeader>
          <CardContent className="grid gap-4">
            <p className="-mb-2 text-xs leading-relaxed text-muted-foreground">{t("vehicles.captainHint")}</p>
            <FormField
              label={t("vehicles.fieldDriver")}
              htmlFor="driver_uuid"
              required
              error={form.formState.errors.driver_uuid?.message}
            >
              <Controller
                control={form.control}
                name="driver_uuid"
                render={({ field }) => (
                  <Select value={field.value} onValueChange={field.onChange}>
                    <SelectTrigger id="driver_uuid" className="w-full">
                      <SelectValue placeholder={t("vehicles.captainPlaceholder")} />
                    </SelectTrigger>
                    <SelectContent>
                      <div className="border-b px-2 pb-2">
                        <Input
                          dir="auto"
                          placeholder={t("vehicles.captainPlaceholder")}
                          onChange={(event) => setCaptainSearch(event.target.value)}
                          className="h-8"
                        />
                      </div>
                      {captains.map((captain: Driver) => (
                        <SelectItem key={captain.uuid} value={captain.uuid}>
                          {captain.name}
                          <span className="ms-1 text-xs text-muted-foreground" dir="ltr">
                            {captain.phone}
                          </span>
                        </SelectItem>
                      ))}
                      {captains.length === 0 ? (
                        <div className="px-2 py-3 text-center text-xs text-muted-foreground">
                          {t("common.noResults")}
                        </div>
                      ) : null}
                    </SelectContent>
                  </Select>
                )}
              />
            </FormField>
          </CardContent>
        </Card>

        <Card className="mt-4">
          <CardHeader>
            <CardTitle>{t("vehicles.fieldVehicle")}</CardTitle>
          </CardHeader>
          <CardContent className="grid gap-4 sm:grid-cols-2">
            <FormField
              label={t("vehicles.fieldOwnership")}
              htmlFor="ownership_type"
              required
              error={form.formState.errors.ownership_type?.message}
            >
              <Controller
                control={form.control}
                name="ownership_type"
                render={({ field }) => (
                  <Select value={field.value} onValueChange={field.onChange}>
                    <SelectTrigger id="ownership_type" className="w-full">
                      <SelectValue />
                    </SelectTrigger>
                    <SelectContent>
                      {OWNERSHIP_OPTIONS.map((option) => (
                        <SelectItem key={option.value} value={option.value}>
                          {t(option.labelKey)}
                        </SelectItem>
                      ))}
                    </SelectContent>
                  </Select>
                )}
              />
            </FormField>
            <FormField
              label={t("vehicles.fieldType")}
              htmlFor="vehicle_type"
              required
              error={form.formState.errors.vehicle_type?.message}
            >
              <Controller
                control={form.control}
                name="vehicle_type"
                render={({ field }) => (
                  <Select value={field.value} onValueChange={field.onChange}>
                    <SelectTrigger id="vehicle_type" className="w-full">
                      <SelectValue placeholder={t("common.none")} />
                    </SelectTrigger>
                    <SelectContent>
                      {TYPE_OPTIONS.map((option) => (
                        <SelectItem key={option.value} value={option.value}>
                          {t(option.labelKey)}
                        </SelectItem>
                      ))}
                    </SelectContent>
                  </Select>
                )}
              />
            </FormField>
            <FormField
              label={t("vehicles.fieldPlateNumber")}
              htmlFor="plate_number"
              required
              error={form.formState.errors.plate_number?.message}
            >
              <Input id="plate_number" dir="ltr" placeholder="ABC 1234" {...form.register("plate_number")} />
            </FormField>
            <FormField
              label={t("vehicles.fieldBrand")}
              htmlFor="brand"
              required
              error={form.formState.errors.brand?.message}
            >
              <Input id="brand" {...form.register("brand")} />
            </FormField>
            <FormField
              label={t("vehicles.fieldModel")}
              htmlFor="model"
              required
              error={form.formState.errors.model?.message}
            >
              <Input id="model" {...form.register("model")} />
            </FormField>
            <div className="grid grid-cols-2 gap-4">
              <FormField
                label={t("vehicles.fieldYear")}
                htmlFor="manufacture_year"
                required
                error={form.formState.errors.manufacture_year?.message}
              >
                <Input
                  id="manufacture_year"
                  type="number"
                  min={1950}
                  dir="ltr"
                  {...form.register("manufacture_year")}
                />
              </FormField>
              <FormField
                label={t("vehicles.fieldColor")}
                htmlFor="color"
                required
                error={form.formState.errors.color?.message}
              >
                <Input id="color" {...form.register("color")} />
              </FormField>
            </div>
          </CardContent>
        </Card>

        <Card className="mt-4">
          <CardHeader>
            <CardTitle>{t("vehicles.detailSections.documents")}</CardTitle>
          </CardHeader>
          <CardContent className="grid gap-4 sm:grid-cols-2">
            <FormField
              label={t("vehicles.fieldRegistrationNumber")}
              htmlFor="registration_number"
              error={form.formState.errors.registration_number?.message}
            >
              <Input id="registration_number" dir="ltr" {...form.register("registration_number")} />
            </FormField>
            <FormField
              label={t("vehicles.fieldRegistrationExpires")}
              htmlFor="registration_expires_at"
              error={form.formState.errors.registration_expires_at?.message}
            >
              <Input
                id="registration_expires_at"
                type="date"
                dir="ltr"
                {...form.register("registration_expires_at")}
              />
            </FormField>
            <FormField
              label={t("vehicles.fieldInsurancePolicy")}
              htmlFor="insurance_policy_number"
              error={form.formState.errors.insurance_policy_number?.message}
            >
              <Input id="insurance_policy_number" dir="ltr" {...form.register("insurance_policy_number")} />
            </FormField>
            <FormField
              label={t("vehicles.fieldInsuranceExpires")}
              htmlFor="insurance_expires_at"
              error={form.formState.errors.insurance_expires_at?.message}
            >
              <Input
                id="insurance_expires_at"
                type="date"
                dir="ltr"
                {...form.register("insurance_expires_at")}
              />
            </FormField>
          </CardContent>
        </Card>

        <Card className="mt-4">
          <CardHeader>
            <CardTitle>{t("vehicles.detailSections.images")}</CardTitle>
          </CardHeader>
          <CardContent className="grid gap-4 sm:grid-cols-2">
            <FormField label={t("vehicles.fieldVehicleImage")} htmlFor="vehicle_image">
              <Input
                id="vehicle_image"
                type="file"
                accept="image/*"
                onChange={(event) => setVehicleImage(event.target.files?.[0] ?? null)}
              />
            </FormField>
            <FormField label={t("vehicles.fieldMechanicsImage")} htmlFor="mechanics_image">
              <Input
                id="mechanics_image"
                type="file"
                accept="image/*"
                onChange={(event) => setMechanicsImage(event.target.files?.[0] ?? null)}
              />
            </FormField>
          </CardContent>
        </Card>

        <div className="mt-6 flex justify-end gap-2">
          <Button type="button" variant="outline" onClick={() => router.back()}>
            {t("common.cancel")}
          </Button>
          <Button type="submit" loading={form.formState.isSubmitting}>
            {t("vehicles.create")}
          </Button>
        </div>
      </form>
    </div>
  );
}