// frontend/src/pages/settings/automations/AutomationsPage.jsx
//
// Automations — background task runner for scheduled CRM/system jobs.
// Each automation has: a name, description, toggle (enabled/disabled),
// configurable interval, last-run timestamp, last-run result, and a
// "Run now" manual trigger.
//
// This page is a PLACEHOLDER. The full system will be built in a later pass.

import PageHeader from '@/components/ui/PageHeader'
import Card       from '@/components/ui/Card'
import Icon       from '@/components/ui/Icon'

export default function AutomationsPage() {
  return (
    <div className="page-wrapper">
      <PageHeader
        title="Automations"
        subtitle="Scheduled background tasks that keep your data up to date"
      />

      <Card>
        <div style={{
          display:        'flex',
          flexDirection:  'column',
          alignItems:     'center',
          justifyContent: 'center',
          gap:            'var(--space-4)',
          padding:        'var(--space-12) var(--space-6)',
          textAlign:      'center',
        }}>
          <div style={{
            width:           56,
            height:          56,
            borderRadius:    'var(--radius-xl)',
            backgroundColor: 'var(--color-bg-elevated)',
            display:         'flex',
            alignItems:      'center',
            justifyContent:  'center',
            flexShrink:      0,
          }}>
            <Icon name="settings" size={24} color="var(--color-text-muted)" />
          </div>

          <div>
            <p style={{
              fontSize:   'var(--font-size-md)',
              fontWeight: 'var(--font-weight-semibold)',
              color:      'var(--color-text-primary)',
              marginBottom: 'var(--space-2)',
            }}>
              Automations — Coming Soon
            </p>
            <p style={{
              fontSize:  'var(--font-size-sm)',
              color:     'var(--color-text-muted)',
              maxWidth:  480,
              lineHeight: 1.6,
            }}>
              This page will let you manage all background automations in one place —
              with toggles, run intervals, manual triggers, and a log of each run.
            </p>
          </div>

          <div style={{
            marginTop:       'var(--space-4)',
            padding:         'var(--space-4) var(--space-6)',
            borderRadius:    'var(--radius-lg)',
            backgroundColor: 'var(--color-bg-elevated)',
            border:          '1px solid var(--color-border)',
            maxWidth:        520,
            width:           '100%',
          }}>
            <p style={{
              fontSize:     'var(--font-size-xs)',
              fontWeight:   'var(--font-weight-semibold)',
              color:        'var(--color-text-muted)',
              textTransform: 'uppercase',
              letterSpacing: 'var(--tracking-wide)',
              marginBottom:  'var(--space-3)',
            }}>
              Planned automations
            </p>
            <div style={{ display: 'flex', flexDirection: 'column', gap: 'var(--space-2)' }}>
              {[
                'Auto-set customers to Archived when all orders are complete',
                'Auto-set customers to Went Cold after X months of silence',
                'Auto-flip Archived customers back to Active when a new order opens',
                'Periodic CRM data integrity checks',
              ].map((item) => (
                <div key={item} style={{ display: 'flex', alignItems: 'flex-start', gap: 'var(--space-2)' }}>
                  <span style={{
                    width:           6,
                    height:          6,
                    borderRadius:    '50%',
                    backgroundColor: 'var(--color-text-muted)',
                    flexShrink:      0,
                    marginTop:       6,
                  }} />
                  <span style={{ fontSize: 'var(--font-size-sm)', color: 'var(--color-text-secondary)', textAlign: 'left' }}>
                    {item}
                  </span>
                </div>
              ))}
            </div>
          </div>
        </div>
      </Card>
    </div>
  )
}