/**
 * User Editing Indicator Component
 * Shows visual indicators for which users are currently editing specific sections
 */

import { Component, For, createSignal, onMount } from 'solid-js';
import { UserPresence } from '../../lib/collaboration/presence-manager';

export interface EditingIndicatorProps {
  getConnectedUsers: () => UserPresence[];
  className?: string;
}

export const EditingIndicator: Component<EditingIndicatorProps> = (props) => {
  const [editingUsers, setEditingUsers] = createSignal<UserPresence[]>([]);

  onMount(() => {
    updateEditingUsers();

    // Poll for updates
    const interval = setInterval(() => {
      updateEditingUsers();
    }, 500);

    return () => {
      clearInterval(interval);
    };
  });

  const updateEditingUsers = () => {
    const users = props.getConnectedUsers();
    const editing = users.filter(user => 
      user.status === 'active' && 
      user.editingContext !== null
    );
    setEditingUsers(editing);
  };

  const parseEditingContext = (context: string) => {
    const parts = context.split(':');
    if (parts.length === 2) {
      return { type: parts[0], id: parts[1] };
    }
    return { type: 'unknown', id: context };
  };

  const getContextLabel = (context: string): string => {
    const { type, id } = parseEditingContext(context);
    
    const typeLabels: Record<string, string> = {
      scene: 'Scene',
      character: 'Character',
      dialogue: 'Dialogue',
      action: 'Action',
      transition: 'Transition',
      slugline: 'Slugline',
    };
    
    return `${typeLabels[type] || type}: ${id}`;
  };

  return (
    <div
      class={props.className || 'editing-indicator'}
      style={{
        display: 'flex',
        flexDirection: 'column',
        gap: '4px',
        padding: '8px 12px',
        backgroundColor: '#fff',
        borderBottom: '1px solid #e2e8f0',
      }}
    >
      <div
        style={{
          display: 'flex',
          alignItems: 'center',
          gap: '6px',
          fontSize: '11px',
          fontWeight: '500',
          color: '#64748b',
          textTransform: 'uppercase',
          letterSpacing: '0.5px',
        }}
      >
        <span
          style={{
            width: '6px',
            height: '6px',
            borderRadius: '50%',
            backgroundColor: '#22c55e',
            animation: 'pulse 2s ease-in-out infinite',
          }}
        />
        Active Editors
      </div>

      <For each={editingUsers()}>
        {(user) => {
          const { type, id } = parseEditingContext(user.editingContext!);
          
          return (
            <div
              style={{
                display: 'flex',
                alignItems: 'center',
                gap: '8px',
                padding: '4px 8px',
                backgroundColor: `${user.color}15`,
                borderRadius: '4px',
                border: `1px solid ${user.color}40`,
              }}
            >
              <span
                style={{
                  width: '10px',
                  height: '10px',
                  borderRadius: '50%',
                  backgroundColor: user.color,
                }}
              />
              <div
                style={{
                  flex: 1,
                  display: 'flex',
                  flexDirection: 'column',
                  gap: '1px',
                }}
              >
                <span
                  style={{
                    fontSize: '12px',
                    fontWeight: '500',
                    color: '#1e293b',
                  }}
                >
                  {user.name}
                </span>
                <span
                  style={{
                    fontSize: '10px',
                    color: '#64748b',
                  }}
                >
                  {getContextLabel(user.editingContext!)}
                </span>
              </div>
              <span
                style={{
                  fontSize: '10px',
                  color: '#94a3b8',
                  padding: '2px 6px',
                  backgroundColor: '#f1f5f9',
                  borderRadius: '3px',
                }}
              >
                Editing
              </span>
            </div>
          );
        }}
      </For>

      {editingUsers().length === 0 && (
        <div
          style={{
            padding: '4px 8px',
            fontSize: '11px',
            color: '#94a3b8',
            fontStyle: 'italic',
          }}
        >
          No one is currently editing
        </div>
      )}

      <style>{`
        @keyframes pulse {
          0%, 100% { opacity: 1; }
          50% { opacity: 0.5; }
        }
      `}</style>
    </div>
  );
};

export default EditingIndicator;
