import { renderWorkspacePathSegments } from '../utils';
import type { WorkspaceHoverCardState } from '../types';
import './WorkspaceOverlay.css';

interface WorkspaceHoverCardProps {
  state: WorkspaceHoverCardState | null;
  isZh: boolean;
  formatWorkspaceTime: (raw: string | undefined, isZh: boolean) => string;
  formatBytes: (value: number) => string;
}

export function WorkspaceHoverCard({
  state,
  isZh,
  formatWorkspaceTime,
  formatBytes,
}: WorkspaceHoverCardProps) {
  if (!state) return null;

  return (
    <div
      className={`workspace-hover-panel ${state.above ? 'is-above' : ''}`}
      style={{ top: state.top, left: state.left }}
      role="tooltip"
    >
      <div className="workspace-entry-info-row">
        <span className="workspace-entry-info-label">{isZh ? '全称' : 'Name'}</span>
        <span className="workspace-entry-info-value mono">{state.node.name || '-'}</span>
      </div>
      <div className="workspace-entry-info-row">
        <span className="workspace-entry-info-label">{isZh ? '完整路径' : 'Full Path'}</span>
        <span
          className="workspace-entry-info-value workspace-entry-info-path mono"
          title={`/root/.nanobot/workspace/${String(state.node.path || '').replace(/^\/+/, '')}`}
        >
          {renderWorkspacePathSegments(
            `/root/.nanobot/workspace/${String(state.node.path || '').replace(/^\/+/, '')}`,
            'hover-path',
          )}
        </span>
      </div>
      <div className="workspace-entry-info-row">
        <span className="workspace-entry-info-label">{isZh ? '创建时间' : 'Created'}</span>
        <span className="workspace-entry-info-value">{formatWorkspaceTime(state.node.ctime, isZh)}</span>
      </div>
      <div className="workspace-entry-info-row">
        <span className="workspace-entry-info-label">{isZh ? '修改时间' : 'Modified'}</span>
        <span className="workspace-entry-info-value">{formatWorkspaceTime(state.node.mtime, isZh)}</span>
      </div>
      <div className="workspace-entry-info-row">
        <span className="workspace-entry-info-label">{isZh ? '文件大小' : 'Size'}</span>
        <span className="workspace-entry-info-value mono">{Number.isFinite(Number(state.node.size)) ? formatBytes(Number(state.node.size)) : '-'}</span>
      </div>
    </div>
  );
}