"use client";

import { Button } from "@/components/ui/button";
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import { cn } from "@/lib/utils";
import type { ActivityColor, ActivityIcon, DashboardActivity } from "@/types";
import { Link } from "@/i18n/routing";
import { useFormattedDate } from "@/hooks/use-formatted-date";
import {
  CheckCircle,
  Clock,
  FileText,
  Flag,
  MessageCircle,
  MoveLeft,
  MoveRight,
  User,
} from "lucide-react";
import { useLocale, useTranslations } from "next-intl";
import { useMemo } from "react";

type Locale = "ar" | "en";

interface Props {
  activities?: DashboardActivity[];
  projectId?: string | number | null;
}

const STATUS_KEY_MAP = {
  in_progress: "dashboard.status.inProgress",
  done: "dashboard.status.completed",
  completed: "dashboard.status.completed",
  not_started: "dashboard.status.notStarted",
  notstarted: "dashboard.status.notStarted",
  pending: "dashboard.pendingTasks",
  overdue: "dashboard.overdueTasks",
} as const;

function renderActivityIcon(icon: ActivityIcon) {
  switch (icon) {
    case "chat-bubble-left-ellipsis":
      return <MessageCircle className="h-4 w-4 sm:h-5 sm:w-5" />;
    case "flag":
      return <Flag className="h-4 w-4 sm:h-5 sm:w-5" />;
    case "check-circle":
      return <CheckCircle className="h-4 w-4 sm:h-5 sm:w-5" />;
    case "document":
      return <FileText className="h-4 w-4 sm:h-5 sm:w-5" />;
    case "user":
      return <User className="h-4 w-4 sm:h-5 sm:w-5" />;
    default:
      return <FileText className="h-4 w-4 sm:h-5 sm:w-5" />;
  }
}

function getActivityColorClasses(color: ActivityColor) {
  switch (color) {
    case "green":
    case "emerald":
      return "bg-emerald-500/10 text-emerald-600";
    case "red":
      return "bg-rose-500/10 text-rose-600";
    case "amber":
      return "bg-amber-500/10 text-amber-600";
    case "blue":
      return "bg-blue-500/10 text-blue-600";
    default:
      return "bg-primary/10 text-primary";
  }
}

function normalizeStatusKey(status: string) {
  return status
    .replace(/^messages\.task_status_/i, "")
    .trim()
    .replace(/([a-z])([A-Z])/g, "$1_$2")
    .replace(/[\s-]+/g, "_")
    .toLowerCase();
}

function replaceStatusTokens(
  text: string,
  t: ReturnType<typeof useTranslations>,
) {
  return text.replace(/messages\.task_status_[A-Za-z _-]+/g, (value) => {
    const normalizedKey = normalizeStatusKey(value);
    const translationKey =
      STATUS_KEY_MAP[normalizedKey as keyof typeof STATUS_KEY_MAP];

    if (!translationKey) {
      return value.replace(/^messages\.task_status_/i, "");
    }

    return t(translationKey);
  });
}

function resolveStatusLabel(
  status: string,
  t: ReturnType<typeof useTranslations>,
) {
  const normalizedKey = normalizeStatusKey(status);
  const translationKey =
    STATUS_KEY_MAP[normalizedKey as keyof typeof STATUS_KEY_MAP];

  if (!translationKey) {
    return status.replace(/^messages\.task_status_/i, "");
  }

  return t(translationKey);
}

function resolveLocalizedDescription(
  activity: DashboardActivity,
  locale: Locale,
  t: ReturnType<typeof useTranslations>,
) {
  const localizedProjectName =
    activity.project?.name_translations?.[locale] ||
    activity.project?.name ||
    "";
  const translatedDescription =
    activity.description_translations?.[locale] ||
    activity.description_translations?.en_description;
  const rawDescription = replaceStatusTokens(
    translatedDescription || activity.description,
    t,
  );
  const projectAwareDescription =
    localizedProjectName && activity.project?.name
      ? rawDescription.replaceAll(activity.project.name, localizedProjectName)
      : rawDescription;

  if (translatedDescription) {
    return projectAwareDescription;
  }

  switch (activity.action) {
    case "task_created": {
      const match = projectAwareDescription.match(
        /^Task created:\s*(.+?)\s+in phase\s+"(.+)"$/i,
      );

      if (!match) {
        return projectAwareDescription;
      }

      return t("activity.feed.taskCreated", {
        task: match[1],
        phase: match[2],
      });
    }
    case "task_completed": {
      const match = projectAwareDescription.match(/^Task completed:\s*(.+)$/i);

      if (!match) {
        return projectAwareDescription;
      }

      return t("activity.feed.taskCompleted", { task: match[1] });
    }
    case "task_status_changed": {
      const match = projectAwareDescription.match(
        /^Task\s+"(.+)"\s+status changed from\s+"(.+)"\s+to\s+"(.+)"$/i,
      );

      if (!match) {
        return projectAwareDescription;
      }

      return t("activity.feed.taskStatusChanged", {
        task: match[1],
        from: resolveStatusLabel(match[2], t),
        to: resolveStatusLabel(match[3], t),
      });
    }
    case "file_uploaded": {
      const match = projectAwareDescription.match(
        /^File uploaded:\s*(.+?)\s+in phase\s+"(.+)"$/i,
      );

      if (!match) {
        return projectAwareDescription;
      }

      return t("activity.feed.fileUploaded", {
        file: match[1],
        phase: match[2],
      });
    }
    case "file_deleted": {
      const match = projectAwareDescription.match(
        /^File deleted:\s*(.+?)\s+(?:in|from)\s+phase\s+"(.+)"$/i,
      );

      if (!match) {
        return projectAwareDescription;
      }

      return t("activity.feed.fileDeleted", {
        file: match[1],
        phase: match[2],
      });
    }
    case "note_created": {
      const match = projectAwareDescription.match(
        /^(.*?)\s+note added to phase\s+"(.+)"$/i,
      );

      if (!match) {
        return projectAwareDescription;
      }

      const noteType = match[1].toLowerCase().includes("client")
        ? t("activity.feed.noteTypes.client")
        : t("activity.feed.noteTypes.internal");

      return t("activity.feed.noteCreated", {
        noteType,
        phase: match[2],
      });
    }
    case "comment_added": {
      const match = projectAwareDescription.match(
        /^Comment added to task:\s*(.+)$/i,
      );

      if (!match) {
        return projectAwareDescription;
      }

      return t("activity.feed.commentAdded", { task: match[1] });
    }
    case "project_updated": {
      const projectName =
        localizedProjectName ||
        projectAwareDescription.replace(/^Project updated:\s*/i, "");

      return t("activity.feed.projectUpdated", { project: projectName });
    }
    case "project_created": {
      const projectName =
        localizedProjectName ||
        projectAwareDescription.replace(/^Project created:\s*/i, "");

      return t("activity.feed.projectCreated", { project: projectName });
    }
    case "phase_created": {
      const phaseName = projectAwareDescription.replace(
        /^(Phase|Stage) created:\s*/i,
        "",
      );

      return t("activity.feed.phaseCreated", { phase: phaseName });
    }
    default:
      return projectAwareDescription;
  }
}

export function RecentActivities({ activities: propsActivities, projectId }: Props) {
  const t = useTranslations();
  const dashboardT = useTranslations("dashboard");
  const locale = useLocale() as Locale;
  const { formatDateTime } = useFormattedDate();
  const filteredActivities = useMemo(() => {
    const list = propsActivities || [];

    if (!projectId) {
      return list;
    }

    const projectScopedActivities = list.filter((activity) => {
      if (!activity.project?.id) {
        return false;
      }

      return String(activity.project.id) === String(projectId);
    });

    return projectScopedActivities.length > 0 ? projectScopedActivities : list;
  }, [projectId, propsActivities]);

  const activities = useMemo(
    () =>
      filteredActivities.map((activity) => {
        const userName =
          activity.user_translations?.[locale] || activity.user;
        const time = activity.created_at
          ? formatDateTime(activity.created_at)
          : activity.time_ago_translations?.[locale] || activity.time_ago;

        return {
          id: activity.id,
          text: resolveLocalizedDescription(activity, locale, t),
          user: userName,
          time,
          icon: activity.icon,
          color: activity.color,
        };
      }),
    [filteredActivities, formatDateTime, locale, t],
  );

  return (
    <Card className="overflow-hidden flex flex-col h-auto">
      <CardHeader className="border-b p-4 flex flex-row items-center justify-between shrink-0">
        <CardTitle className="text-base sm:text-lg">
          {dashboardT("recentActivities")}
        </CardTitle>

        <Link href="/activity">
          <Button
            variant="link"
            size="sm"
            className="gap-1 h-8 px-2 text-xs sm:text-sm cursor-pointer"
          >
            {dashboardT("viewAllActivities")}{" "}
            {locale === "ar" ? <MoveLeft /> : <MoveRight />}
          </Button>
        </Link>
      </CardHeader>
      <CardContent className="p-3 sm:p-4 space-y-4 sm:space-y-6 flex-1">
        {activities.length === 0 ? (
          <div className="flex flex-col items-center justify-center py-8 text-center">
            <FileText className="h-12 w-12 text-muted-foreground/30 mb-3" />
            <p className="text-sm font-medium text-muted-foreground">
              {dashboardT("noActivities")}
            </p>
            <p className="text-xs text-muted-foreground mt-1">
              {t("activity.noActivitiesDescription")}
            </p>
          </div>
        ) : (
          activities.slice(0, 8).map((activity) => (
            <div key={activity.id} className="flex items-start gap-3 sm:gap-4">
              <div
                className={cn(
                  "p-2 rounded-full shrink-0",
                  getActivityColorClasses(activity.color),
                )}
              >
                {renderActivityIcon(activity.icon)}
              </div>
              <div className="flex-1 space-y-1 min-w-0">
                <p className="text-xs sm:text-sm font-medium wrap-break-word">
                  {activity.text}
                </p>
                <div className="flex items-center gap-1.5 sm:gap-2 text-xs text-muted-foreground flex-wrap">
                  <span className="truncate">{activity.user}</span>
                  <User className="h-3 w-3 sm:h-4 sm:w-4 shrink-0" />
                  <span>.</span>
                  <span className="whitespace-nowrap">{activity.time}</span>
                  <Clock className="h-3 w-3 sm:h-4 sm:w-4 shrink-0" />
                </div>
              </div>
            </div>
          ))
        )}
      </CardContent>
    </Card>
  );
}