import { Link } from 'react-router';
import { X } from 'lucide-react';
import { getIcon } from 'material-file-icons';
import type { OpenFile } from './useEditorState';

type EditorTabsProps = {
  files: OpenFile[];
  activePath: string | null;
  onSelect: (path: string) => void;
  onClose: (path: string) => void;
  theme?: string;
  /** Query string for a file, when the editor owns the address bar. Absent, the tabs stay buttons. */
  searchForFile?: ((path: string) => string) | null;
};

const FileIcon = ({ name }: { name: string }) => {
  const svg = getIcon(name).svg;
  return <span className="inline-flex h-4 w-4 shrink-0" dangerouslySetInnerHTML={{ __html: svg }} />;
};

export const EditorTabs = ({ files, activePath, onSelect, onClose, theme, searchForFile }: EditorTabsProps) => {
  if (files.length === 0) return null;

  const isDark = theme !== 'vs';
  const borderColor = isDark ? '#333' : '#e0e0e0';
  const activeBg = isDark ? '#1e1e1e' : '#ffffff';
  const inactiveBg = isDark ? '#181818' : '#f3f3f3';
  const activeColor = isDark ? '#ccc' : '#333';
  const inactiveColor = isDark ? '#888' : '#666';

  return (
    <div
      className="flex items-center overflow-x-auto shrink-0 code-editor-scrollable"
      style={{ borderBottom: `1px solid ${borderColor}` }}
    >
      {files.map((file) => {
        const isActive = file.path === activePath;
        const label = (
          <>
            <FileIcon name={file.name} />
            <span>{file.name}</span>
            {file.isDirty && <span className="w-2 h-2 rounded-full bg-blue-400 shrink-0" />}
          </>
        );
        const labelClass = 'flex items-center gap-1.5 text-sm cursor-pointer whitespace-nowrap';

        return (
          // Close is a sibling of the tab, not a child of it. It used to be a `role="button"` span nested
          // inside the tab's own button, which is invalid either way and would be a nested interactive
          // element inside an anchor now — the exact shape the audit says to avoid.
          <div
            key={file.path}
            className="flex items-center gap-1 pl-3 pr-2 py-1.5 transition-colors"
            style={{
              background: isActive ? activeBg : inactiveBg,
              color: isActive ? activeColor : inactiveColor,
              borderRight: `1px solid ${borderColor}`,
            }}
          >
            {searchForFile ? (
              <Link to={{ search: searchForFile(file.path) }} className={labelClass}>
                {label}
              </Link>
            ) : (
              <button onClick={() => onSelect(file.path)} className={labelClass}>
                {label}
              </button>
            )}
            <button
              onClick={() => onClose(file.path)}
              aria-label={`Close ${file.name}`}
              className="p-0.5 rounded cursor-pointer transition-colors hover:bg-white/10"
              style={{ color: inactiveColor }}
            >
              <X className="h-3 w-3" />
            </button>
          </div>
        );
      })}
    </div>
  );
};
