"use client";

import { useState, useCallback, useMemo } from "react";
import { useForm } from "react-hook-form";
import { zodResolver } from "@hookform/resolvers/zod";
import { MoreHorizontal, Loader2, MapPin, Car, CircleSlash, TrendingUp } from "lucide-react";
import { useRepositories } from "@/di/repository-provider";
import { useT, useLocale } from "@/shared/i18n/client";
import { formatDate } from "@/shared/lib/format-date";
import { useApiQuery } from "@/presentation/hooks/use-api-query";
import { usePageHeader } from "@/presentation/hooks/use-page-header";
import { useCrudMutations } from "@/presentation/hooks/use-crud-mutations";
import { useDeleteTarget } from "@/presentation/hooks/use-delete-target";
import { useServerPagination } from "@/presentation/hooks/use-server-pagination";
import ServerDataTable from "@/presentation/components/shared/server-data-table";
import StatsCard from "@/presentation/components/shared/stats-card";
import ConfirmationDialog from "@/presentation/components/shared/confirmation-dialog";
import { Button } from "@/presentation/components/ui/button";
import { Input } from "@/presentation/components/ui/input";
import {
  Dialog, DialogContent, DialogHeader, DialogTitle,
} from "@/presentation/components/ui/dialog";
import {
  DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger,
} from "@/presentation/components/ui/dropdown-menu";
import {
  Form, FormControl, FormField, FormItem, FormLabel, FormMessage,
} from "@/presentation/components/ui/form";
import { updateSiteSchema, type UpdateSiteFormValues } from "@/shared/schemas/site.schema";
import type { Site } from "@/domain/entities/site";
import type { Column } from "@/presentation/components/shared/server-data-table";

export default function SitesPage() {
  const t = useT();
  const locale = useLocale();
  usePageHeader(t.pages.sites.title, t.pages.sites.subtitle);
  const container = useRepositories();
  const pagination = useServerPagination();
  const [editOpen, setEditOpen] = useState(false);
  const [editingSite, setEditingSite] = useState<Site | null>(null);
  const deleteDialog = useDeleteTarget<Site>();

  const { data: stats } = useApiQuery(
    () => container.siteRepository.getStats(),
    { deps: [] }
  );

  const { data: response, loading, refetch } = useApiQuery(
    () => container.siteRepository.findAll(pagination.params),
    { deps: [pagination.params] }
  );

  const { update: updateMutation, delete: deleteMutation } = useCrudMutations(
    container.siteRepository,
    {
      update: { successMessage: t.sites.toasts.updated, onSuccess: () => { setEditOpen(false); setEditingSite(null); refetch(); } },
      delete: { successMessage: t.sites.toasts.deleted, onSuccess: () => { deleteDialog.close(); refetch(); } },
    }
  );

  const schema = useMemo(() => updateSiteSchema(t), [t]);
  const form = useForm<UpdateSiteFormValues>({
    resolver: zodResolver(schema),
  });

  const openEdit = useCallback((site: Site) => {
    setEditingSite(site);
    form.reset({
      name: site.name,
      address: site.address,
      city: site.city,
      postal_code: site.postal_code,
      capacity: site.capacity,
      manager_id: site.manager?.id ?? null,
    });
    setEditOpen(true);
  }, [form]);

  const columns: Column<Site>[] = [
    { key: "name", label: t.forms.name, sortable: true },
    { key: "address", label: t.sites.columns.address },
    { key: "city", label: t.sites.columns.city, sortable: true },
    { key: "postal_code", label: t.sites.columns.postalCode },
    { key: "capacity", label: t.sites.columns.capacity, render: (row) => row.capacity != null ? String(row.capacity) : "—" },
    { key: "company", label: t.forms.company, render: (row) => row.company?.name ?? "—" },
    { key: "manager", label: t.sites.columns.manager, render: (row) => row.manager ? `${row.manager.first_name} ${row.manager.last_name}` : "—" },
    {
      key: "created_at",
      label: t.common.createdAt,
      sortable: true,
      render: (row) => formatDate(row.created_at, locale),
    },
    {
      key: "actions",
      label: "",
      className: "w-10",
      render: (row) => (
        <DropdownMenu>
          <DropdownMenuTrigger asChild>
            <Button variant="ghost" size="icon-sm" onClick={(e) => e.stopPropagation()}>
              <MoreHorizontal className="w-4 h-4" />
            </Button>
          </DropdownMenuTrigger>
          <DropdownMenuContent align="end" onClick={(e) => e.stopPropagation()}>
            <DropdownMenuItem onClick={() => openEdit(row)}>{t.common.edit}</DropdownMenuItem>
            <DropdownMenuItem className="text-destructive" onClick={() => deleteDialog.open(row)}>{t.common.delete}</DropdownMenuItem>
          </DropdownMenuContent>
        </DropdownMenu>
      ),
    },
  ];

  return (
    <div className="p-6 space-y-6">

      {stats && (
        <div className="grid grid-cols-2 lg:grid-cols-4 gap-4">
          <StatsCard title={t.sites.stats.total} value={stats.total} icon={MapPin} accent="blue" />
          <StatsCard title={t.sites.stats.withVehicles} value={stats.with_vehicles} icon={Car} accent="green" />
          <StatsCard title={t.sites.stats.withoutVehicles} value={stats.without_vehicles} icon={CircleSlash} accent="amber" />
          <StatsCard title={t.sites.stats.new30d} value={stats.new_last_30_days} icon={TrendingUp} accent="purple" />
        </div>
      )}

      <ServerDataTable
        columns={columns}
        data={response?.items ?? []}
        total={response?.total ?? 0}
        page={pagination.page}
        totalPages={response?.last_page ?? 1}
        loading={loading}
        search={pagination.search}
        onSearchChange={pagination.setSearch}
        onPageChange={pagination.setPage}
        onSortChange={pagination.setSort}
        sortBy={pagination.orderBy}
        sortOrder={pagination.order}
      />

      <Dialog open={editOpen} onOpenChange={setEditOpen}>
        <DialogContent className="max-w-lg">
          <DialogHeader><DialogTitle>{t.sites.dialog.titleEdit}</DialogTitle></DialogHeader>
          <Form {...form}>
            <form onSubmit={form.handleSubmit((v) => editingSite && updateMutation.mutate({ id: editingSite.id, data: v }))} className="space-y-4">
              <FormField control={form.control} name="name" render={({ field }) => (
                <FormItem><FormLabel>{t.forms.name}</FormLabel><FormControl><Input {...field} value={field.value ?? ""} /></FormControl><FormMessage /></FormItem>
              )} />
              <FormField control={form.control} name="address" render={({ field }) => (
                <FormItem><FormLabel>{t.sites.columns.address}</FormLabel><FormControl><Input {...field} value={field.value ?? ""} /></FormControl><FormMessage /></FormItem>
              )} />
              <div className="grid grid-cols-2 gap-4">
                <FormField control={form.control} name="city" render={({ field }) => (
                  <FormItem><FormLabel>{t.sites.columns.city}</FormLabel><FormControl><Input {...field} value={field.value ?? ""} /></FormControl><FormMessage /></FormItem>
                )} />
                <FormField control={form.control} name="postal_code" render={({ field }) => (
                  <FormItem><FormLabel>{t.sites.columns.postalCode}</FormLabel><FormControl><Input {...field} value={field.value ?? ""} /></FormControl><FormMessage /></FormItem>
                )} />
              </div>
              <FormField control={form.control} name="capacity" render={({ field }) => (
                <FormItem><FormLabel>{t.sites.columns.capacity}</FormLabel><FormControl><Input type="number" {...field} value={field.value ?? ""} onChange={(e) => field.onChange(e.target.value ? parseInt(e.target.value) : null)} /></FormControl><FormMessage /></FormItem>
              )} />
              <div className="flex justify-end gap-2 pt-2">
                <Button type="button" variant="outline" onClick={() => setEditOpen(false)}>{t.common.cancel}</Button>
                <Button type="submit" disabled={updateMutation.loading}>
                  {updateMutation.loading && <Loader2 className="w-4 h-4 mr-2 animate-spin" />}
                  {t.common.save}
                </Button>
              </div>
            </form>
          </Form>
        </DialogContent>
      </Dialog>

      <ConfirmationDialog
        open={deleteDialog.isOpen}
        onOpenChange={(open) => !open && deleteDialog.close()}
        title={t.sites.delete.title}
        description={t.sites.delete.description(deleteDialog.target?.name ?? undefined)}
        confirmLabel={t.common.delete}
        variant="destructive"
        loading={deleteMutation.loading}
        onConfirm={() => deleteDialog.target && deleteMutation.mutate(deleteDialog.target.id)}
      />
    </div>
  );
}