"use client";

import { useCallback, useEffect, useMemo, useState } from "react";
import Link from "next/link";
import { Edit, Eye, Plus, Trash2 } from "lucide-react";

import ConfirmDialog from "@/components/common/ConfirmDialog";
import DataTable, { type DataTableColumn } from "@/components/common/DataTable";
import SearchInput from "@/components/common/SearchInput";
import { useToast } from "@/components/common/ToastProvider";
import { Button, buttonVariants } from "@/components/ui/button";
import CustomerFormDialog from "@/components/customers/CustomerFormDialog";
import CustomerStatusBadge from "@/components/customers/CustomerStatusBadge";
import { api } from "@/lib/api";
import { hasPermission } from "@/lib/permissions";
import type { CurrentUser } from "@/types/rbac";
import type { Customer, CustomerPayload, CustomerStatus, CustomerType } from "@/types/customer";

const pageSize = 10;

function getErrorMessage(error: unknown) {
  if (typeof error === "object" && error !== null && "response" in error) {
    const response = (error as { response?: { data?: { detail?: string } } }).response;
    return response?.data?.detail ?? "Aktion konnte nicht abgeschlossen werden";
  }
  return "Aktion konnte nicht abgeschlossen werden";
}

function formatDate(value: string) {
  return new Intl.DateTimeFormat("de-DE", {
    day: "2-digit",
    month: "2-digit",
    year: "numeric",
  }).format(new Date(value));
}

function getPrimaryCity(customer: Customer) {
  return customer.addresses.find((address) => address.is_primary)?.city
    || customer.addresses[0]?.city
    || "-";
}

function getSortableValue(customer: Customer, key: string) {
  if (key === "city") {
    return getPrimaryCity(customer).toLowerCase();
  }
  const value = customer[key as keyof Customer];
  return typeof value === "string" ? value.toLowerCase() : value;
}

export default function CustomersPage() {
  const { showToast } = useToast();
  const [customers, setCustomers] = useState<Customer[]>([]);
  const [currentUser, setCurrentUser] = useState<CurrentUser | null>(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState("");
  const [formError, setFormError] = useState("");
  const [deleteError, setDeleteError] = useState("");
  const [pending, setPending] = useState(false);
  const [search, setSearch] = useState("");
  const [statusFilter, setStatusFilter] = useState<CustomerStatus | "all">("all");
  const [typeFilter, setTypeFilter] = useState<CustomerType | "all">("all");
  const [sortKey, setSortKey] = useState("created_at");
  const [sortDirection, setSortDirection] = useState<"asc" | "desc">("desc");
  const [page, setPage] = useState(1);
  const [formOpen, setFormOpen] = useState(false);
  const [selectedCustomer, setSelectedCustomer] = useState<Customer | null>(null);
  const [deleteCustomer, setDeleteCustomer] = useState<Customer | null>(null);

  const loadCustomers = useCallback(async () => {
    try {
      const [customersResponse, meResponse] = await Promise.all([
        api.get<Customer[]>("/customers"),
        api.get<CurrentUser>("/me"),
      ]);
      setCustomers(customersResponse.data);
      setCurrentUser(meResponse.data);
    } catch (err) {
      setError(getErrorMessage(err));
    } finally {
      setLoading(false);
    }
  }, []);

  useEffect(() => {
    queueMicrotask(() => {
      void loadCustomers();
    });
  }, [loadCustomers]);

  const filteredCustomers = useMemo(() => {
    const term = search.trim().toLowerCase();

    return customers
      .filter((customer) => {
        if (!term) {
          return true;
        }
        return [
          customer.customer_number,
          customer.company_name,
          customer.legal_name,
          customer.industry,
          customer.email,
          customer.phone,
          getPrimaryCity(customer),
        ].some((value) => value.toLowerCase().includes(term));
      })
      .filter((customer) => statusFilter === "all" || customer.status === statusFilter)
      .filter((customer) => typeFilter === "all" || customer.customer_type === typeFilter)
      .sort((first, second) => {
        const firstValue = getSortableValue(first, sortKey);
        const secondValue = getSortableValue(second, sortKey);
        if (firstValue === secondValue) {
          return 0;
        }
        const result = firstValue > secondValue ? 1 : -1;
        return sortDirection === "asc" ? result : -result;
      });
  }, [customers, search, sortDirection, sortKey, statusFilter, typeFilter]);

  const pageCount = Math.max(1, Math.ceil(filteredCustomers.length / pageSize));
  const currentPage = Math.min(page, pageCount);
  const pageCustomers = filteredCustomers.slice((currentPage - 1) * pageSize, currentPage * pageSize);

  const columns: DataTableColumn<Customer>[] = [
    { key: "customer_number", label: "Kundennummer", sortable: true, render: (customer) => customer.customer_number },
    { key: "company_name", label: "Firmenname", sortable: true, render: (customer) => <span className="font-medium text-slate-950">{customer.company_name}</span> },
    { key: "customer_type", label: "Typ", sortable: true, render: (customer) => customer.customer_type },
    { key: "status", label: "Status", sortable: true, render: (customer) => <CustomerStatusBadge status={customer.status} /> },
    { key: "industry", label: "Branche", sortable: true, render: (customer) => customer.industry || "-" },
    { key: "email", label: "E-Mail", sortable: true, render: (customer) => customer.email || "-" },
    { key: "phone", label: "Telefon", sortable: true, render: (customer) => customer.phone || "-" },
    { key: "city", label: "Ort", sortable: true, render: (customer) => getPrimaryCity(customer) },
    { key: "created_at", label: "Erstellt", sortable: true, render: (customer) => formatDate(customer.created_at) },
    {
      key: "actions",
      label: "Aktionen",
      className: "px-4 py-3 text-right",
      render: (customer) => (
        <div className="flex justify-end gap-2">
          <Link href={`/customers/${customer.id}`} className={buttonVariants({ variant: "ghost", size: "icon-sm" })} title="Details">
            <Eye size={16} />
          </Link>
          {hasPermission(currentUser, "customers.update") && (
            <Button type="button" variant="ghost" size="icon-sm" title="Bearbeiten" onClick={() => openEditDialog(customer)}>
              <Edit size={16} />
            </Button>
          )}
          {hasPermission(currentUser, "customers.delete") && (
            <Button type="button" variant="destructive" size="icon-sm" title="Löschen" onClick={() => setDeleteCustomer(customer)}>
              <Trash2 size={16} />
            </Button>
          )}
        </div>
      ),
    },
  ];

  function handleSort(key: string) {
    if (sortKey === key) {
      setSortDirection((current) => (current === "asc" ? "desc" : "asc"));
      return;
    }
    setSortKey(key);
    setSortDirection("asc");
  }

  function openCreateDialog() {
    setSelectedCustomer(null);
    setFormError("");
    setFormOpen(true);
  }

  function openEditDialog(customer: Customer) {
    setSelectedCustomer(customer);
    setFormError("");
    setFormOpen(true);
  }

  async function saveCustomer(payload: CustomerPayload) {
    setPending(true);
    setFormError("");
    try {
      if (selectedCustomer) {
        const response = await api.put<Customer>(`/customers/${selectedCustomer.id}`, payload);
        setCustomers((current) => current.map((customer) => customer.id === selectedCustomer.id ? response.data : customer));
        showToast({ type: "success", title: "Kunde aktualisiert", description: response.data.company_name });
      } else {
        const response = await api.post<Customer>("/customers", payload);
        setCustomers((current) => [response.data, ...current]);
        showToast({ type: "success", title: "Kunde erstellt", description: response.data.company_name });
      }
      setFormOpen(false);
    } catch (err) {
      const message = getErrorMessage(err);
      setFormError(message);
      showToast({ type: "error", title: "Kunde konnte nicht gespeichert werden", description: message });
    } finally {
      setPending(false);
    }
  }

  async function confirmDelete() {
    if (!deleteCustomer) {
      return;
    }
    setPending(true);
    setDeleteError("");
    try {
      await api.delete(`/customers/${deleteCustomer.id}`);
      setCustomers((current) => current.filter((customer) => customer.id !== deleteCustomer.id));
      showToast({ type: "success", title: "Kunde gelöscht", description: deleteCustomer.company_name });
      setDeleteCustomer(null);
    } catch (err) {
      const message = getErrorMessage(err);
      setDeleteError(message);
      showToast({ type: "error", title: "Kunde konnte nicht gelöscht werden", description: message });
    } finally {
      setPending(false);
    }
  }

  return (
    <div className="space-y-6">
      <div className="flex flex-col gap-4 lg:flex-row lg:items-center lg:justify-between">
        <div>
          <h1 className="text-3xl font-bold text-slate-950">Kunden</h1>
          <p className="mt-1 text-sm text-slate-500">{filteredCustomers.length} von {customers.length} Kunden</p>
        </div>
        {hasPermission(currentUser, "customers.create") && (
          <Button type="button" onClick={openCreateDialog}>
            <Plus size={16} />
            Neuer Kunde
          </Button>
        )}
      </div>

      <div className="flex flex-col gap-3 rounded-lg border bg-white p-4 lg:flex-row lg:items-center">
        <SearchInput value={search} onChange={(value) => { setSearch(value); setPage(1); }} placeholder="Kunden suchen" />
        <select value={statusFilter} onChange={(event) => { setStatusFilter(event.target.value as CustomerStatus | "all"); setPage(1); }} className="h-8 rounded-lg border border-input bg-transparent px-2.5 text-sm">
          <option value="all">Alle Status</option>
          <option value="lead">Lead</option>
          <option value="active">Aktiv</option>
          <option value="inactive">Inaktiv</option>
          <option value="blocked">Gesperrt</option>
          <option value="archived">Archiviert</option>
        </select>
        <select value={typeFilter} onChange={(event) => { setTypeFilter(event.target.value as CustomerType | "all"); setPage(1); }} className="h-8 rounded-lg border border-input bg-transparent px-2.5 text-sm">
          <option value="all">Alle Typen</option>
          <option value="company">Unternehmen</option>
          <option value="private">Privat</option>
          <option value="public_sector">Öffentlicher Sektor</option>
          <option value="partner">Partner</option>
          <option value="supplier">Lieferant</option>
        </select>
      </div>

      <DataTable
        columns={columns}
        rows={pageCustomers}
        rowKey={(customer) => customer.id}
        sortKey={sortKey}
        sortDirection={sortDirection}
        loading={loading}
        error={error}
        emptyTitle="Keine Kunden gefunden"
        emptyDescription="Passe Suche oder Filter an oder erstelle einen neuen Kunden."
        onSort={handleSort}
      />

      <div className="flex items-center justify-between text-sm text-slate-600">
        <span>Seite {currentPage} von {pageCount}</span>
        <div className="flex gap-2">
          <Button type="button" variant="outline" disabled={currentPage === 1} onClick={() => setPage((current) => Math.max(1, current - 1))}>Zurück</Button>
          <Button type="button" variant="outline" disabled={currentPage === pageCount} onClick={() => setPage((current) => Math.min(pageCount, current + 1))}>Weiter</Button>
        </div>
      </div>

      <CustomerFormDialog
        open={formOpen}
        customer={selectedCustomer}
        pending={pending}
        serverError={formError}
        onOpenChange={setFormOpen}
        onSubmit={saveCustomer}
      />

      <ConfirmDialog
        open={Boolean(deleteCustomer)}
        title="Kunde löschen"
        description="Möchten Sie den Kunden wirklich löschen?"
        pending={pending}
        onOpenChange={(open) => {
          if (!open) {
            setDeleteCustomer(null);
            setDeleteError("");
          }
        }}
        onConfirm={confirmDelete}
      >
        {deleteCustomer && (
          <dl className="grid gap-2 text-sm">
            <div className="flex justify-between gap-4">
              <dt className="text-slate-500">Kundennummer</dt>
              <dd className="font-medium">{deleteCustomer.customer_number}</dd>
            </div>
            <div className="flex justify-between gap-4">
              <dt className="text-slate-500">Firma</dt>
              <dd className="font-medium">{deleteCustomer.company_name}</dd>
            </div>
            {deleteError && <p className="text-red-600">{deleteError}</p>}
          </dl>
        )}
      </ConfirmDialog>
    </div>
  );
}