"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 { formatActivityDescription } from "../utils/dashboard.utils";

interface DashboardActivityItemProps {
  activity: Activity;
  onClick?: (() => void) | undefined;
  showConnector?: boolean | undefined;
}

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 ICON_COLORS: Record<Activity["type"], string> = {
  invoice_created: "text-blue-500 bg-blue-50",
  invoice_paid: "text-green-500 bg-green-50",
  service_activated: "text-purple-500 bg-purple-50",
  case_created: "text-amber-500 bg-amber-50",
  case_closed: "text-green-500 bg-green-50",
};

const FALLBACK_ICON = ExclamationTriangleIcon;

export function DashboardActivityItem({
  activity,
  onClick,
  showConnector = true,
}: DashboardActivityItemProps) {
  const Icon = ICON_COMPONENTS[activity.type] ?? FALLBACK_ICON;
  const colorClasses = ICON_COLORS[activity.type] ?? "text-muted-foreground bg-muted";
  const description = formatActivityDescription(activity);

  const content = (
    <div className="flex items-start gap-3 relative">
      {/* Timeline connector */}
      {showConnector && (
        <div className="absolute left-[15px] top-8 bottom-0 w-px bg-border -z-10" />
      )}

      {/* Icon */}
      <div
        className={`flex-shrink-0 w-8 h-8 rounded-full flex items-center justify-center ${colorClasses}`}
      >
        <Icon className="h-4 w-4" />
      </div>

      {/* Content */}
      <div className="flex-1 min-w-0 pb-4">
        <p
          className={`text-sm font-medium leading-tight ${
            onClick ? "text-foreground group-hover:text-primary" : "text-foreground"
          }`}
        >
          {activity.title}
        </p>
        <p className="text-sm text-muted-foreground mt-0.5 leading-snug">{description}</p>
      </div>
    </div>
  );

  if (onClick) {
    return (
      <button
        type="button"
        className="group w-full text-left rounded-lg hover:bg-muted/50 transition-colors cursor-pointer -mx-2 px-2"
        onClick={onClick}
      >
        {content}
      </button>
    );
  }

  return <div className="w-full text-left">{content}</div>;
}
