commitea/apps/desktop/src/renderer/src/components/screens/focus-screen.tsx

import React from 'react'

import { FOCUS, type FocusIssue, type IssueRef, TODAY } from '../../data/fixtures.js'
import { BurnUpCone } from '../charts/chart.js'
import { Badge, Button, Card, IconButton, Tag } from '../ui/index.js'

/**
 * Morning service — the Now/Next/Later focus cards + the milestone burn-up cone.
 * Data is fixture (data.js) until P2's scheduler + Monte Carlo feed it.
 */
export function FocusScreen({ onOpenIssue }: { onOpenIssue: (issue: IssueRef) => void }) {
  const FocusRow = ({ slot, issue, jade }: { slot: string; issue: FocusIssue; jade?: boolean }) => (
    <Card
      overline={slot}
      jade={jade}
      title={
        <a
          href="#"
          onClick={(e) => {
            e.preventDefault()
            onOpenIssue({ id: issue.id, title: issue.title, labels: issue.labels })
          }}
          style={{ color: 'inherit', border: 'none' }}
        >
          {issue.title}
        </a>
      }
      actions={<IconButton icon="ellipsis" label="More" size="sm" />}
      footer={
        jade ? (
          <>
            <Button size="sm">Start</Button>
            <Button size="sm" variant="ghost">
              Defer
            </Button>
            <span style={{ marginLeft: 'auto', font: 'var(--text-caption)', color: 'var(--ink-3)' }}>
              scheduler pick · critical path
            </span>
          </>
        ) : null
      }
    >
      <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 10, flexWrap: 'wrap' }}>
        <span style={{ font: 'var(--text-data)', color: 'var(--ink-3)' }}>#{issue.id}</span>
        {issue.labels.map((l) => (
          <Tag key={l} label={l} />
        ))}
        {issue.steeping ? (
          <Badge tone="warn" dot>
            steeping {issue.steeping}
          </Badge>
        ) : null}
      </div>
      <p style={{ font: 'var(--text-agent)', color: 'var(--ink-2)', margin: 0 }}>{issue.rationale}</p>
    </Card>
  )

  return (
    <div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
      <header
        style={{
          borderBottom: 'var(--rule-double)',
          paddingBottom: 14,
          display: 'flex',
          alignItems: 'baseline',
          justifyContent: 'space-between',
          gap: 12,
        }}
      >
        <div>
          <h1 style={{ font: 'var(--text-display)', color: 'var(--ink-1)', margin: 0 }}>Morning service</h1>
          <p style={{ font: 'var(--text-data)', color: 'var(--ink-3)', margin: '6px 0 0', whiteSpace: 'nowrap' }}>
            {TODAY} · reconcile 3.2s
          </p>
        </div>
        <Badge tone="ok" dot>
          ahead of forecast
        </Badge>
      </header>

      <div style={{ display: 'grid', gridTemplateColumns: '1.4fr 1fr 1fr', gap: 14, alignItems: 'start' }}>
        <FocusRow slot="Now" issue={FOCUS.now} jade />
        <FocusRow slot="Next" issue={FOCUS.next} />
        <FocusRow slot="Later" issue={FOCUS.later} />
      </div>

      <Card
        overline="Milestone · Beta"
        title={<>80% this lands <span style={{ whiteSpace: 'nowrap' }}>Mar 3–12</span></>}
        actions={<IconButton icon="chart-line" label="Open runway" size="sm" />}
      >
        <BurnUpCone />
        <p style={{ font: 'var(--text-agent)', color: 'var(--ink-2)', margin: '10px 0 0' }}>
          The cone has narrowed since Friday. I’m quietly pleased.
        </p>
      </Card>
    </div>
  )
}