import { useEffect, useState } from 'react';
import { useParams, useNavigate, useOutletContext } from 'react-router-dom';
import { api } from '../api/client';
import Header from '../components/Layout/Header';
import { formatDateTime, formatDuration } from '../utils/date';

export default function SignalDetailPage() {
  const { id } = useParams();
  const navigate = useNavigate();
  const { user, setMobileOpen } = useOutletContext();
  const [signal, setSignal] = useState(null);

  useEffect(() => {
    api.get(`/signals/${id}`).then(({ data }) => setSignal(data)).catch(() => navigate('/signals/active'));
  }, [id, navigate]);

  if (!signal) return <div className="text-center py-20 text-gray-500">در حال بارگذاری...</div>;

  const isBuy = signal.type === 'BUY';
  const isProfit = signal.result === 'profit';

  return (
    <div>
      <Header title="جزئیات سیگنال" user={user} onMenuClick={() => setMobileOpen?.(true)} />

      <button onClick={() => navigate(-1)} className="btn-outline mb-6">
        ← بازگشت
      </button>

      <div className="card mb-6">
        <div className="flex flex-wrap items-start justify-between gap-4 mb-6">
          <div>
            <p className="text-gray-500 text-sm">شناسه سیگنال</p>
            <h2 className="text-3xl font-bold">#{signal.id}</h2>
            <p className="text-lg mt-2">{signal.pair}</p>
            <p className="text-gray-500">{signal.pairName}</p>
          </div>
          <div className={`text-3xl font-black ${isBuy ? 'text-emerald-400' : 'text-red-400'}`}>
            {isBuy ? '↑ BUY' : '↓ SELL'}
          </div>
        </div>

        <div className="grid grid-cols-1 sm:grid-cols-3 gap-4">
          <div className="bg-navy-900 rounded-xl p-4">
            <p className="text-gray-500 text-sm">نوع</p>
            <p className="font-bold mt-1">{signal.type}</p>
          </div>
          <div className="bg-navy-900 rounded-xl p-4">
            <p className="text-gray-500 text-sm">وضعیت</p>
            <p className="font-bold mt-1">{signal.status === 'active' ? 'فعال' : 'بسته شده'}</p>
          </div>
          {signal.result && (
            <div className="bg-navy-900 rounded-xl p-4">
              <p className="text-gray-500 text-sm">نتیجه</p>
              <p className={`font-bold mt-1 ${isProfit ? 'text-emerald-400' : 'text-red-400'}`}>
                {isProfit ? 'سود' : 'ضرر'}
              </p>
            </div>
          )}
        </div>
      </div>

      <div className="grid grid-cols-1 sm:grid-cols-3 gap-4 mb-6">
        <div className="card">
          <p className="text-gray-500 text-sm mb-1">📅 زمان ارسال</p>
          <p className="font-medium">{formatDateTime(signal.sentAt)}</p>
        </div>
        {signal.closedAt && (
          <div className="card">
            <p className="text-gray-500 text-sm mb-1">📅 زمان بسته شدن</p>
            <p className="font-medium">{formatDateTime(signal.closedAt)}</p>
          </div>
        )}
        {signal.closedAt && (
          <div className="card">
            <p className="text-gray-500 text-sm mb-1">⏱ مدت معامله</p>
            <p className="font-medium">{formatDuration(signal.sentAt, signal.closedAt)}</p>
          </div>
        )}
      </div>

      <div className="card bg-navy-900/50 text-sm text-gray-500">
        قیمت ورود، خروج و سطوح TP/SL در این نما به کاربر نمایش داده نمی‌شود.
      </div>
    </div>
  );
}
