"use client";

import { Icons } from "@turbostarter/ui-web/icons";
import { diagramTypeConfig } from "../DiagramCard";
import { useGraphStore } from "../../stores/useGraphStore";

import type { DiagramType } from "../../types/graph";
import type { LayoutDirection, EdgeRouting } from "../../lib/elk-layout";

const DIRECTION_LABELS: Record<LayoutDirection, string> = {
  DOWN: "Top to Bottom",
  RIGHT: "Left to Right",
  UP: "Bottom to Top",
  LEFT: "Right to Left",
};

const ROUTING_LABELS: Record<EdgeRouting, string> = {
  ORTHOGONAL: "Orthogonal",
  SPLINES: "Splines",
  POLYLINE: "Polyline",
};

interface EditorStatusBarProps {
  diagramType: DiagramType;
}

export function EditorStatusBar({ diagramType }: EditorStatusBarProps) {
  const zoomLevel = useGraphStore((s) => s.zoomLevel);
  const nodeCount = useGraphStore((s) => s.nodeCount);
  const layoutDirection = useGraphStore((s) => s.layoutDirection);
  const edgeRouting = useGraphStore((s) => s.edgeRouting);
  const setLayoutDirection = useGraphStore((s) => s.setLayoutDirection);
  const setEdgeRouting = useGraphStore((s) => s.setEdgeRouting);
  const config = diagramTypeConfig[diagramType];
  const TypeIcon = config.icon;

  return (
    <div className="flex h-7 shrink-0 items-center border-t border-border bg-background px-3 text-xs text-muted-foreground gap-4">
      <div className="flex items-center gap-1.5">
        <TypeIcon className={`h-3 w-3 ${config.color}`} />
        <span>{config.label}</span>
      </div>

      <div className="flex items-center gap-1">
        <Icons.Circle className="h-2 w-2" />
        <span>
          {nodeCount} node{nodeCount !== 1 ? "s" : ""}
        </span>
      </div>

      <div className="flex items-center gap-1">
        <select
          value={layoutDirection}
          onChange={(e) =>
            setLayoutDirection(e.target.value as LayoutDirection)
          }
          className="h-5 rounded border border-border bg-transparent px-1 text-xs text-muted-foreground focus:outline-none"
          aria-label="Layout direction"
        >
          {(Object.keys(DIRECTION_LABELS) as LayoutDirection[]).map((dir) => (
            <option key={dir} value={dir}>
              {DIRECTION_LABELS[dir]}
            </option>
          ))}
        </select>
      </div>

      <div className="flex items-center gap-1">
        <select
          value={edgeRouting}
          onChange={(e) => setEdgeRouting(e.target.value as EdgeRouting)}
          className="h-5 rounded border border-border bg-transparent px-1 text-xs text-muted-foreground focus:outline-none"
          aria-label="Edge routing"
        >
          {(Object.keys(ROUTING_LABELS) as EdgeRouting[]).map((routing) => (
            <option key={routing} value={routing}>
              {ROUTING_LABELS[routing]}
            </option>
          ))}
        </select>
      </div>

      <div className="flex-1" />

      <div className="flex items-center gap-1">
        <Icons.Search className="h-3 w-3" />
        <span>{zoomLevel}%</span>
      </div>
    </div>
  );
}
