"use client";

import { useEffect, useRef, useState } from "react";
import {
  MapPin, Trash2, ChevronLeft, ChevronRight, MoreHorizontal,
  UserCheck, RefreshCw, CheckCircle2, Search, Wrench, FileCheck,
  XCircle, ExternalLink,
} from "lucide-react";
import {
  DropdownMenu, DropdownMenuContent, DropdownMenuItem,
  DropdownMenuSeparator, DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu";
import { Badge } from "@/components/ui/badge";
import { Button } from "@/components/ui/button";
import {
  Pagination, PaginationContent, PaginationItem,
} from "@/components/ui/pagination";
import { DataTable, type Column } from "@/components/admin/DataTable";
import { PageHeader } from "@/components/admin/PageHeader";
import { cn } from "@/lib/utils";
import { toast } from "sonner";
import { getRequests, deleteRequest } from "@/services/requests";

// ─── Types ────────────────────────────────────────────────────────────────────

type RequestStatus =
  | "submitted" | "reviewing" | "assigned"
  | "in_progress" | "completed" | "closed" | "cancelled";

interface TimelineEvent {
  status: RequestStatus;
  notes: string | null;
  actor_type: string;
  timestamp: string;
}

interface InspectionRequest {
  id: number;
  reference: string;
  company_name: string;
  contact_person: string;
  email: string;
  phone?: string;
  location: string;
  inspection_type_id?: number;
  inspection_type: { id: number; heading: string };
  number_of_personnel?: number | null;
  start_date?: string | null;
  job_duration?: string | null;
  equipment_available?: boolean;
  equipment_details?: string | null;
  certification_required?: string[] | null;
  additional_notes?: string | null;
  assigned_inspector?: string | null;
  status: RequestStatus;
  tracking_token?: string;
  timeline: TimelineEvent[];
  created_at: string;
  updated_at: string;
}

// ─── Status config ─────────────────────────────────────────────────────────────

const STATUS_LABELS: Record<RequestStatus, string> = {
  submitted: "Submitted",
  reviewing: "Under Review",
  assigned: "Assigned",
  in_progress: "In Progress",
  completed: "Completed",
  closed: "Closed",
  cancelled: "Cancelled",
};

const STATUS_DESCRIPTIONS: Record<RequestStatus, string> = {
  submitted: "Request received and in queue.",
  reviewing: "Team is reviewing requirements and sourcing inspectors.",
  assigned: "A qualified inspector has been assigned.",
  in_progress: "Inspection is currently underway at the site.",
  completed: "Inspection complete. Reports available.",
  closed: "This request has been closed.",
  cancelled: "This request was cancelled.",
};

const STATUS_VARIANTS: Record<RequestStatus, "default" | "secondary" | "destructive" | "outline"> = {
  submitted: "default",
  reviewing: "secondary",
  assigned: "secondary",
  in_progress: "default",
  completed: "outline",
  closed: "outline",
  cancelled: "destructive",
};

const STATUS_COLORS: Record<RequestStatus, string> = {
  submitted: "bg-blue-100 text-blue-700",
  reviewing: "bg-yellow-100 text-yellow-700",
  assigned: "bg-purple-100 text-purple-700",
  in_progress: "bg-orange-100 text-orange-700",
  completed: "bg-green-100 text-green-700",
  closed: "bg-muted text-muted-foreground",
  cancelled: "bg-red-100 text-red-700",
};

const ALL_STATUSES: RequestStatus[] = [
  "submitted", "reviewing", "assigned", "in_progress", "completed", "closed", "cancelled",
];

// ─── Helpers ──────────────────────────────────────────────────────────────────

function formatDate(iso: string) {
  return new Date(iso).toLocaleDateString("en-GB", { day: "numeric", month: "short", year: "numeric" });
}

function formatDateTime(iso: string) {
  return new Date(iso).toLocaleString("en-GB", { day: "numeric", month: "short", year: "numeric", hour: "2-digit", minute: "2-digit" });
}

function DetailField({ label, value }: { label: string; value?: string | null }) {
  if (!value) return null;
  return (
    <div>
      <p className="text-[11px] uppercase tracking-wider text-muted-foreground font-semibold">{label}</p>
      <p className="text-sm mt-0.5 break-words leading-relaxed">{value}</p>
    </div>
  );
}

// ─── Status configs ───────────────────────────────────────────────────────────

const TIMELINE_ICONS: Record<RequestStatus, React.ElementType> = {
  submitted: CheckCircle2,
  reviewing: Search,
  assigned: UserCheck,
  in_progress: Wrench,
  completed: FileCheck,
  closed: CheckCircle2,
  cancelled: XCircle,
};

const STATUS_ORDER: RequestStatus[] = ["submitted", "reviewing", "assigned", "in_progress", "completed"];

function AdminTimeline({ current, events }: { current: RequestStatus; events: TimelineEvent[] }) {
  const isCancelled = current === "cancelled";
  const steps = isCancelled ? ([...STATUS_ORDER, "cancelled"] as RequestStatus[]) : STATUS_ORDER;
  const currentIdx = steps.indexOf(current);

  return (
    <div className="relative">
      <div className="flex flex-col gap-0">
        {steps.map((step, i) => {
          const Icon = TIMELINE_ICONS[step] ?? CheckCircle2;
          const isDone = i < currentIdx;
          const isActive = i === currentIdx;
          const event = events.find((e) => e.status === step);
          return (
            <div key={step} className="flex gap-4 relative">
              {i < steps.length - 1 && (
                <div className={cn("absolute left-[15px] top-8 w-0.5 h-full -z-0", isDone || isActive ? "bg-accent" : "bg-border")} />
              )}
              <div className={cn("relative z-10 w-8 h-8 rounded-full flex items-center justify-center shrink-0 mt-0.5 transition-all", isDone ? "bg-accent text-accent-foreground" : isActive ? "bg-accent text-accent-foreground ring-4 ring-accent/20" : "bg-muted text-muted-foreground")}>
                <Icon className="w-4 h-4" />
              </div>
              <div className="pb-8">
                <p className={cn("font-semibold text-sm", isActive || isDone ? "text-foreground" : "text-muted-foreground")}>
                  {STATUS_LABELS[step]}
                </p>
                <p className="text-xs text-muted-foreground mt-0.5">{STATUS_DESCRIPTIONS[step]}</p>
                {event && (
                  <p className="text-xs text-muted-foreground mt-1">
                    {formatDateTime(event.timestamp)}
                    {event.notes && <> — <span className="italic">{event.notes}</span></>}
                    <span className="ml-1.5 text-[10px] uppercase tracking-wider opacity-60">({event.actor_type})</span>
                  </p>
                )}
              </div>
            </div>
          );
        })}
      </div>
    </div>
  );
}

// ─── Page ─────────────────────────────────────────────────────────────────────

export default function RequestsAdminPage() {
  const [requests, setRequests] = useState<InspectionRequest[]>([]);
  const [loading, setLoading] = useState(true);
  const [search, setSearch] = useState("");
  const [statusFilter, setStatusFilter] = useState<string>("all");
  const [page, setPage] = useState(1);
  const [lastPage, setLastPage] = useState(1);
  const [total, setTotal] = useState(0);
  const [viewing, setViewing] = useState<InspectionRequest | null>(null);
  const debounceRef = useRef<ReturnType<typeof setTimeout> | null>(null);

  const fetchRequests = (q: string, p: number, status: string) => {
    setLoading(true);
    const params: Record<string, any> = { page: p };
    if (q) params.search = q;
    if (status !== "all") params.status = status;
    getRequests(params)
      .then((res: any) => {
        setRequests(res.data ?? res);
        setLastPage(res.meta?.last_page ?? 1);
        setTotal(res.meta?.total ?? (res.data ?? res).length);
      })
      .catch(() => toast.error("Failed to load requests."))
      .finally(() => setLoading(false));
  };

  useEffect(() => {
    fetchRequests(search, page, statusFilter);
  // eslint-disable-next-line react-hooks/exhaustive-deps
  }, []);


  const handleSearchChange = (value: string) => {
    setSearch(value);
    setPage(1);
    if (debounceRef.current) clearTimeout(debounceRef.current);
    debounceRef.current = setTimeout(() => fetchRequests(value, 1, statusFilter), 400);
  };

  const handleStatusFilterChange = (value: string) => {
    setStatusFilter(value);
    setPage(1);
    fetchRequests(search, 1, value);
  };

  const handlePageChange = (p: number) => {
    setPage(p);
    fetchRequests(search, p, statusFilter);
  };


  const handleDelete = async (item: InspectionRequest) => {
    setRequests((prev) => prev.filter((r) => r.id !== item.id));
    if (viewing?.id === item.id) setViewing(null);
    try {
      await deleteRequest(item.id);
      toast.success("Request deleted.");
    } catch {
      setRequests((prev) => [item, ...prev]);
      toast.error("Failed to delete request.");
    }
  };

  const pendingCount = requests.filter((r) => r.status === "submitted" || r.status === "reviewing").length;

  const columns: Column<InspectionRequest>[] = [
    {
      key: "company_name",
      label: "Company",
      render: (item) => (
        <div className="min-w-0">
          <p className="font-medium truncate">{item.company_name}</p>
          <p className="text-xs text-muted-foreground truncate">{item.contact_person}</p>
        </div>
      ),
    },
    {
      key: "inspection_type",
      label: "Inspection Type",
      render: (item) => (
        <Badge variant="secondary" className="text-xs font-normal whitespace-nowrap">
          {item.inspection_type?.heading ?? "—"}
        </Badge>
      ),
    },
    {
      key: "location",
      label: "Location",
      render: (item) => (
        <div className="flex items-center gap-1.5 text-sm text-muted-foreground">
          <MapPin className="h-3.5 w-3.5 shrink-0" />
          <span className="truncate max-w-[140px]">{item.location}</span>
        </div>
      ),
    },
    {
      key: "status",
      label: "Status",
      render: (item) => (
        <span className={`inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-semibold ${STATUS_COLORS[item.status]}`}>
          {STATUS_LABELS[item.status]}
        </span>
      ),
      className: "w-36",
    },
    {
      key: "number_of_personnel",
      label: "Personnel",
      render: (item) => (
        <span className="text-sm text-muted-foreground">{item.number_of_personnel ?? "—"}</span>
      ),
      className: "w-24",
    },
    {
      key: "created_at",
      label: "Submitted",
      render: (item) => (
        <span className="text-xs text-muted-foreground whitespace-nowrap">{formatDate(item.created_at)}</span>
      ),
      className: "w-28",
    },
    {
      key: "actions_inline",
      label: "",
      render: (item) => (
        <DropdownMenu>
          <DropdownMenuTrigger
            className="inline-flex h-8 w-8 items-center justify-center rounded-md opacity-0 transition-opacity group-hover:opacity-100 hover:bg-accent hover:text-accent-foreground focus-visible:outline-none"
            onClick={(e) => e.stopPropagation()}
          >
            <MoreHorizontal className="h-4 w-4" />
          </DropdownMenuTrigger>
          <DropdownMenuContent align="end">
            <DropdownMenuItem onClick={() => window.open(`/admin/inspection-quotes/${item.id}`, "_self")}>
              <ExternalLink className="mr-2 h-3.5 w-3.5" /> Tracking Page
            </DropdownMenuItem>
            <DropdownMenuSeparator />
            <DropdownMenuItem
              className="text-destructive focus:text-destructive"
              onClick={() => handleDelete(item)}
            >
              <Trash2 className="mr-2 h-3.5 w-3.5" /> Delete
            </DropdownMenuItem>
          </DropdownMenuContent>
        </DropdownMenu>
      ),
      className: "w-12",
    },
  ];

  return (
    <div className="p-6 lg:p-8 max-w-7xl mx-auto space-y-6">
      <PageHeader
        title="Inspection Requests"
        description="Manpower inspection requests submitted through the website."
      >
        {pendingCount > 0 && (
          <Badge variant="default" className="gap-1.5">
            <span className="h-1.5 w-1.5 rounded-full bg-white/80" />
            {pendingCount} pending
          </Badge>
        )}
        <Button
          variant="outline"
          size="sm"
          className="gap-2"
          onClick={() => fetchRequests(search, page, statusFilter)}
        >
          <RefreshCw className="h-3.5 w-3.5" /> Refresh
        </Button>
      </PageHeader>

      {/* Status filter tabs */}
      <div className="flex flex-wrap gap-2">
        {[{ value: "all", label: "All" }, ...ALL_STATUSES.map((s) => ({ value: s, label: STATUS_LABELS[s] }))].map(({ value, label }) => (
          <button
            key={value}
            onClick={() => handleStatusFilterChange(value)}
            className={`px-3 py-1.5 rounded-full text-xs font-semibold transition-colors ${
              statusFilter === value
                ? "bg-primary text-primary-foreground"
                : "bg-muted text-muted-foreground hover:bg-muted/80"
            }`}
          >
            {label}
          </button>
        ))}
      </div>

      <DataTable
        data={requests}
        columns={columns}
        searchValue={search}
        onSearchChange={handleSearchChange}
        searchPlaceholder="Search by company or contact…"
        loading={loading}
      />

      {lastPage > 1 && (
        <div className="flex items-center justify-between text-sm text-muted-foreground">
          <span>{total} request{total !== 1 ? "s" : ""}</span>
          <Pagination className="mx-0 w-auto justify-end">
            <PaginationContent>
              <PaginationItem>
                <Button variant="outline" size="icon" className="h-8 w-8" onClick={() => handlePageChange(page - 1)} disabled={page <= 1 || loading}>
                  <ChevronLeft className="h-4 w-4" />
                </Button>
              </PaginationItem>
              <PaginationItem>
                <span className="px-3 text-sm">Page {page} of {lastPage}</span>
              </PaginationItem>
              <PaginationItem>
                <Button variant="outline" size="icon" className="h-8 w-8" onClick={() => handlePageChange(page + 1)} disabled={page >= lastPage || loading}>
                  <ChevronRight className="h-4 w-4" />
                </Button>
              </PaginationItem>
            </PaginationContent>
          </Pagination>
        </div>
      )}

    </div>
  );
}