import PublicLayout from '../../components/PublicLayout.jsx'
import PageHeader from '../../components/PageHeader.jsx'
import { Loading, ErrorState } from '../../components/PageState.jsx'
import { useAsync } from '../../lib/useAsync.js'
import { api } from '../../api/client.js'

export default function Status() {
  const { loading, error, data } = useAsync(() => api.status())
  const mode = data?.mode || 'live'
  const statusMessage = data?.status_message || ''
  const isLive = mode === 'live'

  const stats = [
    { value: isLive ? 'Live' : 'Maint.', label: 'Site mode' },
    { value: isLive ? 'Open' : 'Closed', label: 'Public login' },
    { value: statusMessage || '—', label: 'Latest note' },
  ]

  return (
    <PublicLayout section="website">
      <div className="shell-narrow page-body">
        <PageHeader eyebrow="Live" title="Shard Status" />

        {loading && <Loading />}
        {error && <ErrorState message="Could not load status right now." />}

        {!loading && !error && (
          <>
            <section
              style={{
                display: 'flex',
                alignItems: 'center',
                gap: 16,
                padding: '24px 26px',
                border: `1px solid ${isLive ? 'rgba(95,185,138,0.45)' : '#5a4a2a'}`,
                borderRadius: 10,
                background: isLive
                  ? 'linear-gradient(180deg,rgba(22,46,34,0.5),rgba(16,26,20,0.4))'
                  : 'linear-gradient(180deg,rgba(58,46,22,0.5),rgba(30,26,16,0.4))',
                marginBottom: 24,
              }}
            >
              <span
                style={{
                  flex: 'none',
                  width: 12,
                  height: 12,
                  borderRadius: '50%',
                  background: isLive ? 'var(--mode-live)' : 'var(--mode-maint)',
                  boxShadow: `0 0 12px ${isLive ? 'rgba(95,185,138,0.7)' : 'rgba(230,194,106,0.7)'}`,
                }}
              />
              <div>
                <strong
                  className="display"
                  style={{ display: 'block', fontSize: '1.2rem', color: isLive ? '#bfe6cf' : '#f0e3c4' }}
                >
                  {isLive ? 'Live — the gates are open' : 'Maintenance — building in progress'}
                </strong>
                <span style={{ color: isLive ? '#a9cdb8' : '#cdbf9a', fontSize: '0.98rem' }}>
                  {statusMessage || (isLive ? 'The shard is online.' : 'The gates are closed while we shape the world. Public login is not open yet.')}
                </span>
              </div>
            </section>

            <section className="grid-3" style={{ gap: 14, marginBottom: 30 }}>
              {stats.map((s) => (
                <div key={s.label} className="panel" style={{ padding: 20, textAlign: 'center' }}>
                  <div className="display" style={{ fontSize: '1.6rem', color: 'var(--head)' }}>
                    {s.value}
                  </div>
                  <div
                    className="sans"
                    style={{ color: 'var(--accent)', fontSize: '0.7rem', letterSpacing: '0.12em', textTransform: 'uppercase', marginTop: 6 }}
                  >
                    {s.label}
                  </div>
                </div>
              ))}
            </section>
          </>
        )}
      </div>
    </PublicLayout>
  )
}