// ============================================================
// Drawers do módulo — Registrar manutenção, Editar/Cadastrar manutenção, Filtros
// ============================================================
function Drawer({ title, children, footer, onClose, width = 560 }) {
  const { Overlay, Ic } = window
  return (
    <Overlay onClose={onClose}>
      <div style={{ width, maxWidth: '96vw', height: '100vh', background: '#fff', boxShadow: '-8px 0 40px rgba(0,0,0,0.22)', display: 'flex', flexDirection: 'column' }}>
        <div style={{ display: 'flex', justifyContent: 'flex-end', padding: '18px 24px 0' }}><Ic name="close" size={22} color="var(--color-grayish)" onClick={onClose} /></div>
        <div style={{ flex: 1, overflowY: 'auto', padding: '8px 32px 32px' }}>
          <h2 style={{ margin: '0 0 26px', fontSize: 24, fontWeight: 700, color: 'var(--color-grayish-dark)' }}>{title}</h2>
          <div style={{ display: 'grid', gap: 22 }}>{children}</div>
        </div>
        {footer && <div style={{ padding: '16px 32px 24px', borderTop: '1px solid var(--color-neutral-100)', background: '#fff' }}>{footer}</div>}
      </div>
    </Overlay>
  )
}

// Multi-select de materiais (chips removíveis, como no produto)
function MaterialsPicker({ selected, onChange }) {
  const { Ic } = window
  const { MATERIALS } = window.MAQ
  const [open, setOpen] = React.useState(false)
  const available = MATERIALS.filter(m => !selected.some(s => s.id === m.id))
  return (
    <div>
      <div onClick={() => setOpen(o => !o)} style={{ minHeight: 96, padding: 10, border: '1px solid var(--color-neutral-200)', borderRadius: 'var(--border-radius-input)', background: '#fff', cursor: 'pointer',
        display: 'flex', flexWrap: 'wrap', alignItems: 'flex-start', alignContent: 'flex-start', gap: 8, position: 'relative' }}>
        {selected.length === 0 && <span style={{ fontSize: 14, color: 'var(--color-grayish-light)', padding: '4px 2px' }}>Selecione os materiais</span>}
        {selected.map(m => (
          <span key={m.id} style={{ display: 'inline-flex', alignItems: 'center', gap: 8, padding: '4px 8px', borderRadius: 4, background: 'var(--color-neutral-light-300)',
            fontSize: 12, fontWeight: 500, letterSpacing: '0.3px', textTransform: 'uppercase', color: 'var(--color-grayish-dark)' }}>
            {m.name} <span style={{ color: 'var(--color-grayish-light)' }}>({m.stock})</span>
            <Ic name="close" size={12} onClick={e => { e.stopPropagation(); onChange(selected.filter(s => s.id !== m.id)) }} />
          </span>
        ))}
        <span style={{ position: 'absolute', right: 12, top: 12, display: 'flex', gap: 10 }}>
          {selected.length > 0 && <Ic name="close" size={16} color="var(--color-grayish-light)" onClick={e => { e.stopPropagation(); onChange([]) }} />}
          <Ic name="chevron-down" size={16} color="var(--color-grayish-light)" />
        </span>
      </div>
      {open && available.length > 0 && (
        <div style={{ marginTop: 6, border: '1px solid var(--color-neutral-100)', borderRadius: 'var(--border-radius-input)', boxShadow: '0 12px 30px rgba(0,0,0,0.14)', padding: 6, maxHeight: 200, overflowY: 'auto' }}>
          {available.map(m => (
            <div key={m.id} onClick={() => { onChange([...selected, m]); setOpen(false) }}
              onMouseEnter={e => e.currentTarget.style.background = 'var(--color-primary-30)'} onMouseLeave={e => e.currentTarget.style.background = 'transparent'}
              style={{ padding: '10px 12px', borderRadius: 6, cursor: 'pointer', fontSize: 13, fontWeight: 500, color: 'var(--color-grayish-dark)' }}>
              {m.name} <span style={{ color: 'var(--color-grayish-light)' }}>({m.stock})</span>
            </div>
          ))}
        </div>
      )}
    </div>
  )
}

function MaintenanceDrawer({ maintenance, onClose }) {
  const { Field, Input, Select, Btn, Switch, StatusChip, Ic } = window
  const { MODELS: MODEL_LIST, MACHINERY_TYPES, MAINTENANCE_TYPES } = window.MAQ
  const edit = !!maintenance
  const [type, setType] = React.useState(edit ? maintenance.type : '')
  const [model, setModel] = React.useState(edit ? maintenance.model : '')
  const [materials, setMaterials] = React.useState(edit ? maintenance.materials.map(m => ({ ...m, stock: (window.MAQ.MATERIALS.find(x => x.id === m.id) || {}).stock || '' })) : [])
  const [active, setActive] = React.useState(edit ? maintenance.active : true)
  const periodic = type === 'Periódica'
  const warranty = type === 'Garantia'
  const scheduled = type === 'Preventiva' || periodic || warranty
  const machineUnit = MODEL_LIST.includes(model) ? ((window.MAQ.MACHINERY.find(m => m.model === model) || {}).unit || '') : ''
  const unitOf = periodic ? 'Dias' : machineUnit
  const alertUnit = periodic ? 'dias' : '%'
  const machineryTypeOf = (window.MAQ.MACHINERY.find(m => m.model === model) || {}).type || ''

  return (
    <Drawer title={edit ? 'Editar Manutenção' : 'Cadastrar Manutenção'} onClose={onClose}
      footer={<Btn type="primary" size="large" block upper label="Salvar" onClick={onClose} />}>
      <Field label="Nome da Manutenção"><Input defaultValue={edit ? maintenance.name : ''} placeholder="Digite o nome da manutenção" /></Field>
      <Field label="Tipo de Manutenção"><Select placeholder="Selecione o tipo" options={MAINTENANCE_TYPES} value={type} onChange={e => setType(e.target.value)} /></Field>
      <Field label="Modelo de Maquinário">
        <div style={{ position: 'relative' }}>
          <Select placeholder="Selecione o modelo" options={MODEL_LIST} value={model} onChange={e => setModel(e.target.value)} />
          {model && (
            <span style={{ position: 'absolute', right: 42, top: '50%', transform: 'translateY(-50%)', display: 'flex', alignItems: 'center', gap: 12, pointerEvents: 'none' }}>
              <span style={{ fontSize: 14, fontWeight: 500, color: 'var(--color-grayish)' }}>{unitOf}</span>
              <span style={{ padding: '5px 16px', borderRadius: 100, background: 'var(--color-success-light)', color: 'var(--color-primary-900)', fontSize: 14, fontWeight: 500 }}>{machineryTypeOf}</span>
            </span>
          )}
        </div>
      </Field>
      <Field label="Materiais"><MaterialsPicker selected={materials} onChange={setMaterials} /></Field>

      {scheduled && (
        <React.Fragment>
          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 20 }}>
            <Field label={`${warranty ? 'Leitura da revisão' : periodic ? 'Frequência base' : 'Frequência de Troca'}${unitOf ? ` (${unitOf})` : ''}`}><Input type="number" defaultValue={edit ? maintenance.frequency : ''} placeholder={periodic ? 'Ex.: 60' : 'Digite a frequência'} /></Field>
            <Field label={`Limite de Revisão${unitOf ? ` (${unitOf})` : ''}`}><Input type="number" defaultValue={edit ? maintenance.reviewLimit : ''} placeholder={periodic ? 'Ex.: 70' : 'Digite o limite'} /></Field>
          </div>
          <div>
            <span style={{ display: 'block', fontSize: 13, fontWeight: 500, letterSpacing: '0.8px', textTransform: 'uppercase', color: 'var(--color-primary)' }}>Configurar alertas</span>
            <p style={{ margin: '10px 0 18px', fontSize: 13, lineHeight: 1.5, color: 'var(--color-grayish-light)', textWrap: 'pretty' }}>
              {periodic
                ? 'Informe com quantos dias de antecedência cada alerta deve ser exibido, contados a partir da data de vencimento.'
                : 'Informe com quantos % de H ou Km restantes cada alerta deve ser exibido, para auxiliá-lo a manter as manutenções com a cadência correta.'}</p>
            <div style={{ display: 'grid', gap: 14 }}>
              {[['A vencer', edit ? maintenance.overcoming : (periodic ? 7 : 5), periodic ? '7' : '5%'], ['Atenção', edit ? maintenance.attention : 15, periodic ? '15' : '15%']].map(([label, val, ph]) => (
                <div key={label} style={{ display: 'flex', alignItems: 'center', gap: 14 }}>
                  <StatusChip status={label} minWidth={110} />
                  <span style={{ fontSize: 14, fontWeight: 500, color: 'var(--color-grayish)' }}>a partir de</span>
                  <div style={{ position: 'relative', width: 130, marginLeft: 'auto' }}>
                    <Input type="number" defaultValue={val ?? ''} placeholder={ph} style={{ paddingRight: periodic ? 48 : 34 }} />
                    <span style={{ position: 'absolute', right: 12, top: '50%', transform: 'translateY(-50%)', fontSize: 14, color: 'var(--color-grayish-light)' }}>{alertUnit}</span>
                  </div>
                  {periodic && <span style={{ fontSize: 14, fontWeight: 500, color: 'var(--color-grayish)', whiteSpace: 'nowrap' }}>antes do vencimento</span>}
                </div>
              ))}
            </div>
          </div>
        </React.Fragment>
      )}

      {edit && <Field label="Status"><Switch checked={active} onChange={setActive} label={active ? 'Ativo' : 'Inativo'} /></Field>}
    </Drawer>
  )
}

function RegisterMaintenanceDrawer({ context, onClose }) {
  const { Field, Input, Select, Btn } = window
  const { MACHINERY, MAINTENANCES } = window.MAQ
  const [materials, setMaterials] = React.useState((context && context.materials) || [])
  const mach = MACHINERY.find(m => m.name === (context && context.machinery))
  const periodic = !!(mach && mach.periodic)
  return (
    <Drawer title="Registrar Manutenção" onClose={onClose}
      footer={<Btn type="primary" size="large" block upper label="Registrar" onClick={onClose} />}>
      <Field label="Maquinário"><Select placeholder="Selecione o maquinário" options={MACHINERY.map(m => m.name)} value={(context && context.machinery) || ''} onChange={() => {}} /></Field>
      <Field label="Manutenção"><Select placeholder="Selecione a manutenção" options={MAINTENANCES.map(m => m.name)} value={(context && (context.maintenance || context.name)) || ''} onChange={() => {}} /></Field>
      <div style={{ display: 'grid', gridTemplateColumns: periodic ? '1fr' : '1fr 1fr', gap: 20 }}>
        <Field label="Data da manutenção"><Input type="date" defaultValue="2026-09-04" /></Field>
        {!periodic && <Field label="Km / Horímetro"><Input type="number" placeholder="Digite a leitura atual" /></Field>}
      </div>
      <Field label="Materiais utilizados"><MaterialsPicker selected={materials} onChange={setMaterials} /></Field>
      <Field label="Executor"><Input defaultValue="ANA PRADO" /></Field>
      <Field label="Observação">
        <textarea placeholder="Descreva o que foi feito (opcional)" rows={4}
          style={{ ...window.inputStyle, height: 'auto', padding: 12, resize: 'vertical', fontFamily: 'inherit' }} />
      </Field>
    </Drawer>
  )
}

function FilterDrawer({ scope, onClose }) {
  const { Field, Select, Btn, Input } = window
  const { FARMS, MACHINERY_TYPES, MODELS, MACHINERY } = window.MAQ
  return (
    <Drawer title="Filtrar" onClose={onClose} width={480}
      footer={<div style={{ display: 'flex', justifyContent: 'space-between', gap: 12 }}>
        <Btn type="ghost" label="Limpar filtros" onClick={onClose} /><Btn type="primary" label="Aplicar" upper onClick={onClose} /></div>}>
      {scope === 'historico' && <Field label="Maquinário"><Select placeholder="Todos os maquinários" options={MACHINERY.map(m => m.name)} onChange={() => {}} /></Field>}
      <Field label="Tipo de maquinário"><Select placeholder="Todos os tipos" options={MACHINERY_TYPES} onChange={() => {}} /></Field>
      <Field label="Modelo"><Select placeholder="Todos os modelos" options={MODELS} onChange={() => {}} /></Field>
      <Field label="Fazenda"><Select placeholder="Todas as fazendas" options={FARMS.map(f => f.name)} onChange={() => {}} /></Field>
      {scope === 'manutencao' && <Field label="Tipo de manutenção"><Select placeholder="Todos os tipos" options={window.MAQ.MAINTENANCE_TYPES} onChange={() => {}} /></Field>}
      {scope === 'manutencao' && <Field label="Status"><Select placeholder="Todos os status" options={['Ativo', 'Inativo']} onChange={() => {}} /></Field>}
      {scope === 'historico' && <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 16 }}>
        <Field label="Data inicial"><Input type="date" /></Field><Field label="Data final"><Input type="date" /></Field></div>}
    </Drawer>
  )
}

Object.assign(window, { Drawer, MaintenanceDrawer, RegisterMaintenanceDrawer, FilterDrawer, MaterialsPicker })