import React from 'react';
import { TrendingUp, TrendingDown } from 'lucide-react';
import { TickerHistoryEntry } from '../../types/terminal';

interface TickerHistoryProps {
  history: TickerHistoryEntry[];
  onTickerClick: (symbol: 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 TickerHistory: React.FC<TickerHistoryProps> = ({ history, onTickerClick }) => {
  if (!history || history.length === 0) {
    return (
      <div className="space-y-2">
        <h4 className="text-[10px] font-mono uppercase tracking-wider text-[#888888] px-1">
          Recent Searches
        </h4>
        <div className="text-center py-4 px-2">
          <p className="text-xs text-[#666666]">No recent searches</p>
          <p className="text-[10px] text-[#555555] mt-1">
            Use ticker commands like /search, /fa, /news, or /analyze
          </p>
        </div>
      </div>
    );
  }

  return (
    <div className="space-y-2">
      <div className="flex items-center justify-between px-1">
        <h4 className="text-[10px] font-mono uppercase tracking-wider text-[#888888]">
          Recent Searches
        </h4>
      </div>

      <div className="space-y-0.5">
        {history.map((entry) => {
          const { company, timestamp } = entry;
          const hasChange = typeof company.changePercent === 'number';
          const isPositive = typeof company.change === 'number' ? company.change >= 0 : false;
          const isLoading = entry.isLoading;

          return (
            <button
              key={company.symbol}
              onClick={() => onTickerClick(company.symbol)}
              className={`w-full text-left px-2 py-2 border-l-2 transition-all group ${
                isLoading
                  ? 'border-[#33536e] bg-[linear-gradient(90deg,rgba(18,28,37,0.96),rgba(12,19,26,0.88))]'
                  : 'border-transparent hover:border-[#58a6ff] hover:bg-[#1a1a1a]'
              }`}
            >
              <div className="flex items-center justify-between">
                <div className="flex items-center gap-2 min-w-0 flex-1">
                  <span className="font-mono font-bold text-sm text-[#e0e0e0] group-hover:text-[#58a6ff] transition-colors">
                    {company.symbol}
                  </span>
                  {isLoading ? (
                    <div className="flex items-center gap-2 min-w-0 flex-1">
                      <span className="text-[10px] text-[#7f93a7] font-mono uppercase tracking-[0.16em]">
                        syncing
                      </span>
                      <span className="h-2 w-[4.5rem] rounded-full bg-[#223646] animate-pulse" />
                    </div>
                  ) : (
                    <span className="text-[10px] text-[#888888] truncate">
                      {company.name || company.symbol}
                    </span>
                  )}
                </div>
                <div className="flex items-center gap-2 flex-shrink-0 ml-2">
                  {isLoading ? (
                    <span className="h-3 w-14 rounded-full bg-[#203447] animate-pulse" />
                  ) : hasChange && (
                    <>
                      <span className={`text-xs font-mono ${isPositive ? 'text-[#00d26a]' : 'text-[#ff4757]'}`}>
                        {isPositive ? '+' : ''}{company.changePercent!.toFixed(2)}%
                      </span>
                      {isPositive ? (
                        <TrendingUp className="h-3 w-3 text-[#00d26a]" />
                      ) : (
                        <TrendingDown className="h-3 w-3 text-[#ff4757]" />
                      )}
                    </>
                  )}
                </div>
              </div>
              <div className="flex items-center justify-between mt-1">
                {isLoading ? (
                  <span className="h-3 w-20 rounded-full bg-[#2a4257] animate-pulse" />
                ) : (
                  <span className="text-xs font-mono text-[#e0e0e0]">
                    {typeof company.price === 'number' ? `$${company.price.toFixed(2)}` : 'Quote pending'}
                  </span>
                )}
                <div className="flex items-center gap-3">
                  {isLoading ? (
                    <>
                      <span className="h-2.5 w-16 rounded-full bg-[#1e313f] animate-pulse" />
                      <span className="h-2.5 w-12 rounded-full bg-[#182631] animate-pulse" />
                    </>
                  ) : typeof company.volume === 'number' && (
                    <span className="text-[10px] text-[#666666]">
                      Vol: {company.volume.toLocaleString()}
                    </span>
                  )}
                  {!isLoading && (
                    <span className="text-[10px] text-[#888888]">
                      {formatTimeAgo(timestamp)}
                    </span>
                  )}
                </div>
              </div>
            </button>
          );
        })}
      </div>
    </div>
  );
};
