import React, { useMemo } from 'react';
import { motion } from 'framer-motion';

const buildPath = (points, width, height) => {
  if (!points.length) {
    return '';
  }

  const prices = points.map((point) => point.price);
  const min = Math.min(...prices);
  const max = Math.max(...prices);
  const range = max - min || 1;

  return points
    .map((point, index) => {
      const x = (index / Math.max(points.length - 1, 1)) * width;
      const y = height - ((point.price - min) / range) * height;
      return `${index === 0 ? 'M' : 'L'} ${x.toFixed(2)} ${y.toFixed(2)}`;
    })
    .join(' ');
};

export const MarketPanel = ({ chart, history, trade, engine, lastPriceDelta }) => {
  const path = useMemo(() => buildPath(history || [], 250, 90), [history]);
  const priceTone = lastPriceDelta < 0 ? '#d95d5d' : '#52b788';

  return (
    <div className="rounded-[2rem] border border-[#7d5a4f]/15 bg-[#fff8ef]/92 p-6 shadow-[0_28px_50px_rgba(77,44,26,0.12)]">
      <div className="flex items-start justify-between gap-4">
        <div>
          <div className="text-[11px] font-semibold uppercase tracking-[0.34em] text-stone-500">Live Execution</div>
          <h3 className="mt-2 text-2xl font-semibold text-stone-800">Market tape</h3>
        </div>
        <div className="rounded-full bg-white/80 px-3 py-1 text-[10px] font-semibold uppercase tracking-[0.24em] text-stone-500">
          {engine?.policy_active ? 'SLM live' : 'Fallback'}
        </div>
      </div>

      <div className="mt-5 rounded-[1.6rem] border border-white/65 bg-white/75 p-4">
        <div className="flex items-center justify-between text-[11px] font-semibold uppercase tracking-[0.24em] text-stone-500">
          <span>Price</span>
          <span>
            {lastPriceDelta >= 0 ? '+' : ''}
            {lastPriceDelta.toFixed(2)}
          </span>
        </div>

        <div className="mt-3 text-4xl font-semibold tracking-tight text-stone-800">
          ${chart?.price?.toLocaleString(undefined, { minimumFractionDigits: 2, maximumFractionDigits: 2 })}
        </div>

        <svg viewBox="0 0 250 90" className="mt-4 h-[90px] w-full overflow-visible">
          <path d={path} fill="none" stroke="#edd5c4" strokeWidth="10" strokeLinecap="round" />
          <motion.path
            d={path}
            fill="none"
            stroke={priceTone}
            strokeWidth="5"
            strokeLinecap="round"
            initial={{ pathLength: 0 }}
            animate={{ pathLength: 1 }}
            transition={{ duration: 0.55 }}
          />
        </svg>
      </div>

      <div className="mt-5 grid grid-cols-2 gap-3">
        <div className="rounded-[1.4rem] bg-white/75 px-4 py-4">
          <div className="text-[10px] uppercase tracking-[0.24em] text-stone-500">Last side</div>
          <div className="mt-2 text-lg font-semibold text-stone-800">{trade?.side || 'HOLD'}</div>
        </div>
        <div className="rounded-[1.4rem] bg-white/75 px-4 py-4">
          <div className="text-[10px] uppercase tracking-[0.24em] text-stone-500">Notional</div>
          <div className="mt-2 text-lg font-semibold text-stone-800">
            ${trade?.notional?.toLocaleString(undefined, { maximumFractionDigits: 0 })}
          </div>
        </div>
      </div>

      <div className="mt-5 rounded-[1.6rem] border border-white/65 bg-white/80 px-4 py-4">
        <div className="text-[10px] font-semibold uppercase tracking-[0.24em] text-stone-500">Decision reason</div>
        <div className="mt-2 text-sm leading-6 text-stone-600">{trade?.reason || 'Waiting for the desk to move.'}</div>
      </div>
    </div>
  );
};