"use client";

import { use, useState } from "react";
import Link from "next/link";
import { zodResolver } from "@hookform/resolvers/zod";
import { useForm, Controller, type Resolver } from "react-hook-form";
import { toast } from "sonner";
import { z } from "zod";
import { Eye, ShieldCheck, ShieldOff } from "lucide-react";
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 { Skeleton } from "@/components/ui/skeleton";
import { ErrorState } from "@/components/shared/states";
import {
  Dialog,
  DialogContent,
  DialogFooter,
  DialogHeader,
  DialogTitle,
} from "@/components/ui/dialog";
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
import {
  DocumentStatusBadge,
  OwnershipBadge,
  VehicleTypeBadge,
} from "@/components/shared/status-badges";
import { useI18n, useT } from "@/i18n";
import { useVehicle } from "@/features/vehicles/use-vehicle";
import { useCan } from "@/features/auth/use-can";
import { updateVehicle, toggleVehicleActivation, updateVehicleImages } from "@/services/vehicles";
import { friendlyErrorMessage, applyFieldErrors } from "@/lib/errors";
import { formatDate, formatDateTime } from "@/lib/format";

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({
  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 VehicleDetailPage({
  params,
}: {
  params: Promise<{ uuid: string }>;
}) {
  const t = useT();
  const { locale } = useI18n();
  const { can } = useCan();
  const { uuid } = use(params);

  const { data, isLoading, isError, error, refetch } = useVehicle(uuid);
  const vehicle = data?.Model ?? null;

  const [editOpen, setEditOpen] = useState(false);
  const [imagesOpen, setImagesOpen] = useState(false);
  const [busy, setBusy] = useState(false);
  const [vehicleImage, setVehicleImage] = useState<File | null>(null);
  const [mechanicsImage, setMechanicsImage] = useState<File | null>(null);

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

  function openEdit() {
    if (!vehicle) return;
    form.reset({
      ownership_type: vehicle.ownership_type,
      vehicle_type: vehicle.vehicle_type ?? "",
      plate_number: vehicle.plate_number ?? "",
      brand: vehicle.brand ?? "",
      model: vehicle.model ?? "",
      manufacture_year: vehicle.manufacture_year ?? new Date().getFullYear(),
      color: vehicle.color ?? "",
      registration_number: vehicle.registration_number ?? "",
      registration_expires_at: vehicle.registration_expires_at ?? "",
      insurance_policy_number: vehicle.insurance_policy_number ?? "",
      insurance_expires_at: vehicle.insurance_expires_at ?? "",
    });
    setEditOpen(true);
  }

  async function handleSave() {
    const valid = await form.trigger();
    if (!valid || !vehicle) return;
    setBusy(true);
    try {
      const values = form.getValues();
      const response = await updateVehicle(vehicle.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,
      });
      toast.success(response.Message || t("vehicles.updated"));
      setEditOpen(false);
      await refetch();
    } catch (caught) {
      applyFieldErrors(caught, (field, message) => form.setError(field as never, { message }));
      toast.error(friendlyErrorMessage(caught, t));
    } finally {
      setBusy(false);
    }
  }

  async function handleUploadImages() {
    if (!vehicle) return;
    if (!vehicleImage && !mechanicsImage) {
      setImagesOpen(false);
      return;
    }
    setBusy(true);
    try {
      const response = await updateVehicleImages(vehicle.uuid, { vehicle_image: vehicleImage, mechanics_image: mechanicsImage });
      toast.success(response.Message || t("vehicles.imagesUpdated"));
      setImagesOpen(false);
      setVehicleImage(null);
      setMechanicsImage(null);
      await refetch();
    } catch (caught) {
      toast.error(friendlyErrorMessage(caught, t));
    } finally {
      setBusy(false);
    }
  }

  async function handleToggleActivation() {
    if (!vehicle) return;
    setBusy(true);
    try {
      const response = await toggleVehicleActivation(vehicle.uuid);
      toast.success(response.Message || (vehicle.is_active ? t("vehicles.deactivated") : t("vehicles.activated")));
      await refetch();
    } catch (caught) {
      toast.error(friendlyErrorMessage(caught, t));
    } finally {
      setBusy(false);
    }
  }

  const canUpdate = can("vehicles.update");

  if (isLoading) {
    return (
      <div className="mx-auto max-w-5xl space-y-4">
        <Skeleton className="h-8 w-72" />
        <Skeleton className="h-48 w-full" />
        <Skeleton className="h-64 w-full" />
      </div>
    );
  }

  if (isError || !vehicle) {
    return (
      <div className="mx-auto max-w-2xl py-10">
        <ErrorState
          message={friendlyErrorMessage(error ?? new Error(t("common.notFound")), t)}
          onRetry={() => refetch()}
        />
      </div>
    );
  }

  const title = vehicle.brand || vehicle.plate_number || t("vehicles.singular");
  const subtitle = vehicle.brand && vehicle.model ? `${vehicle.brand} ${vehicle.model}` : null;

  return (
    <div className="mx-auto max-w-5xl">
      <Breadcrumbs
        items={[
          { label: t("nav.vehicles"), href: "/vehicles" },
          { label: title },
        ]}
      />
      <PageHeader
        title={title}
        subtitle={
          <span className="flex flex-wrap items-center gap-2 text-sm">
            {subtitle ? <span className="text-muted-foreground">{subtitle}</span> : null}
            {vehicle.plate_number ? (
              <span dir="ltr" className="rounded-md border border-input bg-surface px-2 py-0.5 text-xs font-medium text-foreground">
                {vehicle.plate_number}
              </span>
            ) : null}
            <OwnershipBadge type={vehicle.ownership_type} label={vehicle.ownership_type_label} />
            {vehicle.vehicle_type ? (
              <VehicleTypeBadge type={vehicle.vehicle_type} label={vehicle.vehicle_type_label ?? vehicle.vehicle_type} />
            ) : null}
            {!vehicle.is_active ? (
              <span className="rounded-md border border-input bg-surface px-2 py-0.5 text-xs font-medium text-muted-foreground">
                {t("common.inactive")}
              </span>
            ) : null}
          </span>
        }
        actions={
          canUpdate ? (
            <>
              <Button variant="outline" onClick={() => setImagesOpen(true)}>
                <Eye className="h-4 w-4" aria-hidden />
                {t("vehicles.uploadImages")}
              </Button>
              <Button variant="outline" onClick={openEdit}>
                {t("vehicles.edit")}
              </Button>
              <Button variant="outline" onClick={handleToggleActivation} loading={busy}>
                {vehicle.is_active ? (
                  <ShieldOff className="h-4 w-4" aria-hidden />
                ) : (
                  <ShieldCheck className="h-4 w-4" aria-hidden />
                )}
                {vehicle.is_active ? t("vehicles.deactivate") : t("vehicles.activate")}
              </Button>
            </>
          ) : null
        }
      />

      <div className="grid gap-6 lg:grid-cols-3">
        <Card>
          <CardHeader>
            <CardTitle>{t("vehicles.detailSections.identity")}</CardTitle>
          </CardHeader>
          <CardContent className="grid gap-3 text-sm">
            <InfoRow label={t("vehicles.fieldPlateNumber")} value={vehicle.plate_number ?? "—"} ltr />
            <InfoRow label={t("vehicles.fieldBrand")} value={vehicle.brand ?? "—"} />
            <InfoRow label={t("vehicles.fieldModel")} value={vehicle.model ?? "—"} />
            <InfoRow label={t("vehicles.fieldYear")} value={vehicle.manufacture_year ? String(vehicle.manufacture_year) : "—"} />
            <InfoRow label={t("vehicles.fieldColor")} value={vehicle.color ?? "—"} />
            <InfoRow label={t("vehicles.fieldType")} value={vehicle.vehicle_type_label ?? "—"} />
            <InfoRow label={t("vehicles.fieldOwnership")} value={vehicle.ownership_type_label} />
            <InfoRow label={t("common.createdAt")} value={formatDateTime(vehicle.created_at, locale)} />
          </CardContent>
        </Card>

        <Card>
          <CardHeader>
            <CardTitle>{t("vehicles.detailSections.captain")}</CardTitle>
          </CardHeader>
          <CardContent className="grid gap-3 text-sm">
            {vehicle.driver ? (
              <>
                <InfoRow label={t("vehicles.assignedTo")} value={vehicle.driver.name} />
                <InfoRow label={t("drivers.fieldPhone")} value={vehicle.driver.phone} ltr />
                <div>
                  <Link href={`/captains/${vehicle.driver.uuid}`} className="text-xs font-medium text-primary hover:underline">
                    {t("common.view")} →
                  </Link>
                </div>
              </>
            ) : (
              <p className="text-xs text-muted-foreground">{t("vehicles.notAssigned")}</p>
            )}
          </CardContent>
        </Card>

        <Card>
          <CardHeader>
            <CardTitle>{t("vehicles.detailSections.documents")}</CardTitle>
          </CardHeader>
          <CardContent className="grid gap-3 text-sm">
            <div className="rounded-lg border p-3">
              <div className="mb-2 flex items-center justify-between gap-2">
                <span className="text-xs font-medium text-muted-foreground">{t("vehicles.documents.registration")}</span>
                <DocumentStatusBadge status={vehicle.registration_status} label={vehicle.registration_status_label} />
              </div>
              <InfoRow label={t("vehicles.fieldRegistrationNumber")} value={vehicle.registration_number ?? "—"} ltr />
              <InfoRow
                label={t("vehicles.fieldRegistrationExpires")}
                value={vehicle.registration_expires_at ? formatDate(vehicle.registration_expires_at, locale) : "—"}
              />
            </div>
            <div className="rounded-lg border p-3">
              <div className="mb-2 flex items-center justify-between gap-2">
                <span className="text-xs font-medium text-muted-foreground">{t("vehicles.documents.insurance")}</span>
                <DocumentStatusBadge status={vehicle.insurance_status} label={vehicle.insurance_status_label} />
              </div>
              <InfoRow label={t("vehicles.fieldInsurancePolicy")} value={vehicle.insurance_policy_number ?? "—"} ltr />
              <InfoRow
                label={t("vehicles.fieldInsuranceExpires")}
                value={vehicle.insurance_expires_at ? formatDate(vehicle.insurance_expires_at, locale) : "—"}
              />
            </div>
          </CardContent>
        </Card>
      </div>

      {vehicle.images ? (
        <Card className="mt-6">
          <CardHeader>
            <CardTitle>{t("vehicles.detailSections.images")}</CardTitle>
          </CardHeader>
          <CardContent className="grid gap-6 sm:grid-cols-2">
            <PhotoRow label={t("vehicles.fieldVehicleImage")} src={vehicle.images?.vehicle_image} />
            <PhotoRow label={t("vehicles.fieldMechanicsImage")} src={vehicle.images?.mechanics_image} />
          </CardContent>
        </Card>
      ) : null}

      <Dialog open={editOpen} onOpenChange={(open) => !open && setEditOpen(false)}>
        <DialogContent className="max-h-[90vh] overflow-y-auto max-w-2xl">
          <DialogHeader>
            <DialogTitle>{t("vehicles.editTitle")}</DialogTitle>
          </DialogHeader>
          <div className="grid gap-4 sm:grid-cols-2">
            <FormField
              label={t("vehicles.fieldOwnership")}
              htmlFor="edit_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="edit_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="edit_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="edit_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="edit_plate_number" required error={form.formState.errors.plate_number?.message}>
              <Input id="edit_plate_number" dir="ltr" placeholder="ABC 1234" {...form.register("plate_number")} />
            </FormField>
            <FormField label={t("vehicles.fieldBrand")} htmlFor="edit_brand" required error={form.formState.errors.brand?.message}>
              <Input id="edit_brand" {...form.register("brand")} />
            </FormField>
            <FormField label={t("vehicles.fieldModel")} htmlFor="edit_model" required error={form.formState.errors.model?.message}>
              <Input id="edit_model" {...form.register("model")} />
            </FormField>
            <div className="grid grid-cols-2 gap-4">
              <FormField label={t("vehicles.fieldYear")} htmlFor="edit_manufacture_year" required error={form.formState.errors.manufacture_year?.message}>
                <Input id="edit_manufacture_year" type="number" min={1950} dir="ltr" {...form.register("manufacture_year")} />
              </FormField>
              <FormField label={t("vehicles.fieldColor")} htmlFor="edit_color" required error={form.formState.errors.color?.message}>
                <Input id="edit_color" {...form.register("color")} />
              </FormField>
            </div>
            <FormField label={t("vehicles.fieldRegistrationNumber")} htmlFor="edit_registration_number" error={form.formState.errors.registration_number?.message}>
              <Input id="edit_registration_number" dir="ltr" {...form.register("registration_number")} />
            </FormField>
            <FormField label={t("vehicles.fieldRegistrationExpires")} htmlFor="edit_registration_expires_at" error={form.formState.errors.registration_expires_at?.message}>
              <Input id="edit_registration_expires_at" type="date" dir="ltr" {...form.register("registration_expires_at")} />
            </FormField>
            <FormField label={t("vehicles.fieldInsurancePolicy")} htmlFor="edit_insurance_policy_number" error={form.formState.errors.insurance_policy_number?.message}>
              <Input id="edit_insurance_policy_number" dir="ltr" {...form.register("insurance_policy_number")} />
            </FormField>
            <FormField label={t("vehicles.fieldInsuranceExpires")} htmlFor="edit_insurance_expires_at" error={form.formState.errors.insurance_expires_at?.message}>
              <Input id="edit_insurance_expires_at" type="date" dir="ltr" {...form.register("insurance_expires_at")} />
            </FormField>
          </div>
          <DialogFooter>
            <Button variant="outline" onClick={() => setEditOpen(false)} disabled={busy}>
              {t("common.cancel")}
            </Button>
            <Button onClick={handleSave} loading={busy}>
              {t("common.save")}
            </Button>
          </DialogFooter>
        </DialogContent>
      </Dialog>

      <Dialog open={imagesOpen} onOpenChange={(open) => !open && setImagesOpen(false)}>
        <DialogContent className="max-w-md">
          <DialogHeader>
            <DialogTitle>{t("vehicles.uploadImagesTitle")}</DialogTitle>
          </DialogHeader>
          <div className="grid gap-4">
            <FormField label={t("vehicles.fieldVehicleImage")} htmlFor="upload_vehicle_image">
              <Input id="upload_vehicle_image" type="file" accept="image/*" onChange={(event) => setVehicleImage(event.target.files?.[0] ?? null)} />
            </FormField>
            <FormField label={t("vehicles.fieldMechanicsImage")} htmlFor="upload_mechanics_image">
              <Input id="upload_mechanics_image" type="file" accept="image/*" onChange={(event) => setMechanicsImage(event.target.files?.[0] ?? null)} />
            </FormField>
          </div>
          <DialogFooter>
            <Button variant="outline" onClick={() => setImagesOpen(false)} disabled={busy}>
              {t("common.cancel")}
            </Button>
            <Button onClick={handleUploadImages} loading={busy}>
              {t("vehicles.uploadImages")}
            </Button>
          </DialogFooter>
        </DialogContent>
      </Dialog>
    </div>
  );
}

function InfoRow({ label, value, ltr = false }: { label: string; value: string; ltr?: boolean }) {
  return (
    <div>
      <dt className="text-xs font-medium text-muted-foreground">{label}</dt>
      <dd
        className="font-medium text-foreground"
        dir={ltr ? "ltr" : undefined}
        style={ltr ? { textAlign: "start" } : undefined}
      >
        {value}
      </dd>
    </div>
  );
}

function PhotoRow({ label, src }: { label: string; src?: string | null }) {
  const [expanded, setExpanded] = useState(false);
  return (
    <div>
      <dt className="mb-1 text-xs font-medium text-muted-foreground">{label}</dt>
      <dd>
        {src ? (
          <>
            <button
              type="button"
              onClick={() => setExpanded(true)}
              className="flex items-center gap-2 rounded-lg border p-2 transition-colors hover:border-primary/30"
            >
              {/* eslint-disable-next-line @next/next/no-img-element */}
              <img src={src} alt={label} className="h-16 w-16 rounded-md object-cover" />
              <span className="inline-flex items-center gap-1.5 text-xs font-medium text-primary">
                <Eye className="h-3.5 w-3.5" aria-hidden />
                {label}
              </span>
            </button>
            <Dialog open={expanded} onOpenChange={(open) => !open && setExpanded(false)}>
              <DialogContent className="max-w-2xl">
                <DialogHeader>
                  <DialogTitle>{label}</DialogTitle>
                </DialogHeader>
                {/* eslint-disable-next-line @next/next/no-img-element */}
                <img src={src} alt={label} className="mx-auto max-h-[70vh] rounded-lg object-contain" />
              </DialogContent>
            </Dialog>
          </>
        ) : (
          <span className="text-xs text-muted-foreground">—</span>
        )}
      </dd>
    </div>
  );
}