import { useState } from 'react';
import { Users, ChevronDown, ChevronRight, BookUser } from 'lucide-react';
import { useClients } from './useClients';

const statusColor = (status) => {
  switch (status) {
    case 'закрыт': return '#22c55e';
    case 'монтаж': return '#3b82f6';
    case 'новая': return 'var(--text-muted)';
    default: return 'var(--text-muted)';
  }
};

const formatMoney = (value) => {
  if (!value) return '—';
  const num = Number(value);
  if (!num) return '—';
  return num.toLocaleString('ru-RU') + ' ₽';
};

const formatDate = (date) => {
  if (!date) return '—';
  return new Date(date).toLocaleDateString('ru-RU');
};

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

const tdStyle = {
  padding: '12px 14px',
  fontSize: '0.88rem',
  color: 'var(--text-main)',
  borderBottom: '1px solid rgba(255,255,255,0.04)',
  verticalAlign: 'middle',
};

const innerThStyle = {
  padding: '8px 12px',
  textAlign: 'left',
  fontSize: '0.70rem',
  fontWeight: 700,
  color: 'var(--text-muted)',
  textTransform: 'uppercase',
  letterSpacing: '0.4px',
  borderBottom: '1px solid rgba(255,255,255,0.06)',
  whiteSpace: 'nowrap',
};

const innerTdStyle = {
  padding: '9px 12px',
  fontSize: '0.83rem',
  color: 'var(--text-main)',
  borderBottom: '1px solid rgba(255,255,255,0.03)',
  verticalAlign: 'middle',
};

const ClientsPage = () => {
  const { clients, loading, error } = useClients();
  const [expandedPhone, setExpandedPhone] = useState(null);

  const toggleExpand = (phone) => {
    setExpandedPhone((prev) => (prev === phone ? null : phone));
  };

  if (loading) {
    return <div style={{ padding: '30px', color: 'var(--text-muted)' }}>Загрузка...</div>;
  }

  if (error) {
    return <div style={{ padding: '30px', color: '#ef4444' }}>Ошибка: {error}</div>;
  }

  const totalClients = clients.length;
  const totalRevenue = clients.reduce((sum, c) => sum + c.totalSpent, 0);

  return (
    <div style={{ padding: '30px', maxWidth: '1000px' }}>
      {/* Page header */}
      <h1 style={{
        fontFamily: 'var(--font-heading)',
        fontSize: '1.5rem',
        fontWeight: 800,
        marginBottom: '24px',
        display: 'flex',
        alignItems: 'center',
        gap: '10px',
      }}>
        <Users size={22} color="var(--accent-blue)" />
        Клиенты
      </h1>

      {/* Summary cards */}
      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '16px', marginBottom: '28px', maxWidth: '480px' }}>
        <div className="glass-panel" style={{ padding: '20px 24px' }}>
          <p style={{ fontSize: '0.72rem', fontWeight: 700, color: 'var(--text-muted)', textTransform: 'uppercase', letterSpacing: '0.4px', marginBottom: '6px' }}>
            Всего клиентов
          </p>
          <p style={{ fontSize: '1.8rem', fontWeight: 800, fontFamily: 'var(--font-heading)', color: 'var(--text-main)' }}>
            {totalClients}
          </p>
        </div>
        <div className="glass-panel" style={{ padding: '20px 24px' }}>
          <p style={{ fontSize: '0.72rem', fontWeight: 700, color: 'var(--text-muted)', textTransform: 'uppercase', letterSpacing: '0.4px', marginBottom: '6px' }}>
            Выручка (закрытые)
          </p>
          <p style={{ fontSize: '1.8rem', fontWeight: 800, fontFamily: 'var(--font-heading)', color: 'var(--accent-blue)' }}>
            {totalRevenue ? totalRevenue.toLocaleString('ru-RU') + ' ₽' : '—'}
          </p>
        </div>
      </div>

      {/* Clients table */}
      <div className="glass-panel" style={{ padding: 0, overflow: 'hidden' }}>
        {clients.length === 0 ? (
          <p style={{ padding: '30px', color: 'var(--text-muted)', textAlign: 'center' }}>Нет клиентов</p>
        ) : (
          <div style={{ overflowX: 'auto', WebkitOverflowScrolling: 'touch' }}>
          <table style={{ width: '100%', borderCollapse: 'collapse', minWidth: '600px' }}>
            <thead>
              <tr>
                <th style={{ ...thStyle, width: '32px', padding: '10px 8px 10px 16px' }}></th>
                <th style={thStyle}>Клиент</th>
                <th style={thStyle}>Телефон</th>
                <th style={{ ...thStyle, textAlign: 'right' }}>Заказов</th>
                <th style={{ ...thStyle, textAlign: 'right' }}>Потрачено</th>
                <th style={{ ...thStyle, textAlign: 'right' }}>Последний заказ</th>
              </tr>
            </thead>
            <tbody>
              {clients.map((client) => {
                const isExpanded = expandedPhone === client.phone;
                const lastOrder = client.orders[0];
                return (
                  <>
                    <tr
                      key={client.phone}
                      onClick={() => toggleExpand(client.phone)}
                      style={{
                        cursor: 'pointer',
                        background: isExpanded ? 'rgba(14, 165, 233, 0.06)' : 'transparent',
                        transition: 'background 0.15s',
                      }}
                      onMouseEnter={(e) => {
                        if (!isExpanded) e.currentTarget.style.background = 'rgba(255,255,255,0.03)';
                      }}
                      onMouseLeave={(e) => {
                        if (!isExpanded) e.currentTarget.style.background = 'transparent';
                      }}
                    >
                      <td style={{ ...tdStyle, padding: '12px 8px 12px 16px', color: 'var(--text-muted)' }}>
                        {isExpanded
                          ? <ChevronDown size={15} />
                          : <ChevronRight size={15} />}
                      </td>
                      <td style={tdStyle}>
                        <span style={{ fontWeight: 600 }}>{client.name || '—'}</span>
                      </td>
                      <td style={{ ...tdStyle, fontFamily: 'var(--font-body)', color: 'var(--text-muted)' }}>
                        {client.phone !== 'unknown' ? client.phone : '—'}
                      </td>
                      <td style={{ ...tdStyle, textAlign: 'right' }}>
                        {client.orders.length}
                      </td>
                      <td style={{ ...tdStyle, textAlign: 'right', fontWeight: client.totalSpent ? 600 : 400 }}>
                        {client.totalSpent ? client.totalSpent.toLocaleString('ru-RU') + ' ₽' : '—'}
                      </td>
                      <td style={{ ...tdStyle, textAlign: 'right', color: 'var(--text-muted)', fontSize: '0.83rem' }}>
                        {lastOrder ? formatDate(lastOrder.created_at) : '—'}
                      </td>
                    </tr>

                    {/* Expanded order history */}
                    {isExpanded && (
                      <tr key={client.phone + '-expanded'}>
                        <td colSpan={6} style={{ padding: '0 0 0 48px', background: 'rgba(14, 165, 233, 0.04)' }}>
                          <table style={{ width: '100%', borderCollapse: 'collapse', borderLeft: '2px solid rgba(14, 165, 233, 0.25)' }}>
                            <thead>
                              <tr>
                                <th style={innerThStyle}>Дата</th>
                                <th style={innerThStyle}>Плёнка</th>
                                <th style={{ ...innerThStyle, textAlign: 'right' }}>Площадь (м²)</th>
                                <th style={{ ...innerThStyle, textAlign: 'right' }}>Сумма</th>
                                <th style={innerThStyle}>Статус</th>
                              </tr>
                            </thead>
                            <tbody>
                              {client.orders.map((order) => (
                                <tr key={order.id}>
                                  <td style={{ ...innerTdStyle, color: 'var(--text-muted)', fontSize: '0.80rem' }}>
                                    {formatDate(order.created_at)}
                                  </td>
                                  <td style={innerTdStyle}>
                                    {order.film_thickness ? order.film_thickness + ' мкм' : '—'}
                                  </td>
                                  <td style={{ ...innerTdStyle, textAlign: 'right' }}>
                                    {order.area_sqm ?? '—'}
                                  </td>
                                  <td style={{ ...innerTdStyle, textAlign: 'right', fontWeight: order.final_cost ? 600 : 400 }}>
                                    {formatMoney(order.final_cost)}
                                  </td>
                                  <td style={innerTdStyle}>
                                    <span style={{
                                      display: 'inline-block',
                                      padding: '2px 8px',
                                      borderRadius: '4px',
                                      fontSize: '0.75rem',
                                      fontWeight: 700,
                                      color: statusColor(order.status),
                                      background: statusColor(order.status) + '22',
                                    }}>
                                      {order.status || '—'}
                                    </span>
                                  </td>
                                </tr>
                              ))}
                            </tbody>
                          </table>
                        </td>
                      </tr>
                    )}
                  </>
                );
              })}
            </tbody>
          </table>
          </div>
        )}
      </div>
    </div>
  );
};

export default ClientsPage;
