import React from 'react';

export type SplashPhoneVariant = 'chart' | 'orderbook' | 'watchlist' | 'trade';

interface Props {
  variant: SplashPhoneVariant;
  style?: React.CSSProperties;
  className?: string;
}

const MiniChart: React.FC = () => (
  <svg viewBox="0 0 120 200" className="splash-phone__svg" aria-hidden>
    <rect width="120" height="200" fill="#0a0e14" />
    {[28, 52, 76, 100, 124, 148, 172].map(y => (
      <line key={y} x1="0" y1={y} x2="120" y2={y} stroke="rgba(255,255,255,0.04)" />
    ))}
    {[
      { x: 12, h: 90, l: 118, up: true },
      { x: 22, h: 82, l: 112, up: true },
      { x: 32, h: 95, l: 125, up: false },
      { x: 42, h: 78, l: 108, up: true },
      { x: 52, h: 70, l: 100, up: true },
      { x: 62, h: 88, l: 118, up: false },
      { x: 72, h: 65, l: 95, up: true },
      { x: 82, h: 58, l: 88, up: true },
      { x: 92, h: 72, l: 102, up: true },
      { x: 102, h: 48, l: 78, up: true },
    ].map((c, i) => (
      <g key={i}>
        <line x1={c.x} y1={c.h} x2={c.x} y2={c.l} stroke="rgba(255,255,255,0.2)" />
        <rect
          x={c.x - 4}
          y={Math.min(c.h, c.l)}
          width={8}
          height={Math.abs(c.l - c.h) || 6}
          fill={c.up ? 'rgba(34,197,94,0.55)' : 'rgba(239,68,68,0.5)'}
          rx="1"
        />
      </g>
    ))}
    <path
      d="M8,130 Q40,110 70,95 T108,55"
      fill="none"
      stroke="rgba(250,204,21,0.35)"
      strokeWidth="1.2"
    />
  </svg>
);

const MiniOrderbook: React.FC = () => (
  <svg viewBox="0 0 120 200" className="splash-phone__svg" aria-hidden>
    <rect width="120" height="200" fill="#0a0e14" />
    {Array.from({ length: 8 }, (_, i) => {
      const y = 24 + i * 20;
      const askW = 18 + (i % 4) * 8;
      const bidW = 22 + ((i + 2) % 4) * 6;
      return (
        <g key={i}>
          <rect x={60 - askW} y={y} width={askW} height={12} fill="rgba(239,68,68,0.35)" rx="2" />
          <rect x={60} y={y} width={bidW} height={12} fill="rgba(34,197,94,0.32)" rx="2" />
        </g>
      );
    })}
    <rect x="20" y="88" width="80" height="22" fill="rgba(212,175,55,0.12)" rx="4" />
  </svg>
);

const MiniWatchlist: React.FC = () => (
  <svg viewBox="0 0 120 200" className="splash-phone__svg" aria-hidden>
    <rect width="120" height="200" fill="#0a0e14" />
    {[0, 1, 2, 3, 4, 5].map(i => (
      <g key={i}>
        <rect x="10" y={18 + i * 28} width="100" height="22" fill="rgba(255,255,255,0.04)" rx="4" />
        <text x="16" y={33 + i * 28} fill="rgba(255,255,255,0.2)" fontSize="7" fontFamily="monospace">
          005930
        </text>
        <text
          x="104"
          y={33 + i * 28}
          fill={i % 2 === 0 ? 'rgba(34,197,94,0.45)' : 'rgba(239,68,68,0.4)'}
          fontSize="7"
          textAnchor="end"
          fontFamily="monospace"
        >
          {i % 2 === 0 ? '+1.2%' : '-0.4%'}
        </text>
      </g>
    ))}
  </svg>
);

const MiniTrade: React.FC = () => (
  <svg viewBox="0 0 120 200" className="splash-phone__svg" aria-hidden>
    <rect width="120" height="200" fill="#0a0e14" />
    <path
      d="M8,120 Q45,95 75,80 T108,50"
      fill="none"
      stroke="rgba(34,197,94,0.3)"
      strokeWidth="1.2"
    />
    {[
      { x: 20, h: 100, l: 118, up: true },
      { x: 40, h: 85, l: 105, up: true },
      { x: 60, h: 92, l: 112, up: false },
      { x: 80, h: 72, l: 95, up: true },
    ].map((c, i) => (
      <rect
        key={i}
        x={c.x - 3}
        y={Math.min(c.h, c.l)}
        width={6}
        height={Math.abs(c.l - c.h) || 5}
        fill={c.up ? 'rgba(34,197,94,0.5)' : 'rgba(239,68,68,0.45)'}
      />
    ))}
    <rect x="10" y="158" width="46" height="28" fill="rgba(34,197,94,0.4)" rx="6" />
    <rect x="64" y="158" width="46" height="28" fill="rgba(239,68,68,0.35)" rx="6" />
  </svg>
);

const SCREENS: Record<SplashPhoneVariant, React.FC> = {
  chart: MiniChart,
  orderbook: MiniOrderbook,
  watchlist: MiniWatchlist,
  trade: MiniTrade,
};

const SplashPhoneMockup: React.FC<Props> = ({ variant, style, className = '' }) => {
  const Screen = SCREENS[variant];
  return (
    <div className={`splash-phone ${className}`.trim()} style={style}>
      <div className="splash-phone__frame">
        <div className="splash-phone__notch" />
        <div className="splash-phone__screen">
          <Screen />
        </div>
      </div>
    </div>
  );
};

export default SplashPhoneMockup;