import React from 'react';
import { Trash2 } from 'lucide-react';
import { ChatHistoryEntry } from '../../types/terminal';

interface ChatHistoryProps {
  history: ChatHistoryEntry[];
  onChatClick: (entry: ChatHistoryEntry) => void;
  onRemoveChat?: (id: string) => void;
}

const formatTimeAgo = (timestamp: Date): string => {
  const now = new Date();
  const diffMs = now.getTime() - timestamp.getTime();
  const diffMins = Math.floor(diffMs / 60000);
  const diffHours = Math.floor(diffMs / 3600000);
  const diffDays = Math.floor(diffMs / 86400000);

  if (diffMins < 1) return 'Just now';
  if (diffMins < 60) return `${diffMins}m ago`;
  if (diffHours < 24) return `${diffHours}h ago`;
  if (diffDays === 1) return 'Yesterday';
  if (diffDays < 7) return `${diffDays}d ago`;
  return timestamp.toLocaleDateString();
};

export const ChatHistory: React.FC<ChatHistoryProps> = ({
  history,
  onChatClick,
  onRemoveChat,
}) => {
  if (!history || history.length === 0) {
    return (
      <div className="space-y-2">
        <h4 className="text-[10px] font-mono uppercase tracking-wider text-term-text-tertiary px-1">
          Recent Chats
        </h4>
        <div className="text-center py-4 px-2">
          <p className="text-xs text-term-text-muted">No recent chats</p>
        </div>
      </div>
    );
  }

  return (
    <div className="space-y-2">
      <h4 className="text-[10px] font-mono uppercase tracking-wider text-term-text-tertiary px-1">
        Recent Chats
      </h4>
      <div className="space-y-0.5">
        {history.map((entry) => (
          <button
            key={entry.id}
            onClick={() => onChatClick(entry)}
            className="w-full text-left px-2 py-2 border-l-2 border-transparent hover:border-info hover:bg-term-highlight transition-all group"
          >
            <div className="flex items-center justify-between">
              <span className="font-mono text-sm text-term-text group-hover:text-info transition-colors truncate flex-1 min-w-0">
                {entry.title}
              </span>
              <div className="flex items-center gap-2 flex-shrink-0 ml-2">
                {entry.commandCount > 0 && (
                  <span className="text-[10px] font-mono bg-term-highlight text-term-text-tertiary px-1.5 py-0.5 rounded">
                    {entry.commandCount} cmd{entry.commandCount !== 1 ? 's' : ''}
                  </span>
                )}
                {onRemoveChat && (
                  <span
                    role="button"
                    tabIndex={0}
                    onClick={(e) => {
                      e.stopPropagation();
                      onRemoveChat(entry.id);
                    }}
                    onKeyDown={(e) => {
                      if (e.key === 'Enter' || e.key === ' ') {
                        e.stopPropagation();
                        onRemoveChat(entry.id);
                      }
                    }}
                    className="text-term-text-tertiary hover:text-negative transition-colors opacity-0 group-hover:opacity-100"
                  >
                    <Trash2 className="h-3 w-3" />
                  </span>
                )}
              </div>
            </div>
            {entry.responsePreview && (
              <p className="text-[10px] text-term-text-muted mt-1 truncate">
                {entry.responsePreview}
              </p>
            )}
            <div className="mt-1">
              <span className="text-[10px] text-term-text-tertiary">
                {formatTimeAgo(entry.updatedAt)}
              </span>
            </div>
          </button>
        ))}
      </div>
    </div>
  );
};
