import React, { useMemo, useState } from 'react';
import { useTradeNotification } from '../../contexts/TradeNotificationContext';
import { useNavigation } from '../../contexts/NavigationContext';
import { useAuth } from '../../contexts/AuthContext';
import { useVirtualTradingCore } from '@frontend/hooks/useVirtualTradingCore';
import NotificationListRow from './NotificationListRow';
import NotificationDetailScreen from './NotificationDetailScreen';
import VirtualTradeScreen from '../virtual/VirtualTradeScreen';

export default function NotificationsScreen() {
  const {
    notifyNav,
    goNotifyList,
    goNotifyDetail,
    goNotifyTrade,
    goVirtualDetail,
  } = useNavigation();
  const { sessionKey } = useAuth();
  const {
    allNotifications,
    unreadCount,
    markAsRead,
    markAllAsRead,
    deleteNotification,
    deleteAllNotifications,
    refreshHistory,
  } = useTradeNotification();
  const { summary, refreshPaperData } = useVirtualTradingCore({ settingsSessionKey: sessionKey });

  const [refreshing, setRefreshing] = useState(false);

  const selectedItem = useMemo(
    () => allNotifications.find(n => n.id === notifyNav.notifyId) ?? null,
    [allNotifications, notifyNav.notifyId],
  );

  const onRefresh = async () => {
    setRefreshing(true);
    await refreshHistory();
    setRefreshing(false);
  };

  if (notifyNav.view === 'detail' && selectedItem) {
    return (
      <NotificationDetailScreen
        item={selectedItem}
        onBack={() => {
          markAsRead(selectedItem.id);
          goNotifyList();
        }}
        onTrade={side => goNotifyTrade(selectedItem.market, side)}
        onGoVirtual={() => {
          markAsRead(selectedItem.id);
          goVirtualDetail(selectedItem.market);
        }}
      />
    );
  }

  if (notifyNav.view === 'trade' && notifyNav.market && notifyNav.tradeSide) {
    return (
      <VirtualTradeScreen
        market={notifyNav.market}
        side={notifyNav.tradeSide}
        summary={summary}
        onBack={goNotifyList}
        onOrderDone={refreshPaperData}
      />
    );
  }

  return (
    <div className="screen">
      <header className="screen-header">
        <h1 className="screen-title">알림 {unreadCount > 0 && `(${unreadCount})`}</h1>
        <div style={{ display: 'flex', gap: 8 }}>
          <button type="button" className="chip" onClick={() => void onRefresh()}>{refreshing ? '…' : '↻'}</button>
          <button type="button" className="chip" onClick={markAllAsRead}>읽음</button>
        </div>
      </header>

      {allNotifications.length === 0 ? (
        <div className="empty-state">
          <h3>알림 없음</h3>
          <p>전략 조건 충족 시 알림이 표시됩니다</p>
        </div>
      ) : (
        <div className="stack-list" style={{ padding: '0 16px' }}>
          {allNotifications.map(item => (
            <NotificationListRow
              key={item.id}
              item={item}
              onDetail={() => {
                markAsRead(item.id);
                goNotifyDetail(item.id, item.market);
              }}
              onTrade={side => {
                markAsRead(item.id);
                goNotifyTrade(item.market, side);
              }}
              onDelete={() => void deleteNotification(item.id)}
            />
          ))}
        </div>
      )}

      {allNotifications.length > 0 && (
        <div style={{ padding: 16, textAlign: 'center' }}>
          <button type="button" className="btn-danger" onClick={() => void deleteAllNotifications()}>전체 삭제</button>
        </div>
      )}
    </div>
  );
}