import { Show } from "solid-js";
import { useI18n } from "../../providers/i18n-provider";
import { CheckCircleIcon, XCircleIcon, UsersIcon, ClockIcon, BellIcon, MoreHorizontalIcon } from "./icons";

export function ActivityTimeline(props: { activities: any[] }) {
  const i18n = useI18n();
  const getIcon = (type: string) => {
    const base = "w-8 h-8 rounded-full flex items-center justify-center shrink-0";
    switch (type) {
      case "booking": return <div class={`${base} bg-accent-subtle text-accent`}><CheckCircleIcon /></div>;
      case "cancel": return <div class={`${base} bg-canvas-muted text-ink-muted`}><XCircleIcon /></div>;
      case "client": return <div class={`${base} bg-accent-subtle text-accent`}><UsersIcon /></div>;
      case "reschedule": return <div class={`${base} bg-canvas-muted text-ink-muted`}><ClockIcon /></div>;
      case "reminder": return <div class={`${base} bg-accent-subtle text-accent`}><BellIcon /></div>;
      default: return <div class={`${base} bg-canvas-muted text-ink-muted`}><MoreHorizontalIcon /></div>;
    }
  };

  return (
    <div class="surface-card p-6 shadow-sm">
      <h3 class="text-lg font-semibold text-ink mb-5">{i18n.t("dashboard.recentActivity")}</h3>
      <Show when={props.activities.length > 0} fallback={
        <div class="text-center py-8">
          <p class="text-sm text-ink-muted">{i18n.t("dashboard.recentActivity.empty")}</p>
        </div>
      }>
        <div class="space-y-0">
          {props.activities.map((activity, index) => (
            <div class="group flex gap-4 relative" style={{ "animation-delay": `${index * 75}ms` }}>
              {index < props.activities.length - 1 && (
                <div class="absolute left-4 top-8 bottom-0 w-px bg-border" />
              )}
              <div class="relative z-10 flex-shrink-0 transition-transform duration-300 group-hover:scale-110">
                {getIcon(activity.type)}
              </div>
              <div class="flex-1 pb-5">
                <div class="flex items-start justify-between gap-3">
                  <div class="min-w-0">
                    <p class="text-sm font-semibold text-ink group-hover:text-accent transition-colors">{activity.action}</p>
                    <p class="text-sm text-ink-muted mt-0.5 truncate">{activity.detail}</p>
                  </div>
                  <span class="text-xs text-ink-subtle whitespace-nowrap shrink-0">{activity.time}</span>
                </div>
              </div>
            </div>
          ))}
        </div>
      </Show>
    </div>
  );
}
