import { useState } from 'react'
import { api } from '../bridge.js'
import { usePolled, fmtDate } from '../hooks.js'
import CustomerForm from './CustomerForm.jsx'

// The customer database, and the form staff fill in when someone walks in.
export default function Customers({ session }) {
  const [query, setQuery] = useState('')
  const [selected, setSelected] = useState(null)
  const { data, error, reload } = usePolled(
    () => api.customers(query, 200), 30000, [query])

  const rows = data ?? []
  const named = rows.filter(r => r.has_profile).length

  return (
    <div className="page">
      <header>
        <h2>Customers</h2>
        <p>Everyone this business has recognised. Fill in details once and they
           are known at every store.</p>
      </header>

      {error && <div className="err">{error}</div>}

      <div className="grid cols-4" style={{ marginBottom: 16 }}>
        <Stat label="Known people" value={rows.length || '—'} />
        <Stat label="With details" value={named || '—'}
              sub={rows.length ? `${Math.round(100 * named / rows.length)}% captured` : null} />
        <Stat label="Returning" value={rows.filter(r => r.visit_count > 1).length || '—'} />
        <Stat label="With consent" value={rows.filter(r => r.has_consent).length || '—'} />
      </div>

      <div className="card">
        <div style={{ display: 'flex', gap: 10, marginBottom: 12 }}>
          <input className="field" style={{ flex: 1, margin: 0, background: 'var(--ground)',
                   border: '1px solid var(--line)', borderRadius: 6, padding: '8px 10px' }}
                 placeholder="Search by name or phone"
                 value={query} onChange={e => setQuery(e.target.value)} />
          <button className="btn" onClick={reload}>Refresh</button>
        </div>

        {rows.length === 0
          ? <div className="empty">
              No customers yet. They appear here the first time a camera sees them.
            </div>
          : <div className="tablewrap">
              <table>
                <thead>
                  <tr>
                    <th>Customer</th><th>Phone</th>
                    <th className="num">Visits</th>
                    <th>First seen</th><th>Last seen</th><th>Details</th>
                  </tr>
                </thead>
                <tbody>
                  {rows.map(c => (
                    <tr key={c.id} className="click" onClick={() => setSelected(c)}>
                      <td>
                        {c.full_name || <span className="note">{c.label}</span>}
                        {/* Only beside a name a human typed: the auto label
                            already IS the number ("Visitor 13"), so showing
                            both reads as two identifiers for one person. */}
                        {c.full_name && c.ref &&
                          <span className="note"> · {c.ref}</span>}
                      </td>
                      <td className="mono">{c.phone || '—'}</td>
                      <td className="num">{c.visit_count}</td>
                      <td>{fmtDate(c.first_seen_at)}</td>
                      <td>{fmtDate(c.last_seen_at)}</td>
                      <td>
                        {c.has_profile
                          ? <span className="pill ok"><i className="dot ok" />captured</span>
                          : <span className="pill warn"><i className="dot warn" />needed</span>}
                      </td>
                    </tr>
                  ))}
                </tbody>
              </table>
            </div>}
      </div>

      {selected && (
        <CustomerForm customer={selected} session={session}
                      onClose={() => setSelected(null)}
                      onSaved={() => { setSelected(null); reload() }} />
      )}
    </div>
  )
}

function Stat({ label, value, sub }) {
  return (
    <div className="card stat">
      <h3>{label}</h3><div className="value">{value}</div>
      {sub && <div className="sub">{sub}</div>}
    </div>
  )
}