"use client";

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

import ConfirmDialog from "@/components/common/ConfirmDialog";
import DataTable, { type DataTableColumn } from "@/components/common/DataTable";
import EmptyState from "@/components/common/EmptyState";
import SearchInput from "@/components/common/SearchInput";
import { useToast } from "@/components/common/ToastProvider";
import RepairFormDialog from "@/components/repairs/RepairFormDialog";
import { RepairPriorityBadge, RepairStatusBadge, priorityLabels, statusLabels } from "@/components/repairs/RepairStatusBadge";
import RepairStatusDialog from "@/components/repairs/RepairStatusDialog";
import { Button, buttonVariants } from "@/components/ui/button";
import { api } from "@/lib/api";
import { hasPermission } from "@/lib/permissions";
import type { CurrentUser } from "@/types/rbac";
import type { Repair, RepairListResponse, RepairPayload, RepairPriority, RepairSource, RepairStatus } from "@/types/repair";

const pageSize = 10;

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

function formatDate(value: string) {
  return new Intl.DateTimeFormat("de-DE", { dateStyle: "short", timeStyle: "short" }).format(new Date(value));
}

function deviceLabel(repair: Repair) {
  return `${repair.device_manufacturer} ${repair.device_model}`.trim();
}

export default function RepairsPage() {
  const { showToast } = useToast();
  const [repairs, setRepairs] = useState<Repair[]>([]);
  const [total, setTotal] = useState(0);
  const [currentUser, setCurrentUser] = useState<CurrentUser | null>(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState("");
  const [formError, setFormError] = useState("");
  const [statusError, setStatusError] = useState("");
  const [cancelError, setCancelError] = useState("");
  const [pending, setPending] = useState(false);
  const [search, setSearch] = useState("");
  const [statusFilter, setStatusFilter] = useState<RepairStatus | "all">("all");
  const [sourceFilter, setSourceFilter] = useState<RepairSource | "all">("all");
  const [priorityFilter, setPriorityFilter] = useState<RepairPriority | "all">("all");
  const [page, setPage] = useState(1);
  const [sortKey, setSortKey] = useState("created_at");
  const [sortDirection, setSortDirection] = useState<"asc" | "desc">("desc");
  const [formOpen, setFormOpen] = useState(false);
  const [statusOpen, setStatusOpen] = useState(false);
  const [selectedRepair, setSelectedRepair] = useState<Repair | null>(null);
  const [cancelRepair, setCancelRepair] = useState<Repair | null>(null);

  const loadRepairs = useCallback(async () => {
    setLoading(true);
    setError("");
    try {
      const params = new URLSearchParams();
      params.set("limit", String(pageSize));
      params.set("offset", String((page - 1) * pageSize));
      if (search.trim()) params.set("q", search.trim());
      if (statusFilter !== "all") params.set("status", statusFilter);
      if (sourceFilter !== "all") params.set("source", sourceFilter);
      if (priorityFilter !== "all") params.set("priority", priorityFilter);
      const [repairResponse, meResponse] = await Promise.all([
        api.get<RepairListResponse>(`/repairs?${params.toString()}`),
        api.get<CurrentUser>("/me"),
      ]);
      setRepairs(repairResponse.data.items);
      setTotal(repairResponse.data.total);
      setCurrentUser(meResponse.data);
    } catch (err) {
      setError(getErrorMessage(err));
    } finally {
      setLoading(false);
    }
  }, [page, priorityFilter, search, sourceFilter, statusFilter]);

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

  const sortedRepairs = useMemo(() => [...repairs].sort((first, second) => {
    const firstValue = String(first[sortKey as keyof Repair] ?? "").toLowerCase();
    const secondValue = String(second[sortKey as keyof Repair] ?? "").toLowerCase();
    if (firstValue === secondValue) return 0;
    const result = firstValue > secondValue ? 1 : -1;
    return sortDirection === "asc" ? result : -result;
  }), [repairs, sortDirection, sortKey]);

  const pageCount = Math.max(1, Math.ceil(total / pageSize));
  const currentPage = Math.min(page, pageCount);
  const canCreate = hasPermission(currentUser, "repairs.create");
  const canUpdate = hasPermission(currentUser, "repairs.update");
  const canUpdateStatus = hasPermission(currentUser, "repairs.status.update");
  const canDelete = hasPermission(currentUser, "repairs.delete");

  const columns: DataTableColumn<Repair>[] = [
    { key: "repair_number", label: "Reparaturnummer", sortable: true, render: (repair) => <span className="font-medium text-slate-950">{repair.repair_number}</span> },
    { key: "status", label: "Status", sortable: true, render: (repair) => <RepairStatusBadge status={repair.status} /> },
    { key: "priority", label: "Priorität", sortable: true, render: (repair) => <RepairPriorityBadge priority={repair.priority} /> },
    { key: "customer_name", label: "Kunde", sortable: true, render: (repair) => repair.customer_name },
    { key: "device_model", label: "Gerät", sortable: true, render: (repair) => deviceLabel(repair) },
    { key: "fault_description", label: "Fehler", render: (repair) => <span title={repair.fault_description}>{repair.fault_description.slice(0, 80)}{repair.fault_description.length > 80 ? "..." : ""}</span> },
    { key: "source", label: "Quelle", sortable: true, render: (repair) => repair.source },
    { key: "created_at", label: "Erstellt", sortable: true, render: (repair) => formatDate(repair.created_at) },
    {
      key: "actions",
      label: "Aktionen",
      className: "px-4 py-3 text-right",
      render: (repair) => (
        <div className="flex justify-end gap-2">
          <Link href={`/repairs/${repair.id}`} className={buttonVariants({ variant: "ghost", size: "icon-sm" })} title="Details"><Eye size={16} /></Link>
          {canUpdate && <Button type="button" variant="ghost" size="icon-sm" title="Bearbeiten" onClick={() => { setSelectedRepair(repair); setFormError(""); setFormOpen(true); }}><Edit size={16} /></Button>}
          {canUpdateStatus && <Button type="button" variant="ghost" size="icon-sm" title="Status ändern" onClick={() => { setSelectedRepair(repair); setStatusError(""); setStatusOpen(true); }}><Wrench size={16} /></Button>}
          {canDelete && <Button type="button" variant="destructive" size="icon-sm" title="Stornieren" onClick={() => setCancelRepair(repair)}><Trash2 size={16} /></Button>}
        </div>
      ),
    },
  ];

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

  async function saveRepair(payload: RepairPayload) {
    setPending(true);
    setFormError("");
    try {
      if (selectedRepair) {
        const response = await api.put<Repair>(`/repairs/${selectedRepair.id}`, payload);
        setRepairs((current) => current.map((repair) => repair.id === selectedRepair.id ? response.data : repair));
        showToast({ type: "success", title: "Reparatur aktualisiert", description: response.data.repair_number });
      } else {
        const response = await api.post<Repair>("/repairs", payload);
        setRepairs((current) => [response.data, ...current].slice(0, pageSize));
        setTotal((current) => current + 1);
        showToast({ type: "success", title: "Reparatur angelegt", description: response.data.repair_number });
      }
      setFormOpen(false);
    } catch (err) {
      const message = getErrorMessage(err);
      setFormError(message);
      showToast({ type: "error", title: "Reparatur konnte nicht gespeichert werden", description: message });
    } finally {
      setPending(false);
    }
  }

  async function saveStatus(status: RepairStatus, note: string) {
    if (!selectedRepair) return;
    setPending(true);
    setStatusError("");
    try {
      const response = await api.put<Repair>(`/repairs/${selectedRepair.id}/status`, { status, note });
      setRepairs((current) => current.map((repair) => repair.id === selectedRepair.id ? response.data : repair));
      showToast({ type: "success", title: "Status aktualisiert", description: response.data.repair_number });
      setStatusOpen(false);
    } catch (err) {
      const message = getErrorMessage(err);
      setStatusError(message);
      showToast({ type: "error", title: "Status konnte nicht gespeichert werden", description: message });
    } finally {
      setPending(false);
    }
  }

  async function confirmCancel() {
    if (!cancelRepair) return;
    setPending(true);
    setCancelError("");
    try {
      const response = await api.delete<Repair>(`/repairs/${cancelRepair.id}`);
      setRepairs((current) => current.map((repair) => repair.id === cancelRepair.id ? response.data : repair));
      showToast({ type: "success", title: "Reparatur storniert", description: cancelRepair.repair_number });
      setCancelRepair(null);
    } catch (err) {
      const message = getErrorMessage(err);
      setCancelError(message);
      showToast({ type: "error", title: "Reparatur konnte nicht storniert 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">Reparaturen</h1>
          <p className="mt-1 text-sm text-slate-500">{total} Werkstattvorgänge</p>
        </div>
        {canCreate && <Button type="button" onClick={() => { setSelectedRepair(null); setFormError(""); setFormOpen(true); }}><Plus size={16} />Reparatur anlegen</Button>}
      </div>

      <div className="flex flex-col gap-3 rounded-lg border bg-white p-4 xl:flex-row xl:items-center">
        <SearchInput value={search} onChange={(value) => { setSearch(value); setPage(1); }} placeholder="Reparaturen suchen" />
        <select value={statusFilter} onChange={(event) => { setStatusFilter(event.target.value as RepairStatus | "all"); setPage(1); }} className="h-8 rounded-lg border border-input bg-transparent px-2.5 text-sm">
          <option value="all">Alle Status</option>
          {(["new", "accepted", "diagnosis", "estimate", "waiting_for_customer", "approved", "repair", "final_test", "ready_for_pickup", "shipped", "completed", "cancelled"] as RepairStatus[]).map((status) => <option key={status} value={status}>{statusLabels[status]}</option>)}
        </select>
        <select value={sourceFilter} onChange={(event) => { setSourceFilter(event.target.value as RepairSource | "all"); setPage(1); }} className="h-8 rounded-lg border border-input bg-transparent px-2.5 text-sm">
          <option value="all">Alle Quellen</option>
          {["manual", "website", "customer_portal", "email", "phone"].map((source) => <option key={source} value={source}>{source}</option>)}
        </select>
        <select value={priorityFilter} onChange={(event) => { setPriorityFilter(event.target.value as RepairPriority | "all"); setPage(1); }} className="h-8 rounded-lg border border-input bg-transparent px-2.5 text-sm">
          <option value="all">Alle Prioritäten</option>
          {(["low", "normal", "high", "urgent"] as RepairPriority[]).map((priority) => <option key={priority} value={priority}>{priorityLabels[priority]}</option>)}
        </select>
      </div>

      {!loading && !error && total === 0 && !search && statusFilter === "all" && sourceFilter === "all" && priorityFilter === "all" ? (
        <EmptyState
          title="Noch keine Reparaturen vorhanden."
          description="Lege den ersten Werkstattvorgang manuell an oder nutze später die Website-Intake-Schnittstelle."
          action={canCreate ? <Button type="button" onClick={() => setFormOpen(true)}><Plus size={16} />Reparatur anlegen</Button> : undefined}
        />
      ) : (
        <DataTable
          columns={columns}
          rows={sortedRepairs}
          rowKey={(repair) => repair.id}
          sortKey={sortKey}
          sortDirection={sortDirection}
          loading={loading}
          error={error}
          emptyTitle="Noch keine Reparaturen vorhanden."
          emptyDescription="Passe Suche oder Filter an oder lege eine Reparatur an."
          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>

      <RepairFormDialog key={`form-${selectedRepair?.id ?? "new"}-${formOpen}`} open={formOpen} repair={selectedRepair} pending={pending} serverError={formError} onOpenChange={setFormOpen} onSubmit={saveRepair} />
      <RepairStatusDialog key={`status-${selectedRepair?.id ?? "none"}-${statusOpen}`} open={statusOpen} repair={selectedRepair} pending={pending} serverError={statusError} onOpenChange={setStatusOpen} onSubmit={saveStatus} />

      <ConfirmDialog
        open={Boolean(cancelRepair)}
        title="Reparatur stornieren"
        description="Die Reparatur wird nicht physisch gelöscht, sondern auf storniert gesetzt."
        confirmLabel="Stornieren"
        pending={pending}
        onOpenChange={(open) => {
          if (!open) {
            setCancelRepair(null);
            setCancelError("");
          }
        }}
        onConfirm={confirmCancel}
      >
        {cancelRepair && (
          <div className="space-y-2 text-sm">
            <p className="font-medium">{cancelRepair.repair_number}</p>
            <p>{cancelRepair.customer_name} · {deviceLabel(cancelRepair)}</p>
            {cancelError && <p className="text-red-600">{cancelError}</p>}
          </div>
        )}
      </ConfirmDialog>
    </div>
  );
}