import React from 'react';

import { TOOL_ITEM_MUTED } from '@renderer/constants/cssVariables';
import { getTriggerColorDef, type TriggerColor } from '@shared/constants/triggerColors';
import { ChevronRight } from 'lucide-react';

import { formatDuration, formatTokens, getStatusDotColor } from './baseItemHelpers';

// =============================================================================
// Types
// =============================================================================

export type ItemStatus = 'ok' | 'error' | 'pending' | 'orphaned';

interface BaseItemProps {
  /** Icon component to display */
  icon: React.ReactNode;
  /** Primary label (e.g., "Thinking", "Output", tool name) */
  label: string;
  /** Summary text shown after the label */
  summary?: string;
  /** Token count to display */
  tokenCount?: number;
  /** Label for tokens (default: "tokens") */
  tokenLabel?: string;
  /** Status indicator (green/red/gray dot) */
  status?: ItemStatus;
  /** Duration in milliseconds */
  durationMs?: number;
  /** Click handler for toggling */
  onClick: () => void;
  /** Whether the item is expanded */
  isExpanded: boolean;
  /** Whether the item has expandable content */
  hasExpandableContent?: boolean;
  /** Additional classes for highlighting (e.g., error deep linking) */
  highlightClasses?: string;
  /** Inline styles for highlighting (used by custom hex colors) */
  highlightStyle?: React.CSSProperties;
  /** Notification dot color for custom triggers */
  notificationDotColor?: TriggerColor;
  /** Children rendered when expanded */
  children?: React.ReactNode;
}

// =============================================================================
// Helper Components
// =============================================================================

/**
 * Small status dot indicator.
 */
export const StatusDot: React.FC<{ status: ItemStatus }> = ({ status }) => {
  return (
    <span
      className="inline-block size-1.5 shrink-0 rounded-full"
      style={{ backgroundColor: getStatusDotColor(status) }}
    />
  );
};

// =============================================================================
// Main Component
// =============================================================================

/**
 * BaseItem provides a consistent layout for all expandable items in the chat view.
 *
 * Layout:
 * - Clickable header row with icon, label, summary, tokens, status, and chevron
 * - Expanded content area with left border indent
 *
 * Used by: ThinkingItem, TextItem, LinkedToolItem, SlashItem, SubagentItem
 */
export const BaseItem: React.FC<BaseItemProps> = ({
  icon,
  label,
  summary,
  tokenCount,
  tokenLabel = 'tokens',
  status,
  durationMs,
  onClick,
  isExpanded,
  hasExpandableContent = true,
  highlightClasses = '',
  highlightStyle,
  notificationDotColor,
  children,
}) => {
  return (
    <div
      className={`rounded transition-all duration-300 ${highlightClasses}`}
      style={highlightStyle}
    >
      {/* Clickable Header */}
      <div
        role="button"
        tabIndex={0}
        onClick={onClick}
        onKeyDown={(e) => {
          if (e.key === 'Enter' || e.key === ' ') {
            e.preventDefault();
            onClick();
          }
        }}
        className="group flex cursor-pointer items-center gap-2 rounded px-2 py-1.5"
        style={{ backgroundColor: 'transparent' }}
        onMouseEnter={(e) =>
          Object.assign(e.currentTarget.style, { backgroundColor: 'var(--tool-item-hover-bg)' })
        }
        onMouseLeave={(e) =>
          Object.assign(e.currentTarget.style, { backgroundColor: 'transparent' })
        }
      >
        {/* Icon */}
        <span className="size-4 shrink-0" style={{ color: TOOL_ITEM_MUTED }}>
          {icon}
        </span>

        {/* Label */}
        <span className="text-sm font-medium" style={{ color: 'var(--tool-item-name)' }}>
          {label}
        </span>

        {/* Separator and Summary */}
        {summary && (
          <>
            <span className="text-sm" style={{ color: TOOL_ITEM_MUTED }}>
              -
            </span>
            <span className="flex-1 truncate text-sm" style={{ color: 'var(--tool-item-summary)' }}>
              {summary}
            </span>
          </>
        )}

        {/* Spacer if no summary */}
        {!summary && <span className="flex-1" />}

        {/* Token count badge */}
        {tokenCount != null && tokenCount > 0 && (
          <span
            className="shrink-0 rounded px-1.5 py-0.5 text-xs"
            style={{
              color: TOOL_ITEM_MUTED,
              backgroundColor: 'var(--tool-item-badge-bg)',
            }}
          >
            ~{formatTokens(tokenCount)} {tokenLabel}
          </span>
        )}

        {/* Status indicator - hidden when notification dot replaces it */}
        {status && !notificationDotColor && <StatusDot status={status} />}

        {/* Notification dot (replaces status dot when present) */}
        {notificationDotColor && (
          <span
            className="inline-block size-1.5 shrink-0 rounded-full"
            style={{ backgroundColor: getTriggerColorDef(notificationDotColor).hex }}
          />
        )}

        {/* Duration */}
        {durationMs !== undefined && (
          <span className="shrink-0 text-xs" style={{ color: TOOL_ITEM_MUTED }}>
            {formatDuration(durationMs)}
          </span>
        )}

        {/* Expand/collapse chevron */}
        {hasExpandableContent && (
          <ChevronRight
            className={`size-3 shrink-0 transition-transform ${isExpanded ? 'rotate-90' : ''}`}
            style={{ color: TOOL_ITEM_MUTED }}
          />
        )}
      </div>

      {/* Expanded Content */}
      {isExpanded && children && (
        <div
          className="ml-2 mt-2 space-y-3 pl-6"
          style={{ borderLeft: '2px solid var(--color-border)' }}
        >
          {children}
        </div>
      )}
    </div>
  );
};