import React from 'react'

import { type IssueRef, STANDUP } from '../../data/fixtures.js'
import { Badge, Button, Icon } from '../ui/index.js'

const standupCSS = `
@keyframes ct-standup-settle {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: none; }
}
.ct-standup-section { opacity: 1; }
@media (prefers-reduced-motion: no-preference) {
  .ct-standup-section { animation: ct-standup-settle 320ms var(--ease-out) both; }
}
`
;(function inject() {
  if (typeof document !== 'undefined' && !document.getElementById('ct-standup-css')) {
    const s = document.createElement('style')
    s.id = 'ct-standup-css'
    s.textContent = standupCSS
    document.head.appendChild(s)
  }
})()

const toneColor: Record<string, string> = {
  ok: 'var(--ok)',
  warn: 'var(--warn)',
  danger: 'var(--danger)',
}

/**
 * Morning standup — a typeset letter from Reginald: overnight drift, today's
 * plan, stale-blocker nag. Sections settle in once, reduced-motion-safe. Data
 * is fixture (data.js) until the scheduler + lifecycle inference feed it.
 */
export function StandupScreen({
  onBegin,
  onOpenIssue,
}: {
  onBegin: () => void
  onOpenIssue: (issue: IssueRef) => void
}) {
  const s = STANDUP
  const NAG_REF: IssueRef = {
    id: s.nag.id,
    title: 'Fix lifecycle inference on merge events',
    labels: ['est/2d', 'p/1'],
    days: s.nag.days,
  }

  const Section = ({ overline, order, children }: { overline: string; order: number; children: React.ReactNode }) => (
    <section
      className="ct-standup-section"
      style={{ animationDelay: `${order * 90}ms`, display: 'flex', flexDirection: 'column', gap: 12 }}
    >
      <p
        style={{
          font: 'var(--text-overline)',
          letterSpacing: 'var(--letter-spacing-wide)',
          textTransform: 'uppercase',
          color: 'var(--ink-3)',
          margin: 0,
          borderTop: '1px solid var(--line-1)',
          paddingTop: 14,
        }}
      >
        {overline}
      </p>
      {children}
    </section>
  )

  return (
    <div style={{ maxWidth: 660, margin: '0 auto' }}>
      <article
        style={{
          background: 'var(--surface-card)',
          border: '1px solid var(--line-1)',
          borderRadius: 'var(--radius-3)',
          boxShadow: 'var(--shadow-jade-line), var(--shadow-1)',
          padding: '36px 44px 32px',
          display: 'flex',
          flexDirection: 'column',
          gap: 20,
        }}
      >
        <header className="ct-standup-section" style={{ borderBottom: 'var(--rule-double)', paddingBottom: 16 }}>
          <p style={{ font: 'var(--text-data)', color: 'var(--ink-3)', margin: '0 0 8px' }}>{s.date} · prepared 07:00</p>
          <h1 style={{ font: 'var(--text-display)', color: 'var(--ink-1)', margin: 0 }}>Morning standup</h1>
        </header>

        <Section overline="Overnight drift" order={1}>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
            {s.drift.map((d) => (
              <div key={d.text} style={{ display: 'flex', alignItems: 'baseline', gap: 10 }}>
                <span
                  style={{
                    width: 7,
                    height: 7,
                    borderRadius: '50%',
                    background: toneColor[d.tone],
                    flexShrink: 0,
                    position: 'relative',
                    top: -1,
                  }}
                />
                <span style={{ font: 'var(--text-body)', color: 'var(--ink-1)', flex: 1 }}>{d.text}</span>
                <span style={{ font: '400 11.5px var(--font-mono)', color: 'var(--ink-3)', whiteSpace: 'nowrap' }}>
                  {d.delta}
                </span>
              </div>
            ))}
          </div>
        </Section>

        <Section overline="Today's plan" order={2}>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
            {s.plan.map((p) => (
              <div key={p.who} style={{ display: 'flex', gap: 12, alignItems: 'flex-start' }}>
                <span
                  style={{
                    width: 26,
                    height: 26,
                    borderRadius: '50%',
                    background: 'var(--spruce-2)',
                    color: 'var(--accent-text)',
                    font: '600 10px/26px var(--font-sans)',
                    textAlign: 'center',
                    flexShrink: 0,
                  }}
                >
                  {p.who
                    .split(' ')
                    .map((w) => w[0])
                    .join('')}
                </span>
                <div style={{ flex: 1, minWidth: 0 }}>
                  <div style={{ display: 'flex', alignItems: 'center', gap: 8, flexWrap: 'wrap' }}>
                    <span style={{ font: 'var(--text-body-strong)', color: 'var(--ink-1)', whiteSpace: 'nowrap' }}>
                      {p.who}
                    </span>
                    <span style={{ font: '400 12px var(--font-mono)', color: 'var(--ink-2)' }}>{p.pick}</span>
                    <span style={{ font: 'var(--text-small)', color: 'var(--ink-2)' }}>{p.title}</span>
                  </div>
                  <p style={{ font: 'var(--text-agent)', color: 'var(--ink-2)', margin: '4px 0 0' }}>{p.why}</p>
                </div>
              </div>
            ))}
          </div>
        </Section>

        <Section overline="Stale blockers" order={3}>
          <div
            role="button"
            tabIndex={0}
            onClick={() => onOpenIssue(NAG_REF)}
            onKeyDown={(e) => {
              if (e.key === 'Enter') onOpenIssue(NAG_REF)
            }}
            style={{
              display: 'flex',
              gap: 10,
              alignItems: 'flex-start',
              cursor: 'pointer',
              background: 'var(--warn-tint)',
              borderRadius: 'var(--radius-2)',
              padding: '12px 14px',
            }}
          >
            <span style={{ color: 'var(--warn)', display: 'inline-flex', marginTop: 2 }}>
              <Icon name="clock" size={15} />
            </span>
            <div style={{ flex: 1 }}>
              <div style={{ display: 'flex', alignItems: 'center', gap: 8, flexWrap: 'wrap' }}>
                <span style={{ font: '500 12.5px var(--font-mono)', color: 'var(--ink-1)' }}>#{s.nag.id}</span>
                <Badge tone="warn" dot>
                  steeping {s.nag.days}
                </Badge>
                <span style={{ font: '400 11.5px var(--font-mono)', color: 'var(--ink-3)' }}>
                  blocks {s.nag.blocks.join(', ')}
                </span>
              </div>
              <p style={{ font: 'var(--text-agent)', color: 'var(--ink-2)', margin: '5px 0 0' }}>{s.nag.text}</p>
            </div>
          </div>
        </Section>

        <footer
          className="ct-standup-section"
          style={{
            animationDelay: '360ms',
            borderTop: '1px solid var(--line-1)',
            paddingTop: 16,
            display: 'flex',
            alignItems: 'center',
            gap: 10,
          }}
        >
          <p style={{ font: 'var(--text-agent-lg)', color: 'var(--ink-1)', margin: 0, flex: 1 }}>
            The kettle’s on. — R.
          </p>
          <Button variant="ghost" onClick={onBegin}>
            Ask about the drift
          </Button>
          <Button iconRight="arrow-right" onClick={onBegin}>
            Begin the day
          </Button>
        </footer>
      </article>
    </div>
  )
}
