"use client";

import { useCallback, useEffect, useState } from "react";
import Link from "next/link";
import {
  AlertCircle,
  ArrowRight,
  Award,
  BookOpenCheck,
  CheckCircle,
  Clock,
  FileText,
  IdCard,
  ShieldCheck,
  TrendingUp,
  Users,
} from "lucide-react";
import { Badge } from "@/components/ui/badge";
import { Alert, AlertDescription } from "@/components/ui/alert";
import { Button } from "@/components/ui/button";
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogHeader,
  DialogTitle,
} from "@/components/ui/dialog";
import { AdminTablePagination } from "@/components/admin/admin-table-pagination";
import { apiRequest, apiUrl } from "@/lib/api";
import { getLocalizedApiMessage } from "@/lib/api-message";
import { useLanguage } from "@/lib/i18n";

type DashboardActivity = {
  message: string;
  time: string;
  status: string;
};

type DashboardData = {
  cards: {
    guides: {
      total: number;
      approved: number;
      pending: number;
    };
    blogs: {
      total: number;
      pending: number;
    };
    id_cards: {
      total: number;
      pending: number;
    };
    certifications: {
      total: number;
      pending: number;
    };
  };
  quick_actions: {
    pending_guides: number;
    pending_blogs: number;
    pending_id_cards: number;
    pending_certifications: number;
  };
  recent_activity: DashboardActivity[];
  recent_activity_pagination: {
    current_page: number;
    per_page: number;
    total: number;
    from?: number | null;
    to?: number | null;
    last_page?: number;
  };
  monthly_reports: {
    tourists_served: number;
    tours_conducted: number;
    revenue: number;
  };
};

type DashboardResponse = {
  statusCode: number;
  success: boolean;
  data?: DashboardData;
  message?: string;
  message_hi?: string;
};

const emptyDashboard: DashboardData = {
  cards: {
    guides: {
      total: 0,
      approved: 0,
      pending: 0,
    },
    blogs: {
      total: 0,
      pending: 0,
    },
    id_cards: {
      total: 0,
      pending: 0,
    },
    certifications: {
      total: 0,
      pending: 0,
    },
  },
  quick_actions: {
    pending_guides: 0,
    pending_blogs: 0,
    pending_id_cards: 0,
    pending_certifications: 0,
  },
  recent_activity: [],
  recent_activity_pagination: {
    current_page: 1,
    per_page: 5,
    total: 0,
    from: null,
    to: null,
    last_page: 1,
  },
  monthly_reports: {
    tourists_served: 0,
    tours_conducted: 0,
    revenue: 0,
  },
};

function getAdminToken() {
  const token = localStorage.getItem("auth_token");

  if (!token) {
    throw new Error("Admin token missing. Please login again.");
  }

  return token;
}

function interpolate(
  template: string,
  values: Record<string, string | number>,
) {
  return Object.entries(values).reduce(
    (text, [key, value]) => text.replace(`{${key}}`, String(value)),
    template,
  );
}

function translateActivityMessage(message: string, language: "en" | "hi") {
  if (language !== "hi") return message;

  const statusMap: Record<string, string> = {
    Draft: "ड्राफ्ट",
    Submitted: "सबमिट",
    Reviewed: "समीक्षित",
    Approved: "स्वीकृत",
    Rejected: "अस्वीकृत",
  };

  if (message.startsWith("Guide verified:")) {
    return message.replace("Guide verified:", "गाइड सत्यापित:");
  }

  if (message.startsWith("New guide registration:")) {
    return message.replace("New guide registration:", "नया गाइड पंजीकरण:");
  }

  if (message.startsWith("Blog approved:")) {
    return message.replace("Blog approved:", "ब्लॉग स्वीकृत:");
  }

  if (message.startsWith("Blog submitted for approval:")) {
    return message.replace(
      "Blog submitted for approval:",
      "ब्लॉग स्वीकृति हेतु सबमिट:",
    );
  }

  const reportMatch = message.match(
    /^Monthly report (Draft|Submitted|Reviewed|Approved|Rejected): (.+)$/,
  );
  if (reportMatch) {
    return `मासिक रिपोर्ट ${statusMap[reportMatch[1]]}: ${reportMatch[2]}`;
  }

  return message;
}

function translateRelativeTime(value: string, language: "en" | "hi") {
  if (language !== "hi" || !value || value === "-") return value;

  return value
    .replace("seconds ago", "सेकंड पहले")
    .replace("second ago", "सेकंड पहले")
    .replace("minutes ago", "मिनट पहले")
    .replace("minute ago", "मिनट पहले")
    .replace("hours ago", "घंटे पहले")
    .replace("hour ago", "घंटे पहले")
    .replace("days ago", "दिन पहले")
    .replace("day ago", "दिन पहले")
    .replace("weeks ago", "सप्ताह पहले")
    .replace("week ago", "सप्ताह पहले")
    .replace("months ago", "महीने पहले")
    .replace("month ago", "महीने पहले")
    .replace("years ago", "वर्ष पहले")
    .replace("year ago", "वर्ष पहले");
}

export default function AdminDashboard() {
  const { language, t } = useLanguage();
  const [dashboard, setDashboard] = useState<DashboardData>(emptyDashboard);
  const [isLoading, setIsLoading] = useState(true);
  const [isActivityLoading, setIsActivityLoading] = useState(false);
  const [isActivityDialogOpen, setIsActivityDialogOpen] = useState(false);
  const [error, setError] = useState("");

  const fetchDashboard = useCallback(
    async (activityPage = 1, activityPerPage = 5, activityOnly = false) => {
      if (activityOnly) {
        setIsActivityLoading(true);
      } else {
        setIsLoading(true);
      }
      setError("");

      try {
        const token = getAdminToken();
        const params = new URLSearchParams({
          activity_page: String(activityPage),
          activity_per_page: String(activityPerPage),
        });
        const response = await apiRequest(
          apiUrl(`/admin/dashboard?${params}`),
          {
            headers: {
              Authorization: `Bearer ${token}`,
              Accept: "application/json",
            },
          },
        );
        const result = (await response.json()) as DashboardResponse;

        if (!response.ok || result.success === false || !result.data) {
          throw new Error(
            getLocalizedApiMessage(result, t("admin.failedLoadDashboard")),
          );
        }

        setDashboard(result.data);
      } catch (fetchError) {
        setError(
          fetchError instanceof Error
            ? fetchError.message
            : t("admin.failedLoadDashboard"),
        );
        if (!activityOnly) {
          setDashboard(emptyDashboard);
        }
      } finally {
        setIsLoading(false);
        setIsActivityLoading(false);
      }
    },
    [t],
  );

  useEffect(() => {
    fetchDashboard();
  }, [fetchDashboard]);

  const stats = [
    {
      title: t("admin.totalGuides"),
      value: dashboard.cards.guides.total,
      description: interpolate(t("admin.verifiedPending"), {
        approved: dashboard.cards.guides.approved,
        pending: dashboard.cards.guides.pending,
      }),
      icon: Users,
    },
    {
      title: t("admin.blogPosts"),
      value: dashboard.cards.blogs.total,
      description: interpolate(t("admin.pendingApproval"), {
        count: dashboard.cards.blogs.pending,
      }),
      icon: FileText,
    },
    {
      title: t("admin.idCardRequests"),
      value: dashboard.cards.id_cards.total,
      description: interpolate(t("admin.pendingCount"), {
        count: dashboard.cards.id_cards.pending,
      }),
      icon: IdCard,
    },
    {
      title: t("admin.certifications"),
      value: dashboard.cards.certifications.total,
      description: interpolate(t("admin.pendingVerification"), {
        count: dashboard.cards.certifications.pending,
      }),
      icon: Award,
    },
  ];

  const recentActivity = dashboard.recent_activity;
  const activityPagination = dashboard.recent_activity_pagination;

  const quickActions = [
    {
      label: t("admin.reviewPendingGuides"),
      description: t("admin.reviewPendingGuidesDescription"),
      href: "/admin/guides?status=pending",
      count: dashboard.quick_actions.pending_guides,
      icon: Users,
      tone: "primary",
    },
    {
      label: t("admin.approveBlogPosts"),
      description: t("admin.approveBlogPostsDescription"),
      href: "/admin/blogs?status=submitted",
      count: dashboard.quick_actions.pending_blogs,
      icon: BookOpenCheck,
      tone: "blue",
    },
    {
      label: t("admin.processIdCards"),
      description: t("admin.processIdCardsDescription"),
      href: "/admin/id-cards/issued",
      count: dashboard.quick_actions.pending_id_cards,
      icon: IdCard,
      tone: "green",
    },
    {
      label: t("admin.verifyCertifications"),
      description: t("admin.verifyCertificationsDescription"),
      href: "/admin/certifications?status=pending",
      count: dashboard.quick_actions.pending_certifications,
      icon: ShieldCheck,
      tone: "red",
    },
  ] as const;

  const quickActionStyles = {
    primary: {
      icon: "bg-[var(--theme-surface-strong)] text-[var(--theme-primary)]",
      badge: "bg-[var(--theme-primary)] text-white",
      bar: "bg-[var(--theme-primary)]",
      hover:
        "hover:border-[var(--theme-secondary)]/45 hover:shadow-[var(--theme-secondary)]/10",
    },
    blue: {
      icon: "bg-sky-50 text-sky-700",
      badge: "bg-sky-700 text-white",
      bar: "bg-sky-600",
      hover: "hover:border-sky-200 hover:shadow-sky-500/10",
    },
    green: {
      icon: "bg-green-50 text-green-700",
      badge: "bg-green-700 text-white",
      bar: "bg-green-600",
      hover: "hover:border-green-200 hover:shadow-green-500/10",
    },
    red: {
      icon: "bg-red-50 text-red-700",
      badge: "bg-red-700 text-white",
      bar: "bg-red-600",
      hover: "hover:border-red-200 hover:shadow-red-500/10",
    },
  };

  const reportStats = [
    {
      label: t("admin.touristsServed"),
      value: dashboard.monthly_reports.tourists_served,
    },
    {
      label: t("admin.toursConducted"),
      value: dashboard.monthly_reports.tours_conducted,
    },
    {
      label: t("admin.totalRevenue"),
      value: `INR ${dashboard.monthly_reports.revenue.toLocaleString("en-IN")}`,
    },
  ];

  return (
    <div className="space-y-5">
      {error && (
        <Alert className="border-red-200 bg-red-50 text-red-700">
          <AlertDescription>{error}</AlertDescription>
        </Alert>
      )}

      <div className="grid gap-4 sm:grid-cols-2 xl:grid-cols-4">
        {stats.map((stat) => (
          <Card
            key={stat.title}
            className="group overflow-hidden rounded-3xl border-[var(--theme-border)] bg-white py-0 shadow-sm transition-all hover:-translate-y-1 hover:shadow-xl hover:shadow-[var(--theme-secondary)]/10"
          >
            <CardContent className="p-5">
              <div className="flex items-start justify-between gap-4">
                <div>
                  <p className="text-sm font-semibold text-muted-foreground">
                    {stat.title}
                  </p>
                  <p className="mt-3 text-3xl font-black text-foreground">
                    {isLoading ? "..." : stat.value}
                  </p>
                  <p className="mt-1 text-xs text-muted-foreground">
                    {stat.description}
                  </p>
                </div>
                <div className="flex h-12 w-12 items-center justify-center rounded-2xl bg-[var(--theme-surface-strong)] text-[var(--theme-primary)] transition-transform group-hover:scale-110">
                  <stat.icon className="h-6 w-6" />
                </div>
              </div>
            </CardContent>
          </Card>
        ))}
      </div>

      <div className="grid gap-6 xl:grid-cols-[0.95fr_1.05fr]">
        <Card className="rounded-3xl border-[var(--theme-border)] bg-white py-0 shadow-sm">
          <CardHeader className="px-5 pt-5">
            <CardTitle className="flex items-center gap-2 text-xl font-black">
              <Clock className="h-5 w-5 text-[var(--theme-primary)]" />
              {t("admin.quickActions")}
            </CardTitle>
            <p className="text-sm text-muted-foreground">
              {t("admin.quickActionsDescription")}
            </p>
          </CardHeader>
          <CardContent className="grid gap-3 p-5 pt-2 sm:grid-cols-2 xl:grid-cols-1">
            {quickActions.map((action) => (
              <Link
                key={action.label}
                href={action.href}
                className={`group relative overflow-hidden rounded-2xl border border-[var(--theme-border)] bg-[var(--theme-surface-soft)] p-4 shadow-sm transition-all hover:-translate-y-0.5 hover:shadow-lg focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--theme-secondary)]/40 ${quickActionStyles[action.tone].hover}`}
              >
                <span
                  className={`absolute inset-y-0 left-0 w-1 ${quickActionStyles[action.tone].bar}`}
                />
                <div className="flex items-center gap-4 pl-1">
                  <span
                    className={`flex h-11 w-11 shrink-0 items-center justify-center rounded-2xl ${quickActionStyles[action.tone].icon}`}
                  >
                    <action.icon className="h-5 w-5" />
                  </span>
                  <div className="min-w-0 flex-1">
                    <div className="flex items-center gap-2">
                      <span className="truncate text-sm font-black text-foreground">
                        {action.label}
                      </span>
                      {action.count > 0 && (
                        <Badge
                          className={`rounded-full border-0 px-2.5 font-black ${quickActionStyles[action.tone].badge}`}
                        >
                          {action.count}
                        </Badge>
                      )}
                    </div>
                    <p className="mt-1 truncate text-xs font-medium text-muted-foreground">
                      {action.description}
                    </p>
                  </div>
                  <span className="flex h-9 w-9 shrink-0 items-center justify-center rounded-full bg-white text-slate-600 shadow-sm transition-all group-hover:bg-[var(--theme-primary)] group-hover:text-white">
                    <ArrowRight className="h-4 w-4" />
                  </span>
                </div>
              </Link>
            ))}
          </CardContent>
        </Card>

        <Card className="rounded-3xl border-[var(--theme-border)] bg-white py-0 shadow-sm">
          <CardHeader className="px-5 pt-5">
            <div className="flex items-center justify-between gap-3">
              <CardTitle className="flex items-center gap-2 text-xl font-black">
                <TrendingUp className="h-5 w-5 text-[var(--theme-primary)]" />
                {t("admin.recentActivity")}
              </CardTitle>
              <Button
                type="button"
                variant="outline"
                className="h-9 rounded-xl border-[var(--theme-border-soft)] px-4 text-xs font-bold"
                onClick={() => {
                  setIsActivityDialogOpen(true);
                  fetchDashboard(1, 10, true);
                }}
              >
                {t("admin.viewAll")}
              </Button>
            </div>
            <p className="text-sm text-muted-foreground">
              {t("admin.recentActivityDescription")}
            </p>
          </CardHeader>
          <CardContent className="space-y-4 p-5 pt-2">
            {isLoading && (
              <div className="rounded-2xl bg-[var(--theme-surface-soft)] p-3 text-sm font-medium text-muted-foreground">
                {t("admin.loadingRecentActivity")}
              </div>
            )}
            {!isLoading && recentActivity.length === 0 && (
              <div className="rounded-2xl bg-[var(--theme-surface-soft)] p-3 text-sm font-medium text-muted-foreground">
                {t("admin.noRecentActivity")}
              </div>
            )}
            {!isLoading &&
              recentActivity.map((activity, index) => (
                <div
                  key={index}
                  className="flex items-start gap-3 rounded-2xl bg-[var(--theme-surface-soft)] p-3"
                >
                  <div className="mt-0.5 flex h-9 w-9 shrink-0 items-center justify-center rounded-full bg-[var(--theme-surface-strong)]">
                    {activity.status === "approved" ? (
                      <CheckCircle className="h-5 w-5 text-green-600" />
                    ) : (
                      <AlertCircle className="h-5 w-5 text-[var(--theme-primary)]" />
                    )}
                  </div>
                  <div className="min-w-0 flex-1">
                    <p className="text-sm font-bold text-foreground">
                      {translateActivityMessage(activity.message, language)}
                    </p>
                    <p className="mt-1 text-xs text-muted-foreground">
                      {translateRelativeTime(activity.time, language)}
                    </p>
                  </div>
                  <Badge
                    variant="outline"
                    className="rounded-full border-[var(--theme-border-strong)] bg-white text-xs capitalize text-muted-foreground"
                  >
                    {activity.status === "approved"
                      ? t("admin.statusApproved")
                      : t("admin.statusPending")}
                  </Badge>
                </div>
              ))}
          </CardContent>
        </Card>
      </div>

      <Card className="rounded-3xl border-[var(--theme-border)] bg-white py-0 shadow-sm">
        <CardHeader className="px-5 pt-5">
          <CardTitle className="text-xl font-black">
            {t("admin.monthlyReportsSummary")}
          </CardTitle>
          <p className="text-sm text-muted-foreground">
            {t("admin.monthlyReportsSummaryDescription")}
          </p>
        </CardHeader>
        <CardContent className="p-5 pt-2">
          <div className="grid gap-4 md:grid-cols-3">
            {reportStats.map((item) => (
              <div
                key={item.label}
                className="rounded-3xl border border-[var(--theme-border)] bg-[var(--theme-surface-strong)] p-5 text-center"
              >
                <div className="text-2xl font-black text-[var(--theme-primary)] sm:text-3xl">
                  {isLoading ? "..." : item.value}
                </div>
                <p className="mt-2 text-sm font-semibold text-muted-foreground">
                  {item.label}
                </p>
              </div>
            ))}
          </div>
        </CardContent>
      </Card>

      <Dialog
        open={isActivityDialogOpen}
        onOpenChange={(open) => {
          setIsActivityDialogOpen(open);
          if (!open) {
            fetchDashboard(1, 5, true);
          }
        }}
      >
        <DialogContent className="max-h-[90vh] overflow-y-auto sm:max-w-3xl">
          <DialogHeader>
            <DialogTitle>{t("admin.recentActivity")}</DialogTitle>
            <DialogDescription>
              {t("admin.allRecentActivityDescription")}
            </DialogDescription>
          </DialogHeader>
          <div className="space-y-3">
            {isActivityLoading && (
              <div className="rounded-2xl bg-[var(--theme-surface-soft)] p-3 text-sm font-medium text-muted-foreground">
                {t("admin.loadingRecentActivity")}
              </div>
            )}
            {!isActivityLoading && recentActivity.length === 0 && (
              <div className="rounded-2xl bg-[var(--theme-surface-soft)] p-3 text-sm font-medium text-muted-foreground">
                {t("admin.noRecentActivity")}
              </div>
            )}
            {!isActivityLoading &&
              recentActivity.map((activity, index) => (
                <div
                  key={index}
                  className="flex items-start gap-3 rounded-2xl bg-[var(--theme-surface-soft)] p-3"
                >
                  <div className="mt-0.5 flex h-9 w-9 shrink-0 items-center justify-center rounded-full bg-[var(--theme-surface-strong)]">
                    {activity.status === "approved" ? (
                      <CheckCircle className="h-5 w-5 text-green-600" />
                    ) : (
                      <AlertCircle className="h-5 w-5 text-[var(--theme-primary)]" />
                    )}
                  </div>
                  <div className="min-w-0 flex-1">
                    <p className="text-sm font-bold text-foreground">
                      {translateActivityMessage(activity.message, language)}
                    </p>
                    <p className="mt-1 text-xs text-muted-foreground">
                      {translateRelativeTime(activity.time, language)}
                    </p>
                  </div>
                  <Badge
                    variant="outline"
                    className="rounded-full border-[var(--theme-border-strong)] bg-white text-xs capitalize text-muted-foreground"
                  >
                    {activity.status === "approved"
                      ? t("admin.statusApproved")
                      : t("admin.statusPending")}
                  </Badge>
                </div>
              ))}
          </div>
          <AdminTablePagination
            total={activityPagination.total}
            pageSize={activityPagination.per_page}
            currentPage={activityPagination.current_page}
            totalPages={activityPagination.last_page}
            from={activityPagination.from}
            to={activityPagination.to}
            isLoading={isActivityLoading}
            onPageChange={(page) =>
              fetchDashboard(page, activityPagination.per_page || 10, true)
            }
          />
        </DialogContent>
      </Dialog>
    </div>
  );
}