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

interface CompanyPanelProps {
  company: Company;
}

export const CompanyPanel: React.FC<CompanyPanelProps> = ({ company }) => {
  const formatCurrency = (value: number) => {
    if (value >= 1e12) return `$${(value / 1e12).toFixed(2)}T`;
    if (value >= 1e9) return `$${(value / 1e9).toFixed(2)}B`;
    if (value >= 1e6) return `$${(value / 1e6).toFixed(2)}M`;
    return `$${value.toFixed(2)}`;
  };

  const formatNumber = (value: number) => {
    return new Intl.NumberFormat('en-US').format(value);
  };

  const isPositive = company.change >= 0;

  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">
          <div>
            <h3 className="text-xl font-mono font-bold text-[#e0e0e0]">{company.symbol}</h3>
            <p className="text-sm text-[#888888] font-mono mt-0.5">{company.name}</p>
          </div>
          <div className="text-right">
            <div className="text-2xl font-mono font-bold text-[#e0e0e0]">
              ${company.price.toFixed(2)}
            </div>
            <div className={`text-sm font-mono mt-0.5 ${isPositive ? 'text-[#00d26a]' : 'text-[#ff4757]'}`}>
              {isPositive ? '+' : ''}{company.change.toFixed(2)} ({isPositive ? '+' : ''}{company.changePercent.toFixed(2)}%)
            </div>
          </div>
        </div>
      </div>

      {/* Stats Grid */}
      <div className="p-4">
        <div className="grid grid-cols-2 gap-4">
          {/* Market Cap */}
          <div className="bg-[#1a1a1a] rounded p-3">
            <div className="text-[10px] text-[#888888] font-mono uppercase tracking-wider mb-1">Market Cap</div>
            <div className="text-lg font-mono text-[#e0e0e0]">{formatCurrency(company.marketCap)}</div>
          </div>

          {/* Volume */}
          <div className="bg-[#1a1a1a] rounded p-3">
            <div className="text-[10px] text-[#888888] font-mono uppercase tracking-wider mb-1">Volume</div>
            <div className="text-lg font-mono text-[#e0e0e0]">{formatNumber(company.volume)}</div>
          </div>

          {/* P/E Ratio */}
          {company.pe !== undefined && (
            <div className="bg-[#1a1a1a] rounded p-3">
              <div className="text-[10px] text-[#888888] font-mono uppercase tracking-wider mb-1">P/E Ratio</div>
              <div className="text-lg font-mono text-[#e0e0e0]">{company.pe.toFixed(1)}</div>
            </div>
          )}

          {/* EPS */}
          {company.eps !== undefined && (
            <div className="bg-[#1a1a1a] rounded p-3">
              <div className="text-[10px] text-[#888888] font-mono uppercase tracking-wider mb-1">EPS</div>
              <div className="text-lg font-mono text-[#e0e0e0]">${company.eps.toFixed(2)}</div>
            </div>
          )}

          {/* 52W High */}
          {company.high52Week !== undefined && (
            <div className="bg-[#1a1a1a] rounded p-3">
              <div className="text-[10px] text-[#888888] font-mono uppercase tracking-wider mb-1">52W High</div>
              <div className="text-lg font-mono text-[#00d26a]">${company.high52Week.toFixed(2)}</div>
            </div>
          )}

          {/* 52W Low */}
          {company.low52Week !== undefined && (
            <div className="bg-[#1a1a1a] rounded p-3">
              <div className="text-[10px] text-[#888888] font-mono uppercase tracking-wider mb-1">52W Low</div>
              <div className="text-lg font-mono text-[#ff4757]">${company.low52Week.toFixed(2)}</div>
            </div>
          )}
        </div>

        {/* Mini Sparkline Placeholder */}
        <div className="mt-4 bg-[#1a1a1a] rounded p-3">
          <div className="text-[10px] text-[#888888] font-mono uppercase tracking-wider mb-2">Intraday</div>
          <div className="h-16 flex items-end gap-0.5">
            {Array.from({ length: 40 }).map((_, i) => {
              const height = 30 + Math.random() * 70;
              const isLast = i === 39;
              return (
                <div
                  key={i}
                  className={`flex-1 rounded-sm ${isLast ? 'bg-[#58a6ff]' : 'bg-[#2a2a2a]'}`}
                  style={{ height: `${height}%` }}
                />
              );
            })}
          </div>
        </div>
      </div>
    </div>
  );
};
