import { For, Show } from "solid-js";
import { cn } from "~/lib/utils";
import { Badge } from "~/components/ui";

interface Activity {
  id: string;
  title: string;
  description: string;
  timestamp: string;
  type: "alert" | "success" | "info" | "warning";
}

interface ActivityFeedProps {
  activities: Activity[];
  class?: string;
}

const typeVariants: Record<Activity["type"], "error" | "success" | "info" | "warning"> = {
  alert: "error",
  success: "success",
  info: "info",
  warning: "warning",
};

function ActivityIcon(props: { type: Activity["type"] }) {
  return (
    <div class={cn(
      "w-8 h-8 rounded-full flex items-center justify-center flex-shrink-0",
      props.type === "alert" && "bg-[var(--color-error-bg)] text-[var(--color-error)]",
      props.type === "success" && "bg-[var(--color-success-bg)] text-[var(--color-success)]",
      props.type === "info" && "bg-[var(--color-info-bg)] text-[var(--color-info)]",
      props.type === "warning" && "bg-[var(--color-warning-bg)] text-[var(--color-warning)]",
    )}>
      <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
        <Show when={props.type === "alert"}>
          <circle cx="8" cy="8" r="6" stroke="currentColor" stroke-width="1.5"/>
          <path d="M8 5v3M8 10.5v.5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/>
        </Show>
        <Show when={props.type === "success"}>
          <path d="M4 8l3 3 5-5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
        </Show>
        <Show when={props.type === "info"}>
          <circle cx="8" cy="8" r="6" stroke="currentColor" stroke-width="1.5"/>
          <path d="M8 7v4M8 5v.5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/>
        </Show>
        <Show when={props.type === "warning"}>
          <path d="M8 2l6 11H2L8 2z" stroke="currentColor" stroke-width="1.5" stroke-linejoin="round"/>
          <path d="M8 7v3M8 12v.5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/>
        </Show>
      </svg>
    </div>
  );
}

export default function ActivityFeed(props: ActivityFeedProps) {
  return (
    <div class={cn("gradient-card border border-[var(--color-border)]/50 rounded-xl", props.class)}>
      <div class="px-5 py-4 border-b border-[var(--color-border)]/50">
        <h3 class="text-sm font-semibold text-[var(--color-text-primary)]">Recent Activity</h3>
      </div>
      <div class="divide-y divide-[var(--color-border)]/50">
        <For each={props.activities}>
          {(activity) => (
            <div class="px-5 py-3.5 flex items-start gap-3">
              <ActivityIcon type={activity.type} />
              <div class="flex-1 min-w-0">
                <div class="flex items-center gap-2 mb-0.5">
                  <span class="text-sm font-medium text-[var(--color-text-primary)]">{activity.title}</span>
                  <Badge variant={typeVariants[activity.type]}>{activity.type}</Badge>
                </div>
                <p class="text-xs text-[var(--color-text-secondary)]">{activity.description}</p>
              </div>
              <span class="text-xs text-[var(--color-text-tertiary)] whitespace-nowrap">{activity.timestamp}</span>
            </div>
          )}
        </For>
      </div>
    </div>
  );
}