"use client";

interface GraphStatsProps {
  stats: {
    total: number;
    open: number;
    inProgress: number;
    blocked: number;
    closed: number;
    actionable: number;
    edges: number;
    prefixes: string[];
  };
}

export default function GraphStats({ stats }: GraphStatsProps) {
  return (
    <div className="grid grid-cols-2 gap-2">
      <StatCard
        value={stats.total}
        label="Nodes"
        icon={
          <svg
            className="w-3.5 h-3.5"
            fill="none"
            stroke="currentColor"
            viewBox="0 0 24 24"
          >
            <circle cx="12" cy="12" r="3" strokeWidth={2} />
          </svg>
        }
      />
      <StatCard
        value={stats.edges}
        label="Edges"
        icon={
          <svg
            className="w-3.5 h-3.5"
            fill="none"
            stroke="currentColor"
            viewBox="0 0 24 24"
          >
            <path
              strokeLinecap="round"
              strokeWidth={2}
              d="M13.828 10.172a4 4 0 00-5.656 0l-4 4a4 4 0 105.656 5.656l1.102-1.101"
            />
          </svg>
        }
      />
      <StatCard
        value={stats.actionable}
        label="Actionable"
        color="text-emerald-600"
        icon={
          <svg
            className="w-3.5 h-3.5"
            fill="none"
            stroke="currentColor"
            viewBox="0 0 24 24"
          >
            <path
              strokeLinecap="round"
              strokeLinejoin="round"
              strokeWidth={2}
              d="M13 10V3L4 14h7v7l9-11h-7z"
            />
          </svg>
        }
      />
      <StatCard
        value={stats.open}
        label="Open"
        color="text-emerald-500"
        icon={
          <svg
            className="w-3.5 h-3.5"
            fill="none"
            stroke="currentColor"
            viewBox="0 0 24 24"
          >
            <path
              strokeLinecap="round"
              strokeLinejoin="round"
              strokeWidth={2}
              d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2"
            />
          </svg>
        }
      />
    </div>
  );
}

function StatCard({
  value,
  label,
  color,
  icon,
}: {
  value: number;
  label: string;
  color?: string;
  icon: React.ReactNode;
}) {
  return (
    <div className="bg-zinc-50 dark:bg-zinc-800 rounded-lg px-3 py-2.5 border border-zinc-100 dark:border-zinc-800">
      <div className="flex items-center gap-1.5">
        <span className="text-zinc-400 dark:text-zinc-400">{icon}</span>
        <span
          className={`text-lg font-bold ${color || "text-zinc-700 dark:text-zinc-300"}`}
        >
          {value}
        </span>
      </div>
      <div className="text-[10px] text-zinc-400 dark:text-zinc-400 uppercase tracking-wider mt-0.5">
        {label}
      </div>
    </div>
  );
}