"use client";

import { useMemo } from "react";
import { format, formatDistanceToNow } from "date-fns";
import { Activity } from "./types";
import { replaceStageIdsInText, toPlainText } from "@/lib/utils";
import { buildStageIdToNameMap } from "@/lib/pipeline-stage-map";
import { useGetPipelinesQuery } from "@/api/rtk/pipelines-api";
import {
  Clock,
  ExternalLink,
  Calendar,
  Phone,
  Mail,
  FileText,
  Zap,
  Trophy,
  MessageSquare,
  LogIn,
  LogOut,
  ListTodo,
  UserRound,
} from "lucide-react";
import { Card } from "@/components/ui/card";

interface ActivityItemProps {
  activity: Activity;
  onClick: () => void;
}

export function ActivityItem({ activity, onClick }: ActivityItemProps) {
  const { data: pipelines = [] } = useGetPipelinesQuery();
  const stageIdToName = useMemo(
    () => buildStageIdToNameMap(pipelines),
    [pipelines],
  );
  const descDisplay = toPlainText(
    replaceStageIdsInText(activity.desc, stageIdToName),
  );
  const iconMap = {
    Call: <Phone size={16} />,
    Email: <Mail size={16} />,
    Meeting: <Calendar size={16} />,
    Note: <FileText size={16} />,
    Deal: <Zap size={16} />,
    Lead: <UserRound size={16} />,
    Win: <Trophy size={16} />,
    Task: <ListTodo size={16} />,
    Login: <LogIn size={16} />,
    Logout: <LogOut size={16} />,
  };

  return (
    <Card
      className="group flex-row gap-4 p-4 hover:translate-x-1 transition-all cursor-pointer relative overflow-hidden"
      onClick={onClick}
    >
      {/* Type Indicator Icon */}
      <div
        className="size-10 rounded-xl flex items-center justify-center shrink-0 shadow-sm"
        style={{ backgroundColor: activity.iconBg }}
      >
        <div className="text-accent/80 font-bold">
          {iconMap[activity.type] || <MessageSquare size={16} />}
        </div>
      </div>

      <div className="flex-1 min-w-0">
        <div className="flex items-start justify-between gap-3 mb-1">
          <h4 className="text-[14px] font-bold text-text font-['Lexend'] truncate leading-tight">
            {activity.type} ·{" "}
            <span className="text-accent hover:underline">
              {activity.company}
            </span>
          </h4>
          <span className="text-[10px] font-bold text-gray-700 font-['Lexend_Deca'] uppercase shrink-0 mt-0.5 text-right">
            <div>{formatDistanceToNow(new Date(activity.createdAt), { addSuffix: true })}</div>
            <div className="text-[9px] text-gray-500 font-normal mt-0.5">
              {format(new Date(activity.createdAt), "MMM d, yyyy h:mm a")}
            </div>
          </span>
        </div>

        <p className="text-[13px] text-gray-700 font-medium mb-3 leading-relaxed">
          {descDisplay}
        </p>

        <div className="flex items-center gap-4">
          <div className="flex items-center gap-2">
            <div className="size-6 rounded-full bg-accent/15 text-accent text-[9px] font-extrabold flex items-center justify-center shrink-0">
              {activity.repAv}
            </div>
            <span className="text-[11px] font-semibold text-text/80">
              {activity.rep}
            </span>
          </div>

          {activity.duration && (
            <div className="flex items-center gap-1 text-[11px] font-bold text-gray-700 font-['Lexend_Deca']">
              <Clock size={12} className="opacity-60" />
              {activity.duration}
            </div>
          )}
        </div>
      </div>

      <div className="absolute right-3 bottom-3 opacity-0 group-hover:opacity-100 transition-opacity">
        <ExternalLink size={14} className="text-accent/60" />
      </div>
    </Card>
  );
}