"use client";

import type { ComponentType, SVGProps } from "react";
import {
  DocumentTextIcon,
  CheckCircleIcon,
  ServerIcon,
  ChatBubbleLeftRightIcon,
  ExclamationTriangleIcon,
} from "@heroicons/react/24/outline";
import type { Activity } from "@customer-portal/domain/dashboard";
import {
  formatActivityDate,
  formatActivityDescription,
  getActivityIconGradient,
} from "../utils/dashboard.utils";

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

const ICON_COMPONENTS: Record<Activity["type"], ComponentType<SVGProps<SVGSVGElement>>> = {
  invoice_created: DocumentTextIcon,
  invoice_paid: CheckCircleIcon,
  service_activated: ServerIcon,
  case_created: ChatBubbleLeftRightIcon,
  case_closed: CheckCircleIcon,
};

const FALLBACK_ICON = ExclamationTriangleIcon;

export function DashboardActivityItem({ activity, onClick }: DashboardActivityItemProps) {
  const Icon = ICON_COMPONENTS[activity.type] ?? FALLBACK_ICON;
  const gradient = getActivityIconGradient(activity.type);
  const description = formatActivityDescription(activity);
  const formattedDate = formatActivityDate(activity.date);
  const Wrapper = onClick ? "button" : "div";

  return (
    <Wrapper
      className={`flex items-start space-x-4 w-full text-left ${
        onClick ? "p-3 -m-3 rounded-lg hover:bg-gray-50 transition-colors cursor-pointer" : ""
      }`}
      onClick={onClick}
    >
      <div className="flex-shrink-0">
        <div
          className={`w-10 h-10 rounded-full bg-gradient-to-r ${gradient} flex items-center justify-center shadow-md`}
        >
          <Icon className="h-5 w-5 text-white" />
        </div>
      </div>
      <div className="flex-1 min-w-0">
        <p
          className={`text-sm font-medium ${
            onClick ? "text-blue-900 group-hover:text-blue-700" : "text-gray-900"
          }`}
        >
          {activity.title}
        </p>
        <p className="text-sm text-gray-500 mt-1">{description}</p>
        <p className="text-xs text-gray-400 mt-2">{formattedDate}</p>
      </div>
    </Wrapper>
  );
}
