import { useState } from 'react';
import { Archive, RotateCcw } from 'lucide-react';
import { useArchive } from './useArchive';
import OrderModal from '../orders/OrderModal';

const thStyle = {
  padding: '10px 14px', textAlign: 'left',
  fontSize: '0.72rem', fontWeight: 700, color: 'var(--text-muted)',
  textTransform: 'uppercase', letterSpacing: '0.4px',
  borderBottom: '1.5px solid var(--border-light)',
  fontFamily: 'var(--font-heading)',
};

const tdStyle = {
  padding: '12px 14px', fontSize: '0.88rem', color: 'var(--text-main)',
  borderBottom: '1px solid var(--border-light)', fontFamily: 'var(--font-body)',
};

const formatDate = (s) => {
  if (!s) return '—';
  const d = new Date(s);
  return isNaN(d) ? '—' : d.toLocaleDateString('ru-RU');
};

const ArchivePage = () => {
  const { orders, loading, restoreOrder } = useArchive();
  const [selectedOrder, setSelectedOrder] = useState(null);
  const [restoringId, setRestoringId] = useState(null);

  const handleRestore = async (e, order) => {
    e.stopPropagation();
    setRestoringId(order.id);
    await restoreOrder(order.id);
    setRestoringId(null);
  };

  return (
    <div style={{ padding: '30px', maxWidth: '900px' }}>
      <h1 style={{
        fontFamily: 'var(--font-heading)', fontSize: '1.5rem', fontWeight: 800,
        marginBottom: '8px', display: 'flex', alignItems: 'center', gap: '10px',
      }}>
        <Archive size={22} color="var(--accent-blue)" />
        Архив
      </h1>
      <p style={{ color: 'var(--text-muted)', fontSize: '0.85rem', marginBottom: '24px' }}>
        Закрытые заявки старше 30 дней. Нажмите на строку для просмотра, или восстановите в статус «новая».
      </p>

      <div className="glass-panel" style={{ padding: '0', overflow: 'hidden' }}>
        {loading ? (
          <div style={{ padding: '32px', textAlign: 'center', color: 'var(--text-muted)', fontSize: '0.9rem' }}>
            Загрузка...
          </div>
        ) : orders.length === 0 ? (
          <div style={{ padding: '32px', textAlign: 'center', color: 'var(--text-muted)', fontSize: '0.9rem' }}>
            Архив пуст — нет закрытых заявок старше 30 дней
          </div>
        ) : (
          <div style={{ overflowX: 'auto' }}>
            <table style={{ width: '100%', borderCollapse: 'collapse', minWidth: '600px' }}>
              <thead>
                <tr>
                  <th style={thStyle}>Клиент</th>
                  <th style={thStyle}>Телефон</th>
                  <th style={thStyle}>Сумма</th>
                  <th style={thStyle}>Закрыта</th>
                  <th style={thStyle}>Менеджер</th>
                  <th style={{ ...thStyle, textAlign: 'right' }}></th>
                </tr>
              </thead>
              <tbody>
                {orders.map((o) => (
                  <tr
                    key={o.id}
                    onClick={() => setSelectedOrder(o)}
                    style={{ cursor: 'pointer', transition: 'background 0.1s' }}
                    onMouseEnter={(e) => e.currentTarget.style.background = '#F5F7FA'}
                    onMouseLeave={(e) => e.currentTarget.style.background = ''}
                  >
                    <td style={tdStyle}>{o.name}</td>
                    <td style={tdStyle}>{o.phone || '—'}</td>
                    <td style={{ ...tdStyle, fontWeight: 700, color: 'var(--accent-blue)' }}>
                      {o.final_cost ? `${Number(o.final_cost).toLocaleString('ru-RU')} ₽` : '—'}
                    </td>
                    <td style={tdStyle}>{formatDate(o.closed_at || o.created_at)}</td>
                    <td style={{ ...tdStyle, color: 'var(--text-muted)' }}>{o.assigned_to || '—'}</td>
                    <td style={{ ...tdStyle, textAlign: 'right' }}>
                      <button
                        onClick={(e) => handleRestore(e, o)}
                        disabled={restoringId === o.id}
                        title="Вернуть в работу"
                        style={{
                          background: 'none', border: '1.5px solid #E9ECEF',
                          borderRadius: '6px', padding: '5px 10px',
                          cursor: 'pointer', color: 'var(--text-muted)',
                          display: 'inline-flex', alignItems: 'center', gap: '5px',
                          fontSize: '0.75rem', fontFamily: 'var(--font-heading)',
                          opacity: restoringId === o.id ? 0.5 : 1,
                        }}
                        onMouseEnter={(e) => e.currentTarget.style.borderColor = '#4361EE'}
                        onMouseLeave={(e) => e.currentTarget.style.borderColor = '#E9ECEF'}
                      >
                        <RotateCcw size={12} />
                        Восстановить
                      </button>
                    </td>
                  </tr>
                ))}
              </tbody>
            </table>
          </div>
        )}
      </div>

      {selectedOrder && (
        <OrderModal
          order={selectedOrder}
          mode="edit"
          onClose={() => setSelectedOrder(null)}
          onSaved={() => setSelectedOrder(null)}
        />
      )}
    </div>
  );
};

export default ArchivePage;
