import React, { useState } from 'react';
import { useDraggablePanel } from '../hooks/useDraggablePanel';
import { placePaperOrder, placeLiveOrder, loadLiveSummary } from '../utils/backendApi';
import { formatSignalTime } from '../utils/tradeSignalDisplay';
import { TRADE_BUY_COLOR, TRADE_SELL_COLOR } from '../utils/tradeSignalColors';
import { useTradeAlertTimeFormat } from '../utils/tradeAlertTimeFormat';

export interface TradeSignalInfo {
  market:        string;
  signalType:    'BUY' | 'SELL';
  price:         number;
  candleTime:    number;
  strategyName?: string | null;
  strategyId?:   number | null;
  executionType?: string;
  candleType?:   string;
}

interface Props {
  signal:   TradeSignalInfo;
  onClose:  () => void;
  centered?: boolean;
  tradingMode?: string;
  hasUpbitKeys?: boolean;
  paperTradingEnabled?: boolean;
  liveAutoTradeBudgetPct?: number;
  paperAutoTradeBudgetPct?: number;
  onOrderDone?: () => void;
}

const fmt = (n: number): string =>
  n > 0 ? n.toLocaleString('ko-KR', { maximumFractionDigits: 0 }) : '0';


function execLabel(type?: string, candleType?: string): string {
  const base = type === 'REALTIME_TICK' ? '실시간 틱' : '봉 마감';
  return candleType ? `${base}(${candleType})` : base;
}

const CandleIcon: React.FC<{ color: string }> = ({ color }) => (
  <svg width="28" height="28" viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg">
    <rect x="6"  y="9"  width="5" height="12" rx="1" fill={color} opacity="0.9"/>
    <line x1="8.5"  y1="5"  x2="8.5"  y2="9"  stroke={color} strokeWidth="1.5"/>
    <line x1="8.5"  y1="21" x2="8.5"  y2="25" stroke={color} strokeWidth="1.5"/>
    <rect x="17" y="7"  width="5" height="9"  rx="1" fill="var(--down,#4dabf7)" opacity="0.8"/>
    <line x1="19.5" y1="4"  x2="19.5" y2="7"  stroke="var(--down,#4dabf7)" strokeWidth="1.5"/>
    <line x1="19.5" y1="16" x2="19.5" y2="20" stroke="var(--down,#4dabf7)" strokeWidth="1.5"/>
  </svg>
);

export const TradeAlertModal: React.FC<Props> = ({
  signal,
  onClose,
  centered = false,
  tradingMode = 'PAPER',
  hasUpbitKeys = false,
  paperTradingEnabled = true,
  liveAutoTradeBudgetPct = 95,
  paperAutoTradeBudgetPct = 95,
  onOrderDone,
}) => {
  useTradeAlertTimeFormat();
  const isBuy       = signal.signalType === 'BUY';
  const accentColor = isBuy ? TRADE_BUY_COLOR : TRADE_SELL_COLOR;
  const accentGlow  = isBuy ? 'rgba(239, 83, 80, 0.28)' : 'rgba(77, 171, 247, 0.28)';
  const signalLabel = isBuy ? 'BUY' : 'SELL';
  const signalKo    = isBuy ? '매수 알림' : '매도 알림';

  const coinSymbol = signal.market.replace(/^[A-Z]+-/, '');
  const fiatSymbol = signal.market.split('-')[0] ?? 'KRW';

  const useLive = (tradingMode === 'LIVE' || tradingMode === 'BOTH') && hasUpbitKeys;
  const usePaper = (tradingMode === 'PAPER' || tradingMode === 'BOTH') && paperTradingEnabled;

  const [limitPrice, setLimitPrice] = useState(fmt(signal.price));
  const [memo,       setMemo]       = useState('');
  const [activePct,  setActivePct]  = useState<string | null>(null);
  const [ordering, setOrdering]     = useState(false);

  const {
    panelRef,
    dragging,
    onHeaderPointerDown, headerTouchStyle,
    panelStyle,
    headerCursor,
  } = useDraggablePanel({
    centerOnMount: centered,
    initialPosition: { x: 40, y: 40 },
  });

  const handlePct = (pct: string) => {
    setActivePct(pct);
  };

  const resolveBudgetPct = (): number => {
    if (activePct === '25%') return 25;
    if (activePct === '50%') return 50;
    if (activePct === '100%') return 100;
    return paperAutoTradeBudgetPct;
  };

  const handleOrder = async (type: 'limit' | 'market') => {
    if (ordering) return;
    setOrdering(true);
    try {
      const side = signal.signalType;
      const budgetPct = resolveBudgetPct();
      const orderPrice = type === 'limit'
        ? Number(limitPrice.replace(/,/g, ''))
        : signal.price;
      let executed = false;

      if (usePaper) {
        await placePaperOrder({
          market: signal.market,
          side,
          orderKind: type === 'market' ? 'market' : 'limit',
          price: orderPrice,
          quantity: 0,
          budgetPct,
          source: 'MANUAL',
          strategyId: signal.strategyId ?? undefined,
        });
        executed = true;
      }

      if (useLive && type === 'market') {
        const livePct = activePct === '25%' ? 25 : activePct === '50%' ? 50 : activePct === '100%' ? 100 : liveAutoTradeBudgetPct;
        const summary = isBuy ? await loadLiveSummary() : null;
        const krwAmount = isBuy && summary
          ? summary.krwBalance * livePct / 100
          : undefined;
        await placeLiveOrder({
          market: signal.market,
          side,
          orderKind: 'market',
          krwAmount,
          strategyId: signal.strategyId ?? undefined,
        });
        executed = true;
      }

      if (!executed) {
        window.alert('주문 가능한 채널이 없습니다. 설정에서 모의투자 또는 실거래 API를 확인하세요.');
        return;
      }

      onOrderDone?.();
      onClose();
    } catch (e) {
      window.alert((e as Error).message);
    } finally {
      setOrdering(false);
    }
  };

  return (
    <div className="tam-overlay">
      <div
        ref={panelRef}
        className="tam-modal app-popup-shell"
        style={{
          ...panelStyle,
          zIndex: 10000,
          cursor: dragging ? 'grabbing' : undefined,
          '--tam-accent':      accentColor,
          '--tam-accent-glow': accentGlow,
        } as React.CSSProperties}
        onMouseDown={e => e.stopPropagation()}
      >
        <div
          className="gc-popup-header tam-header"
          onPointerDown={onHeaderPointerDown}
          style={{ cursor: headerCursor, ...headerTouchStyle }}
        >
          <div className="tam-header-left">
            <span className="tam-badge" style={{ background: accentColor }}>
              {signalLabel}
            </span>
            <span className="tam-header-title">
              ALERT
              <span className="tam-header-ko"> ({signalKo})</span>
            </span>
          </div>
          <button className="tam-close" onClick={onClose} title="닫기">✕</button>
        </div>

        <div className="tam-price-section">
          <div className="tam-price-row">
            <span className="tam-market-name">{signal.market}</span>
            <span className="tam-price-arrow" style={{ color: accentColor }}>
              {isBuy ? '↑' : '↓'}
            </span>
            <span className="tam-price-value" style={{ color: accentColor }}>
              ₩{fmt(signal.price)}
            </span>
          </div>
          <div className="tam-price-time">
            발생 시각: {formatSignalTime(signal.candleTime)}
          </div>
        </div>

        <div className="tam-strategy-card">
          <div className="tam-strategy-icon">
            <CandleIcon color={accentColor} />
          </div>
          <div className="tam-strategy-info">
            <div className="tam-strategy-name">
              <span className="tam-strategy-label">전략명</span>
              <span className="tam-strategy-val">
                {signal.strategyName ?? '(전략 미지정)'}
              </span>
            </div>
            <div className="tam-strategy-exec">
              <span className="tam-strategy-label">실행 방식</span>
              <span className="tam-strategy-val tam-strategy-exec-val">
                {execLabel(signal.executionType, signal.candleType)}
              </span>
            </div>
          </div>
        </div>

        <div className="tam-order-section">
          <div className="tam-field-row">
            <span className="tam-field-label">자산 비율</span>
            <div className="tam-pct-group">
              {['25%', '50%', '100%'].map(p => (
                <button
                  key={p}
                  type="button"
                  className={`tam-pct-btn2 ${activePct === p ? 'tam-pct-btn2--active' : ''}`}
                  style={activePct === p ? { borderColor: accentColor, color: accentColor } : undefined}
                  onClick={() => handlePct(p)}
                >
                  {p}
                </button>
              ))}
            </div>
          </div>

          <div className="tam-field-row">
            <span className="tam-field-label">지정가</span>
            <div className="tam-price-input-wrap">
              <input
                className="tam-price-input"
                value={limitPrice}
                onChange={e => setLimitPrice(e.target.value)}
                inputMode="numeric"
              />
            </div>
            <button
              type="button"
              className="tam-market-btn"
              disabled={ordering}
              onClick={() => handleOrder('market')}
            >
              시장가 주문
            </button>
          </div>

          <div className="tam-field-row tam-field-row--memo">
            <span className="tam-field-label">메모</span>
            <input
              className="tam-memo-input"
              value={memo}
              onChange={e => setMemo(e.target.value)}
              placeholder="메모 입력 (선택)"
            />
          </div>

          <button
            type="button"
            className="tam-cta-btn"
            style={{ background: accentColor }}
            disabled={ordering}
            onClick={() => handleOrder('limit')}
          >
            {ordering ? '주문 중…' : `${fiatSymbol} ${coinSymbol} ${isBuy ? '매수' : '매도'} (${usePaper ? '모의' : '실거래'})`}
          </button>

          <p className="tam-disclaimer">
            {useLive && usePaper && '※ 모의·실거래 병행: 시장가는 모의·실거래 모두 체결, 지정가는 모의 계좌 체결'}
            {useLive && !usePaper && '※ 업비트 실거래 시장가 주문'}
            {!useLive && usePaper && '※ 모의투자 계좌 체결 (자동매매와 동일 내역 반영)'}
            {!useLive && !usePaper && '※ 설정에서 모의투자 또는 API 키를 활성화하세요'}
          </p>
        </div>
      </div>
    </div>
  );
};

export default TradeAlertModal;