import { useState } from 'react'
import { Button, Field } from '@sims/ui'
import { formatINR } from '@sims/domain'

const DENOMS = [50000, 20000, 10000, 5000, 2000, 1000, 500, 200, 100] // paise per note/coin

/** Shift open with denomination count (09-UX §1.5) — the OG Day-Begin ritual's counter-level sibling. */
export function ShiftOpen(props: { userName: string; onOpen: (floatPaise: number) => void; onBack: () => void }) {
  const [counts, setCounts] = useState<Record<number, number>>({})
  const total = DENOMS.reduce((a, d) => a + d * (counts[d] ?? 0), 0)

  return (
    <div className="login-wrap">
      <div className="login-card" style={{ width: 460 }}>
        <h2 style={{ marginTop: 0 }}>Open shift — {props.userName}</h2>
        <div className="denoms">
          {DENOMS.map((d) => (
            <Field key={d} label={`${formatINR(d)} ×`}>
              <input
                className="wf num"
                type="number"
                min={0}
                value={counts[d] ?? ''}
                onChange={(e) => setCounts((c) => ({ ...c, [d]: Number(e.target.value) }))}
              />
            </Field>
          ))}
        </div>
        <div className="payable" style={{ margin: '12px 0' }}>
          <span>Opening float</span>
          <span className="amount num" style={{ fontSize: 28 }}>{formatINR(total)}</span>
        </div>
        <div style={{ display: 'flex', gap: 8 }}>
          <Button tone="primary" onClick={() => props.onOpen(total)}>Open shift</Button>
          <Button onClick={() => props.onOpen(0)}>Skip count</Button>
          <Button onClick={props.onBack}>Back</Button>
        </div>
      </div>
    </div>
  )
}