"use client";

import { useState } from "react";
import {
  Car,
  ArrowLeftRight,
  MapPin,
  Users,
  Globe,
} from "lucide-react";
import { useRepositories } from "@/di/repository-provider";
import { useApiQuery } from "@/presentation/hooks/use-api-query";
import { usePageHeader } from "@/presentation/hooks/use-page-header";
import { useServerPagination } from "@/presentation/hooks/use-server-pagination";
import { useT } from "@/shared/i18n/client";
import {
  ACTIVITY_ACTION_COLORS as ACTION_COLORS,
  ACTIVITY_METHOD_COLORS as METHOD_COLORS,
} from "@/shared/constants/status-colors";
import ServerDataTable from "@/presentation/components/shared/server-data-table";
import StatsCard from "@/presentation/components/shared/stats-card";
import { Badge } from "@/presentation/components/ui/badge";
import { Skeleton } from "@/presentation/components/ui/skeleton";
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/presentation/components/ui/tabs";
import { SearchableSelect } from "@/presentation/components/ui/searchable-select";
import type { Column } from "@/presentation/components/shared/server-data-table";
import type {
  UserActivityLog,
  VehicleHistoryLog,
  StatusChangeLog,
  SiteChangeLog,
} from "@/domain/entities/activity-log";

export default function ActivityLogsPage() {
  const t = useT();
  usePageHeader(t.pages.activityLogs.title, t.pages.activityLogs.subtitle);
  const container = useRepositories();
  const [activeTab, setActiveTab] = useState("user-activity");

  const userPagination = useServerPagination();
  const vehiclePagination = useServerPagination();
  const statusPagination = useServerPagination();
  const sitePagination = useServerPagination();

  // Stats
  const { data: stats, loading: statsLoading } = useApiQuery(
    () => container.activityLogRepository.getStats(),
    { deps: [] }
  );

  // User Activity
  const { data: userResponse, loading: userLoading } = useApiQuery(
    () => container.activityLogRepository.getUserActivity(userPagination.params),
    { deps: [userPagination.params], enabled: activeTab === "user-activity" }
  );

  // Vehicle History
  const { data: vehicleResponse, loading: vehicleLoading } = useApiQuery(
    () => container.activityLogRepository.getVehicleHistory(vehiclePagination.params),
    { deps: [vehiclePagination.params], enabled: activeTab === "vehicle-history" }
  );

  // Status Changes
  const { data: statusResponse, loading: statusLoading } = useApiQuery(
    () => container.activityLogRepository.getStatusChanges(statusPagination.params),
    { deps: [statusPagination.params], enabled: activeTab === "status-changes" }
  );

  // Site Changes
  const { data: siteResponse, loading: siteLoading } = useApiQuery(
    () => container.activityLogRepository.getSiteChanges(sitePagination.params),
    { deps: [sitePagination.params], enabled: activeTab === "site-changes" }
  );

  // ── Columns ──

  const userColumns: Column<UserActivityLog>[] = [
    {
      key: "action",
      label: t.activityLogs.columns.action,
      render: (row) => (
        <Badge className={`text-xs border-0 ${ACTION_COLORS[row.action] ?? "bg-muted text-muted-foreground"}`}>
          {row.action}
        </Badge>
      ),
    },
    {
      key: "method",
      label: t.activityLogs.columns.method,
      render: (row) => (
        <Badge className={`text-xs font-mono border-0 ${METHOD_COLORS[row.method] ?? "bg-muted text-muted-foreground"}`}>
          {row.method}
        </Badge>
      ),
    },
    {
      key: "module",
      label: t.activityLogs.columns.module,
      render: (row) => (
        <span className="text-xs font-medium capitalize">{row.module}</span>
      ),
    },
    {
      key: "user",
      label: t.activityLogs.columns.user,
      render: (row) => row.user ? (
        <div>
          <p className="text-sm font-medium">{row.user.name}</p>
          <p className="text-xs text-muted-foreground">{row.user.email}</p>
        </div>
      ) : "—",
    },
    {
      key: "company",
      label: t.forms.company,
      render: (row) => row.company?.name ?? "—",
    },
    {
      key: "ip_address",
      label: t.activityLogs.columns.ip,
      render: (row) => (
        <span className="text-xs font-mono text-muted-foreground">{row.ip_address}</span>
      ),
    },
    {
      key: "created_at",
      label: t.common.date,
      sortable: true,
      render: (row) => (
        <span className="text-xs text-muted-foreground">{row.created_at}</span>
      ),
    },
  ];

  const vehicleColumns: Column<VehicleHistoryLog>[] = [
    {
      key: "action_made",
      label: t.activityLogs.columns.action,
      render: (row) => (
        <Badge className="text-xs border-0 bg-amber-50 text-amber-700 dark:bg-amber-950/40 dark:text-amber-400">
          {row.action_made}
        </Badge>
      ),
    },
    {
      key: "description",
      label: t.activityLogs.columns.description,
      truncate: true,
      render: (row) => (
        <span className="text-sm">{row.description_fr}</span>
      ),
    },
    {
      key: "vehicle",
      label: t.activityLogs.columns.vehicle,
      render: (row) => row.vehicle ? (
        <div>
          <p className="text-sm font-medium">{row.vehicle.numberplate}</p>
          <p className="text-xs text-muted-foreground">{row.vehicle.display_name}</p>
        </div>
      ) : "—",
    },
    {
      key: "user",
      label: t.activityLogs.columns.user,
      render: (row) => row.user?.name ?? "—",
    },
    {
      key: "company",
      label: t.forms.company,
      render: (row) => row.company?.name ?? "—",
    },
    {
      key: "created_at",
      label: t.common.date,
      sortable: true,
      render: (row) => (
        <span className="text-xs text-muted-foreground">{row.created_at}</span>
      ),
    },
  ];

  const statusColumns: Column<StatusChangeLog>[] = [
    {
      key: "old_custom_status",
      label: t.activityLogs.columns.oldStatus,
      render: (row) => row.old_custom_status ? (
        <Badge className="text-xs border-0" style={{ backgroundColor: row.old_custom_status.color + "20", color: row.old_custom_status.color }}>
          {row.old_custom_status.label}
        </Badge>
      ) : <span className="text-muted-foreground">—</span>,
    },
    {
      key: "new_custom_status",
      label: t.activityLogs.columns.newStatus,
      render: (row) => row.new_custom_status ? (
        <Badge className="text-xs border-0" style={{ backgroundColor: row.new_custom_status.color + "20", color: row.new_custom_status.color }}>
          {row.new_custom_status.label}
        </Badge>
      ) : <span className="text-muted-foreground">—</span>,
    },
    {
      key: "vehicle",
      label: t.activityLogs.columns.vehicle,
      render: (row) => row.vehicle ? (
        <div>
          <p className="text-sm font-medium">{row.vehicle.numberplate}</p>
          <p className="text-xs text-muted-foreground">{row.vehicle.display_name}</p>
        </div>
      ) : "—",
    },
    {
      key: "user",
      label: t.activityLogs.columns.user,
      render: (row) => row.user?.name ?? "—",
    },
    {
      key: "company",
      label: t.forms.company,
      render: (row) => row.company?.name ?? "—",
    },
    {
      key: "date",
      label: t.common.date,
      sortable: true,
      render: (row) => (
        <span className="text-xs text-muted-foreground">{row.date}</span>
      ),
    },
  ];

  const siteColumns: Column<SiteChangeLog>[] = [
    {
      key: "old_site",
      label: t.activityLogs.columns.oldSite,
      render: (row) => row.old_site ? (
        <span className="text-sm">{row.old_site.name}</span>
      ) : <span className="text-muted-foreground">—</span>,
    },
    {
      key: "new_site",
      label: t.activityLogs.columns.newSite,
      render: (row) => row.new_site ? (
        <span className="text-sm font-medium">{row.new_site.name}</span>
      ) : <span className="text-muted-foreground">—</span>,
    },
    {
      key: "vehicle",
      label: t.activityLogs.columns.vehicle,
      render: (row) => row.vehicle ? (
        <div>
          <p className="text-sm font-medium">{row.vehicle.numberplate}</p>
          <p className="text-xs text-muted-foreground">{row.vehicle.display_name}</p>
        </div>
      ) : "—",
    },
    {
      key: "user",
      label: t.activityLogs.columns.user,
      render: (row) => row.user?.name ?? "—",
    },
    {
      key: "company",
      label: t.forms.company,
      render: (row) => row.company?.name ?? "—",
    },
    {
      key: "date",
      label: t.common.date,
      sortable: true,
      render: (row) => (
        <span className="text-xs text-muted-foreground">{row.date}</span>
      ),
    },
  ];

  return (
    <div className="p-6 space-y-6">
      {/* Stats */}
      {statsLoading ? (
        <div className="grid grid-cols-2 lg:grid-cols-4 gap-4">
          {Array.from({ length: 4 }).map((_, i) => (
            <Skeleton key={i} className="h-32 rounded-xl" />
          ))}
        </div>
      ) : stats ? (
        <div className="grid grid-cols-2 lg:grid-cols-4 gap-4">
          <StatsCard
            title={t.activityLogs.stats.userActivity}
            value={stats.user_activity.total}
            subtitle={t.activityLogs.stats.todayCount(stats.user_activity.today, stats.user_activity.last_30_days)}
            icon={Users}
            accent="blue"
          />
          <StatsCard
            title={t.activityLogs.stats.vehicleHistory}
            value={stats.vehicle_history.total}
            subtitle={t.activityLogs.stats.last30Days(stats.vehicle_history.last_30_days)}
            icon={Car}
            accent="cyan"
          />
          <StatsCard
            title={t.activityLogs.stats.statusChanges}
            value={stats.status_changes.total}
            subtitle={t.activityLogs.stats.last30Days(stats.status_changes.last_30_days)}
            icon={ArrowLeftRight}
            accent="amber"
          />
          <StatsCard
            title={t.activityLogs.stats.siteChanges}
            value={stats.site_changes.total}
            subtitle={t.activityLogs.stats.last30Days(stats.site_changes.last_30_days)}
            icon={MapPin}
            accent="purple"
          />
        </div>
      ) : null}

      {/* Tabs */}
      <Tabs value={activeTab} onValueChange={setActiveTab}>
        <TabsList>
          <TabsTrigger value="user-activity" className="gap-1.5">
            <Globe className="w-3.5 h-3.5" />
            {t.activityLogs.tabs.activity}
          </TabsTrigger>
          <TabsTrigger value="vehicle-history" className="gap-1.5">
            <Car className="w-3.5 h-3.5" />
            {t.activityLogs.tabs.vehicles}
          </TabsTrigger>
          <TabsTrigger value="status-changes" className="gap-1.5">
            <ArrowLeftRight className="w-3.5 h-3.5" />
            {t.activityLogs.tabs.statuses}
          </TabsTrigger>
          <TabsTrigger value="site-changes" className="gap-1.5">
            <MapPin className="w-3.5 h-3.5" />
            {t.activityLogs.tabs.sites}
          </TabsTrigger>
        </TabsList>

        {/* User Activity Tab */}
        <TabsContent value="user-activity" className="mt-4">
          <ServerDataTable
            columns={userColumns}
            data={userResponse?.items ?? []}
            total={userResponse?.total ?? 0}
            page={userPagination.page}
            totalPages={userResponse?.last_page ?? 1}
            loading={userLoading}
            search={userPagination.search}
            onSearchChange={userPagination.setSearch}
            onPageChange={userPagination.setPage}
            onSortChange={userPagination.setSort}
            sortBy={userPagination.orderBy}
            sortOrder={userPagination.order}
            searchPlaceholder={t.activityLogs.search.userActivity}
            toolbar={
              <>
                <SearchableSelect
                  label={t.activityLogs.columns.action}
                  triggerClassName="w-32"
                  placeholder={t.activityLogs.columns.action}
                  value={(userPagination.filters.action as string) ?? "all"}
                  onValueChange={(v) => userPagination.setFilter("action", v === "all" ? undefined : v)}
                  options={[
                    { value: "all", label: t.common.allF },
                    { value: "login", label: "Login" },
                    { value: "logout", label: "Logout" },
                    { value: "create", label: "Create" },
                    { value: "update", label: "Update" },
                    { value: "delete", label: "Delete" },
                    { value: "view", label: "View" },
                  ]}
                />
                <SearchableSelect
                  label={t.activityLogs.columns.module}
                  triggerClassName="w-32"
                  placeholder={t.activityLogs.columns.module}
                  value={(userPagination.filters.module as string) ?? "all"}
                  onValueChange={(v) => userPagination.setFilter("module", v === "all" ? undefined : v)}
                  options={[
                    { value: "all", label: t.common.all },
                    { value: "vehicles", label: t.activityLogs.filters.modules.vehicles },
                    { value: "drivers", label: t.activityLogs.filters.modules.drivers },
                    { value: "sites", label: t.activityLogs.filters.modules.sites },
                  ]}
                />
              </>
            }
          />
        </TabsContent>

        {/* Vehicle History Tab */}
        <TabsContent value="vehicle-history" className="mt-4">
          <ServerDataTable
            columns={vehicleColumns}
            data={vehicleResponse?.items ?? []}
            total={vehicleResponse?.total ?? 0}
            page={vehiclePagination.page}
            totalPages={vehicleResponse?.last_page ?? 1}
            loading={vehicleLoading}
            search={vehiclePagination.search}
            onSearchChange={vehiclePagination.setSearch}
            onPageChange={vehiclePagination.setPage}
            onSortChange={vehiclePagination.setSort}
            sortBy={vehiclePagination.orderBy}
            sortOrder={vehiclePagination.order}
            searchPlaceholder={t.activityLogs.search.vehicleHistory}
            toolbar={
              <SearchableSelect
                label={t.activityLogs.columns.action}
                triggerClassName="w-40"
                placeholder={t.activityLogs.columns.action}
                value={(vehiclePagination.filters.action_made as string) ?? "all"}
                onValueChange={(v) => vehiclePagination.setFilter("action_made", v === "all" ? undefined : v)}
                options={[
                  { value: "all", label: t.common.allF },
                  { value: "archived-vehicle", label: t.activityLogs.filters.vehicleActions.archived },
                  { value: "unarchive-vehicle", label: t.activityLogs.filters.vehicleActions.unarchived },
                ]}
              />
            }
          />
        </TabsContent>

        {/* Status Changes Tab */}
        <TabsContent value="status-changes" className="mt-4">
          <ServerDataTable
            columns={statusColumns}
            data={statusResponse?.items ?? []}
            total={statusResponse?.total ?? 0}
            page={statusPagination.page}
            totalPages={statusResponse?.last_page ?? 1}
            loading={statusLoading}
            search={statusPagination.search}
            onSearchChange={statusPagination.setSearch}
            onPageChange={statusPagination.setPage}
            onSortChange={statusPagination.setSort}
            sortBy={statusPagination.orderBy}
            sortOrder={statusPagination.order}
            toolbar={
              undefined
            }
          />
        </TabsContent>

        {/* Site Changes Tab */}
        <TabsContent value="site-changes" className="mt-4">
          <ServerDataTable
            columns={siteColumns}
            data={siteResponse?.items ?? []}
            total={siteResponse?.total ?? 0}
            page={sitePagination.page}
            totalPages={siteResponse?.last_page ?? 1}
            loading={siteLoading}
            search={sitePagination.search}
            onSearchChange={sitePagination.setSearch}
            onPageChange={sitePagination.setPage}
            onSortChange={sitePagination.setSort}
            sortBy={sitePagination.orderBy}
            sortOrder={sitePagination.order}
          />
        </TabsContent>
      </Tabs>
    </div>
  );
}