import * as React from "react";
import { useTranslation } from "react-i18next";
import { Card, CardContent } from "@/shared/common/ui/card";
import { Badge } from "@/shared/common/ui/badge";
import { Avatar, AvatarFallback, AvatarImage } from "@/shared/common/ui/avatar";
import { format } from "date-fns";
import {
  Clock,
  User,
  FileText,
  Settings,
  Shield,
  Lock,
  Upload,
  Download,
  Edit,
  Trash2,
  Eye,
} from "lucide-react";
import { cn } from "@/shared/lib/utils";

interface ActivityCardProps {
  id: string;
  action: string;
  description: string;
  performedBy: {
    name: string;
    email: string;
    avatar?: string;
  };
  timestamp: string;
  module: string;
  resourceId?: string;
  resourceName?: string;
  status: "success" | "failure" | "pending" | "warning";
  details?: string;
  ipAddress?: string;
  location?: string;
}

const getModuleIcon = (module: string) => {
  switch ((module || "").toLowerCase()) {
    case "authentication":
      return <Shield className="h-4 w-4" />;
    case "documents":
    case "files":
      return <FileText className="h-4 w-4" />;
    case "settings":
      return <Settings className="h-4 w-4" />;
    case "users":
      return <User className="h-4 w-4" />;
    default:
      return <FileText className="h-4 w-4" />;
  }
};

const getActionIcon = (action: string) => {
  switch ((action || "").toLowerCase()) {
    case "upload":
      return <Upload className="h-4 w-4" />;
    case "download":
      return <Download className="h-4 w-4" />;
    case "edit":
    case "update":
      return <Edit className="h-4 w-4" />;
    case "delete":
      return <Trash2 className="h-4 w-4" />;
    case "view":
      return <Eye className="h-4 w-4" />;
    case "login":
      return <Lock className="h-4 w-4" />;
    default:
      return <FileText className="h-4 w-4" />;
  }
};

const getStatusColor = (status: string) => {
  switch (status) {
    case "success":
      return "bg-primary-100 dark:bg-primary-900/40 text-primary-800 dark:text-primary-300 hover:bg-primary-100 dark:hover:bg-primary-900/40 border-primary-300 dark:border-primary-700";
    case "failure":
      return "bg-red-100 dark:bg-red-900/40 text-red-800 dark:text-red-300 hover:bg-red-100 dark:hover:bg-red-900/40 border-red-300 dark:border-red-700";
    case "warning":
      return "bg-yellow-100 dark:bg-yellow-900/40 text-yellow-800 dark:text-yellow-300 hover:bg-yellow-100 dark:hover:bg-yellow-900/40 border-yellow-300 dark:border-yellow-700";
    case "pending":
      return "bg-primary/15 dark:bg-primary/25 text-primary-800 dark:text-primary-300 hover:bg-primary/15 dark:hover:bg-primary/25 border-primary/40 dark:border-primary/60";
    default:
      return "bg-gray-100 dark:bg-gray-700 text-gray-800 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 border-gray-300 dark:border-gray-600";
  }
};

export function ActivityCard({ activity }: { activity: ActivityCardProps }) {
  const { t } = useTranslation();
  const surface = "bg-white dark:bg-gray-900";
  const border = "border-gray-200 dark:border-gray-800";
  const borderLight = "border-gray-100 dark:border-gray-800";
  const textStrong = "text-gray-900 dark:text-gray-100";
  const textMuted = "text-gray-600 dark:text-gray-300";
  const textSubtle = "text-gray-500 dark:text-gray-400";
  const textSubtler = "text-gray-400 dark:text-gray-500";
  const iconBg = "bg-gray-100 dark:bg-gray-800";
  const whiteBg = "bg-white dark:bg-gray-900";

  const formattedDate = format(new Date(activity.timestamp), "MMM d, yyyy");
  const formattedTime = format(new Date(activity.timestamp), "HH:mm:ss");

  return (
    <Card
      className={cn(
        "border transition-shadow duration-200 hover:shadow-md",
        border,
        surface,
      )}>
      <CardContent className="p-4 sm:p-5">
        <div className="flex items-start gap-3 sm:gap-4">
          <div className="relative shrink-0">
            <div
              className={cn(
                "h-10 w-10 sm:h-11 sm:w-11 rounded-full flex items-center justify-center",
                iconBg,
              )}>
              {getModuleIcon(activity.module)}
            </div>
            <div
              className={cn(
                "absolute -bottom-1 -right-1 h-6 w-6 rounded-full border flex items-center justify-center",
                whiteBg,
                border,
              )}>
              {getActionIcon(activity.action)}
            </div>
          </div>

          <div className="min-w-0 flex-1">
            <div className="flex flex-col gap-2 sm:flex-row sm:items-start sm:justify-between">
              <div className="min-w-0">
                <div className="flex flex-wrap items-center gap-2">
                  <h4
                    className={cn("min-w-0 font-medium truncate", textStrong)}>
                    {activity.description}
                  </h4>

                  <Badge
                    variant="outline"
                    className={cn(
                      "text-xs font-medium",
                      getStatusColor(activity.status),
                    )}>
                    {t(`auditLog.status.${activity.status}`)}
                  </Badge>
                </div>

                <div
                  className={cn(
                    "mt-1 flex items-center gap-2 text-xs sm:hidden",
                    textSubtle,
                  )}>
                  <Clock className="h-3.5 w-3.5" />
                  <span className="whitespace-nowrap">{formattedDate}</span>
                  <span className={cn(textSubtler)}>•</span>
                  <span className="whitespace-nowrap">{formattedTime}</span>
                </div>
              </div>

              <div
                className={cn(
                  "hidden sm:flex items-center gap-2 text-xs whitespace-nowrap",
                  textSubtle,
                )}>
                <Clock className="h-3.5 w-3.5" />
                <span>{formattedDate}</span>
                <span className={cn(textSubtler)}>•</span>
                <span>{formattedTime}</span>
              </div>
            </div>

            <div
              className={cn(
                "mt-2 flex flex-col gap-2 sm:flex-row sm:flex-wrap sm:items-center text-sm",
                textMuted,
              )}>
              <div className="flex items-center gap-2 min-w-0">
                <Avatar className="h-6 w-6 sm:h-5 sm:w-5 shrink-0">
                  {activity.performedBy.avatar ? (
                    <AvatarImage src={activity.performedBy.avatar} />
                  ) : null}
                  <AvatarFallback className="text-[10px] sm:text-xs">
                    {activity.performedBy.name?.charAt(0)?.toUpperCase() || "U"}
                  </AvatarFallback>
                </Avatar>

                <span
                  className={cn(
                    "font-medium truncate max-w-[180px] sm:max-w-[220px]",
                    textStrong,
                  )}>
                  {activity.performedBy.name === "System"
                    ? t("auditLog.page.systemUser")
                    : activity.performedBy.name}
                </span>

                <span className={cn("hidden sm:inline", textSubtler)}>•</span>

                <span
                  className={cn(
                    "truncate max-w-[220px] sm:max-w-[280px]",
                    textSubtle,
                  )}>
                  {activity.performedBy.email}
                </span>
              </div>

              {activity.resourceName ? (
                <div className="flex items-center gap-2 min-w-0">
                  <span className={cn("hidden sm:inline", textSubtler)}>•</span>
                  <span className={cn("sm:hidden", textSubtle)}>
                    {t("auditLog.card.resource")}:
                  </span>
                  <span
                    className={cn(
                      "truncate max-w-[260px] sm:max-w-[320px]",
                      textMuted,
                    )}>
                    {activity.resourceName}
                  </span>
                </div>
              ) : null}
            </div>

            {activity.details || activity.ipAddress || activity.location ? (
              <div className={cn("mt-3 pt-3 border-t", borderLight)}>
                <div className="grid grid-cols-1 sm:grid-cols-3 gap-2 text-xs">
                  {activity.details ? (
                    <div
                      className="sm:col-span-2 min-w-0"
                      title={activity.details}>
                      <div className={cn("mb-0.5", textSubtler)}>
                        {t("auditLog.card.details")}
                      </div>
                      <div className={cn("truncate", textSubtle)}>
                        {activity.details}
                      </div>
                    </div>
                  ) : null}

                  <div className="flex flex-wrap gap-3 sm:justify-end sm:items-start">
                    {activity.ipAddress ? (
                      <div className="min-w-0">
                        <div className={cn("mb-0.5", textSubtler)}>
                          {t("auditLog.card.ip")}
                        </div>
                        <div
                          className={cn(
                            "font-mono truncate max-w-[180px]",
                            textSubtle,
                          )}>
                          {activity.ipAddress}
                        </div>
                      </div>
                    ) : null}

                    {activity.location ? (
                      <div className="min-w-0">
                        <div className={cn("mb-0.5", textSubtler)}>
                          {t("auditLog.card.location")}
                        </div>
                        <div
                          className={cn("truncate max-w-[180px]", textSubtle)}>
                          {activity.location}
                        </div>
                      </div>
                    ) : null}
                  </div>
                </div>
              </div>
            ) : null}
          </div>
        </div>
      </CardContent>
    </Card>
  );
}
