"use client";

import { STATUS_COLORS, STATUS_LABELS, PREFIX_COLORS, PREFIX_LABELS } from "@/lib/types";

interface StatusLegendProps {
  prefixes: string[];
}

export default function StatusLegend({ prefixes }: StatusLegendProps) {
  const statuses = ["open", "in_progress", "blocked", "closed"];

  return (
    <div className="space-y-4">
      {/* Status legend */}
      <div>
        <h4 className="text-[10px] font-semibold text-zinc-400 uppercase tracking-wider mb-2">
          Status
        </h4>
        <div className="flex flex-wrap gap-x-4 gap-y-1.5">
          {statuses.map((status) => (
            <div key={status} className="flex items-center gap-1.5">
              <span
                className="w-2.5 h-2.5 rounded-full"
                style={{ backgroundColor: STATUS_COLORS[status] }}
              />
              <span className="text-xs text-zinc-500">
                {STATUS_LABELS[status]}
              </span>
            </div>
          ))}
        </div>
      </div>

      {/* Project prefix legend */}
      {prefixes.length > 1 && (
        <div>
          <h4 className="text-[10px] font-semibold text-zinc-400 uppercase tracking-wider mb-2">
            Projects (outer ring)
          </h4>
          <div className="flex flex-wrap gap-x-4 gap-y-1.5">
            {prefixes.map((prefix) => (
              <div key={prefix} className="flex items-center gap-1.5">
                <span
                  className="w-2.5 h-2.5 rounded-full"
                  style={{
                    backgroundColor: "transparent",
                    boxShadow: `0 0 0 2px ${PREFIX_COLORS[prefix] || "#a1a1aa"}`,
                  }}
                />
                <span className="text-xs text-zinc-500">
                  {PREFIX_LABELS[prefix] || prefix}
                </span>
              </div>
            ))}
          </div>
        </div>
      )}

      {/* Interaction hints */}
      <div>
        <h4 className="text-[10px] font-semibold text-zinc-400 uppercase tracking-wider mb-2">
          Interactions
        </h4>
        <div className="space-y-1 text-xs text-zinc-400">
          <div className="flex items-center gap-2">
            <kbd className="px-1.5 py-0.5 bg-zinc-100 rounded text-[10px] font-mono border border-zinc-200">
              Click
            </kbd>
            <span>Select node</span>
          </div>
          <div className="flex items-center gap-2">
            <kbd className="px-1.5 py-0.5 bg-zinc-100 rounded text-[10px] font-mono border border-zinc-200">
              Hover
            </kbd>
            <span>Highlight connections</span>
          </div>
          <div className="flex items-center gap-2">
            <kbd className="px-1.5 py-0.5 bg-zinc-100 rounded text-[10px] font-mono border border-zinc-200">
              Scroll
            </kbd>
            <span>Zoom in/out</span>
          </div>
          <div className="flex items-center gap-2">
            <kbd className="px-1.5 py-0.5 bg-zinc-100 rounded text-[10px] font-mono border border-zinc-200">
              Drag
            </kbd>
            <span>Pan / Move nodes</span>
          </div>
          <div className="flex items-center gap-2">
            <kbd className="px-1.5 py-0.5 bg-zinc-100 rounded text-[10px] font-mono border border-zinc-200">
              Pinch
            </kbd>
            <span>Zoom (touch)</span>
          </div>
        </div>
      </div>
    </div>
  );
}