import React from 'react';
import { NewsItem } from '../../types/financial';

interface NewsPanelProps {
  news: NewsItem[];
  ticker?: string;
}

export const NewsPanel: React.FC<NewsPanelProps> = ({ news, ticker }) => {
  const formatTime = (date: Date) => {
    const now = new Date();
    const diff = now.getTime() - date.getTime();
    const hours = Math.floor(diff / (1000 * 60 * 60));

    if (hours < 1) {
      const minutes = Math.floor(diff / (1000 * 60));
      return `${minutes}m ago`;
    }
    if (hours < 24) {
      return `${hours}h ago`;
    }
    const days = Math.floor(hours / 24);
    return `${days}d ago`;
  };

  return (
    <div className="bg-[#111111] border border-[#2a2a2a] rounded-lg overflow-hidden my-4">
      {/* Header */}
      <div className="bg-[#1a1a1a] px-4 py-3 border-b border-[#2a2a2a]">
        <div className="flex items-center justify-between">
          <h3 className="text-lg font-mono font-bold text-[#e0e0e0]">
            {ticker ? `News: ${ticker.toUpperCase()}` : 'Market News'}
          </h3>
          <span className="text-xs text-[#888888] font-mono">{news.length} articles</span>
        </div>
      </div>

      {/* News List */}
      <div className="divide-y divide-[#2a2a2a]">
        {news.map((item) => (
          <article key={item.id} className="p-4 hover:bg-[#1a1a1a] transition-colors cursor-pointer">
            {/* Source & Time */}
            <div className="flex items-center gap-2 mb-2">
              <span className="text-[10px] font-mono uppercase tracking-wider text-[#58a6ff] bg-[#58a6ff]/10 px-2 py-0.5 rounded">
                {item.source}
              </span>
              <span className="text-[10px] text-[#888888] font-mono">
                {formatTime(item.timestamp)}
              </span>
            </div>

            {/* Headline */}
            <h4 className="text-sm font-semibold text-[#e0e0e0] mb-2 leading-snug">
              {item.headline}
            </h4>

            {/* Snippet */}
            <p className="text-xs text-[#888888] mb-3 leading-relaxed line-clamp-2">
              {item.snippet}
            </p>

            {/* Related Tickers */}
            {item.relatedTickers.length > 0 && (
              <div className="flex gap-1.5 flex-wrap">
                {item.relatedTickers.map((ticker) => (
                  <span
                    key={ticker}
                    className="text-[10px] font-mono text-[#888888] bg-[#2a2a2a] px-2 py-0.5 rounded hover:text-[#e0e0e0] hover:bg-[#3a3a3a] transition-colors cursor-pointer"
                  >
                    {ticker}
                  </span>
                ))}
              </div>
            )}
          </article>
        ))}
      </div>

      {/* Empty State */}
      {news.length === 0 && (
        <div className="p-8 text-center">
          <div className="text-3xl mb-2">📰</div>
          <p className="text-[#888888] font-mono text-sm">No news articles found</p>
        </div>
      )}
    </div>
  );
};
