"use client";

import { X, Folder, Package } from "lucide-react";
import type { Doc } from "@/lib/useDocuments";

interface DocumentTabsProps {
  docs: Doc[];
  activeId: string;
  onSwitch: (id: string) => void;
  onClose: (id: string) => void;
}

/**
 * Tab strip — scenario first, then every open class.
 * Class tabs always show `Name.ekmod` so the model identity is never lost.
 */
export default function DocumentTabs({
  docs,
  activeId,
  onSwitch,
  onClose,
}: DocumentTabsProps) {
  return (
    <div className="flex h-9 items-stretch border-b border-[var(--line)] bg-[var(--chrome)] overflow-x-auto">
      {docs.map((doc) => {
        const isActive = doc.id === activeId;
        const isWorkspace = doc.kind === "workspace";
        return (
          <div
            key={doc.id}
            role="tab"
            tabIndex={0}
            aria-selected={isActive}
            onClick={() => onSwitch(doc.id)}
            onMouseDown={(e) => {
              if (e.button === 1 && !isWorkspace) {
                e.preventDefault();
                onClose(doc.id);
              }
            }}
            onKeyDown={(e) => {
              if (e.key === "Enter" || e.key === " ") {
                e.preventDefault();
                onSwitch(doc.id);
              }
            }}
            className={`group relative flex min-w-[150px] max-w-[240px] cursor-pointer items-center gap-2 border-r border-[var(--line)] px-3 text-[12px] transition-colors ${
              isActive
                ? "bg-[var(--panel)] text-[var(--ink)]"
                : "bg-[var(--chrome)] text-[var(--ink-dim)] hover:bg-[var(--chrome-2)] hover:text-[var(--ink)]"
            }`}
            title={
              isWorkspace
                ? "Workspace — main canvas (place classes and parts here)"
                : `Class ${doc.name}.ekmod — edit definition`
            }
          >
            {isActive && (
              <span className="absolute inset-x-0 top-0 h-[2px] bg-[var(--accent)]" />
            )}

            {isWorkspace ? (
              <Folder size={13} className="shrink-0 text-[var(--accent)]" />
            ) : (
              <Package size={13} className="shrink-0 text-[var(--accent)]" />
            )}

            <span className="min-w-0 flex-1 truncate">
              {isWorkspace ? (
                <span className="font-semibold">Workspace</span>
              ) : (
                <>
                  <span className="mono font-semibold">{doc.name}</span>
                  <span className="mono ml-0.5 text-[10px] font-normal text-[var(--ink-faint)]">
                    .ekmod
                  </span>
                </>
              )}
            </span>

            {doc.dirty && (
              <span
                className="h-1.5 w-1.5 shrink-0 rounded-full bg-[var(--warn)]"
                title="Unsaved changes"
              />
            )}

            {!isWorkspace && (
              <button
                type="button"
                onClick={(e) => {
                  e.stopPropagation();
                  onClose(doc.id);
                }}
                className="shrink-0 rounded p-0.5 text-[var(--ink-faint)] opacity-0 hover:bg-[var(--chrome-2)] hover:text-[var(--ink)] group-hover:opacity-100"
                title={`Close ${doc.name}.ekmod`}
                aria-label={`Close ${doc.name} class`}
              >
                <X size={12} />
              </button>
            )}
          </div>
        );
      })}
    </div>
  );
}
