"use client";

import { useState } from "react";
import type { ReactElement } from "react";
import { Card, SectionHeader } from "@mosaic/ui";

interface QuickAction {
  id: string;
  label: string;
  icon: string;
  iconBg: string;
}

const actions: QuickAction[] = [
  { id: "new-project", label: "New Project", icon: "🚀", iconBg: "rgba(47,128,255,0.12)" },
  { id: "spawn-agent", label: "Spawn Agent", icon: "🤖", iconBg: "rgba(139,92,246,0.12)" },
  { id: "view-telemetry", label: "View Telemetry", icon: "📊", iconBg: "rgba(20,184,166,0.12)" },
  { id: "review-tasks", label: "Review Tasks", icon: "📋", iconBg: "rgba(245,158,11,0.12)" },
];

interface ActionButtonProps {
  action: QuickAction;
}

function ActionButton({ action }: ActionButtonProps): ReactElement {
  const [hovered, setHovered] = useState(false);

  return (
    <button
      type="button"
      onMouseEnter={(): void => {
        setHovered(true);
      }}
      onMouseLeave={(): void => {
        setHovered(false);
      }}
      style={{
        display: "flex",
        alignItems: "center",
        gap: 8,
        padding: "10px 12px",
        borderRadius: "var(--r)",
        border: `1px solid ${hovered ? "var(--ms-border-700)" : "var(--border)"}`,
        background: hovered ? "var(--surface)" : "var(--bg-mid)",
        cursor: "pointer",
        transition: "border-color 0.15s, background 0.15s, color 0.15s",
        width: "100%",
        fontSize: "0.8rem",
        fontWeight: 600,
        color: hovered ? "var(--text)" : "var(--text-2)",
      }}
    >
      <div
        style={{
          width: 24,
          height: 24,
          borderRadius: 5,
          background: action.iconBg,
          display: "flex",
          alignItems: "center",
          justifyContent: "center",
          fontSize: "0.875rem",
        }}
      >
        {action.icon}
      </div>
      <span>{action.label}</span>
    </button>
  );
}

export function QuickActions(): ReactElement {
  return (
    <Card>
      <SectionHeader title="Quick Actions" />
      <div
        style={{
          display: "grid",
          gridTemplateColumns: "1fr 1fr",
          gap: 8,
        }}
      >
        {actions.map((action) => (
          <ActionButton key={action.id} action={action} />
        ))}
      </div>
    </Card>
  );
}