import { Phone, PhoneIncoming, ChevronRight, Wifi, WifiOff } from 'lucide-react'
import usePhoneStore from '../store/phoneStore'

function formatTime(date) {
  return date.toLocaleTimeString('el-GR', { hour: '2-digit', minute: '2-digit' })
}

export default function PhonePage() {
  const { log, setActiveCall } = usePhoneStore()

  return (
    <div style={{ padding: 32, fontFamily: "'DM Sans','Segoe UI',sans-serif", maxWidth: 680, margin: '0 auto' }}>

      <div style={{ display: 'flex', alignItems: 'center', gap: 12, marginBottom: 28 }}>
        <div style={{
          width: 40, height: 40, borderRadius: 10,
          background: 'linear-gradient(135deg,#064e3b,#065f46)',
          border: '1px solid rgba(52,211,153,0.2)',
          display: 'flex', alignItems: 'center', justifyContent: 'center',
        }}>
          <Phone size={18} color="#34d399" />
        </div>
        <div>
          <h1 style={{ fontSize: 16, fontWeight: 700, color: '#0f172a', margin: 0, letterSpacing: '-0.01em' }}>
            Εισερχόμενες Κλήσεις
          </h1>
          <p style={{ fontSize: 12, color: '#94a3b8', margin: '2px 0 0' }}>Grandstream UCM · Caller ID</p>
        </div>
      </div>

      <div style={{ background: '#fff', border: '1px solid #e2e8f0', borderRadius: 16, overflow: 'hidden' }}>
        <div style={{
          padding: '12px 16px', borderBottom: '1px solid #f1f5f9',
          display: 'flex', alignItems: 'center', justifyContent: 'space-between',
        }}>
          <span style={{ fontSize: 11, fontWeight: 600, color: '#94a3b8', textTransform: 'uppercase', letterSpacing: '0.08em' }}>
            Πρόσφατες Κλήσεις
          </span>
          {log.length > 0 && (
            <span style={{ fontSize: 11, color: '#cbd5e1' }}>{log.length} κλήσεις</span>
          )}
        </div>

        {log.length === 0 ? (
          <div style={{ padding: '48px 16px', textAlign: 'center', color: '#cbd5e1', fontSize: 13 }}>
            Δεν έχουν ληφθεί κλήσεις ακόμα.
          </div>
        ) : (
          <ul style={{ listStyle: 'none', margin: 0, padding: 0 }}>
            {log.map((entry, i) => (
              <li
                key={i}
                onClick={() => setActiveCall(entry)}
                style={{
                  display: 'flex', alignItems: 'center', gap: 12,
                  padding: '12px 16px',
                  borderBottom: i < log.length - 1 ? '1px solid #f8fafc' : 'none',
                  cursor: 'pointer', transition: 'background 0.1s',
                }}
                onMouseEnter={e => { e.currentTarget.style.background = '#f8fafc' }}
                onMouseLeave={e => { e.currentTarget.style.background = 'transparent' }}
              >
                <div style={{
                  width: 34, height: 34, borderRadius: 10, flexShrink: 0,
                  background: entry.customer ? '#fef3c7' : '#f1f5f9',
                  display: 'flex', alignItems: 'center', justifyContent: 'center',
                }}>
                  {entry.customer
                    ? <span style={{ fontSize: 14, fontWeight: 700, color: '#d97706' }}>
                        {entry.customer.name?.[0]?.toUpperCase()}
                      </span>
                    : <PhoneIncoming size={14} color="#94a3b8" />
                  }
                </div>
                <div style={{ flex: 1, minWidth: 0 }}>
                  <div style={{ fontSize: 13, fontWeight: 600, color: '#1e293b' }}>
                    {entry.customer ? entry.customer.name : entry.caller || '—'}
                  </div>
                  <div style={{ fontSize: 11, color: '#94a3b8', marginTop: 1 }}>
                    {entry.customer ? entry.caller : 'Άγνωστος'}
                  </div>
                </div>
                <div style={{ display: 'flex', alignItems: 'center', gap: 6 }}>
                  <span style={{ fontSize: 11, color: '#cbd5e1', fontVariantNumeric: 'tabular-nums' }}>
                    {formatTime(entry.at)}
                  </span>
                  <ChevronRight size={12} color="#cbd5e1" />
                </div>
              </li>
            ))}
          </ul>
        )}
      </div>
    </div>
  )
}
