// ============================================================
// Ficha do maquinário — dados básicos, observações e abas
// (próximas programações, histórico de manutenções, boletins, quilometragem)
// ============================================================
const STATUS_TONE = {
  'Atrasada': { bg: 'var(--color-danger-light-100)', border: 'var(--color-danger-light)', ink: 'var(--color-danger-dark)' },
  'A vencer': { bg: 'var(--color-warning-light-100)', border: 'var(--color-warning)', ink: 'var(--color-grayish-dark)' },
  'Atenção': { bg: 'var(--color-alert-light-200)', border: 'var(--color-alert)', ink: 'var(--color-grayish-dark)' },
  'Segura': { bg: '#fff', border: 'var(--color-neutral-200)', ink: 'var(--color-grayish-dark)' },
}
const ORDER = { 'Atrasada': 0, 'A vencer': 1, 'Atenção': 2, 'Segura': 3 }

function FieldPair({ label, value, ink }) {
  const { Caption } = window
  return (
    <div style={{ display: 'flex', flexDirection: 'column', gap: 8, minWidth: 0 }}>
      <Caption>{label}</Caption>
      <span style={{ fontSize: 15, fontWeight: 500, color: ink || 'var(--color-grayish)', whiteSpace: 'normal' }}>{value == null || value === '' ? '-' : value}</span>
    </div>
  )
}

function NextMaintenanceCard({ item, unit, periodic, onRegister }) {
  const { StatusChip, TypeChip, Btn, Ic } = window
  const tone = STATUS_TONE[item.status] || STATUS_TONE['Segura']
  const overdue = item.status === 'Atrasada'
  const warranty = item.type === 'Garantia'
  const byDays = periodic || item.type === 'Periódica'
  const fields = [['tipo de manutenção', item.type ? <TypeChip type={item.type} variant="text" /> : null]]
  if (!warranty) fields.push(['última manutenção', item.lastDate])
  if (!byDays && item.odometer) fields.push([unit === 'Horas' ? 'Horímetro' : 'Odômetro', item.odometer])
  fields.push(['Status atual', item.statusNow], ['Frequência base', item.frequency], ['Limite de revisão', item.reviewLimit])
  return (
    <div style={{ border: '1px solid ' + tone.border, borderRadius: 'var(--border-radius-default)', background: tone.bg, padding: '24px 28px' }}>
      <header style={{ display: 'flex', alignItems: 'flex-start', justifyContent: 'space-between', gap: 20, flexWrap: 'nowrap' }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 16, flexWrap: 'wrap', minWidth: 0, flex: 1 }}>
          <StatusChip status={item.status} minWidth={110} />
          <h3 style={{ margin: 0, fontSize: 18, fontWeight: 600, color: 'var(--color-grayish)' }}>{item.name}</h3>
          {overdue && (
            <span style={{ display: 'inline-flex', alignItems: 'center', gap: 8, color: 'var(--color-danger-dark)', fontSize: 14, fontWeight: 600 }}>
              <Ic name="warning-outline" size={20} />Limite de revisão: {item.reviewLimit}</span>
          )}
        </div>
        <Btn type="primary" size="medium" style={{ minWidth: 250, flex: '0 0 auto' }} label={warranty ? 'Registrar manutenção' : 'Renovar manutenção'} icon={warranty ? 'add-circle-outline' : 'renew'} upper onClick={onRegister} />
      </header>
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(170px, 1fr))', gap: 24, marginTop: 24 }}>
        {fields.map(([l, v]) => <FieldPair key={l} label={l} value={v} ink={l === 'Status atual' && overdue ? 'var(--color-danger-dark)' : undefined} />)}
      </div>
    </div>
  )
}

// Card de registro no histórico de manutenções (borda na cor do tipo)
function MaintenanceHistoryCard({ item, detail, periodic, unit, onEdit }) {
  const { TypeChip, TYPE_STYLE, StatusChip, Ic, fmtDateBR, fmtNum } = window
  const border = (TYPE_STYLE[item.type] || {}).bg || 'var(--color-neutral-200)'
  const d = detail || {}
  const top = [['data do serviço', fmtDateBR(item.date)], ['registrado em', d.registeredAt], ['autor do serviço', item.executor]]
  const bottom = [['material', d.materials && d.materials.length ? d.materials.join(', ') : null],
    ['troca não realizada?', d.notDone], ['materiais extras', d.extraMaterials], ['comentários', d.comments]]
  return (
    <div style={{ border: '1px solid ' + border, borderRadius: 'var(--border-radius-default)', background: '#fff', padding: '22px 26px' }}>
      <header style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 20 }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 16, flexWrap: 'wrap' }}>
          <TypeChip type={item.type} />
          <h3 style={{ margin: 0, fontSize: 19, fontWeight: 600, color: 'var(--color-grayish-dark)' }}>{item.maintenance}</h3>
        </div>
        <Ic name="pencil" size={19} color="var(--color-grayish)" onClick={onEdit} />
      </header>
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(160px, 1fr))', gap: 24, marginTop: 22 }}>
        {top.map(([l, v]) => <FieldPair key={l} label={l} value={v} />)}
        <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
          <window.Caption>status de resolução</window.Caption>
          {d.resolution ? <span><StatusChip status={d.resolution} /></span> : <span style={{ fontSize: 15, fontWeight: 500 }}>-</span>}
        </div>
        {!periodic && <FieldPair label={unit === 'Horas' ? 'Horímetro registrado' : 'Odômetro registrado'} value={item.mileage == null ? null : fmtNum(item.mileage) + (unit === 'Horas' ? ' horas' : ' km')} />}
        <FieldPair label="registrado com" value={d.registeredWith} />
      </div>
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(160px, 1fr))', gap: 24, marginTop: 22 }}>
        {bottom.map(([l, v]) => <FieldPair key={l} label={l} value={v} />)}
      </div>
    </div>
  )
}

function BulletinCard({ item }) {
  const { Ic, fmtNum } = window
  return (
    <div style={{ border: '1px solid var(--color-neutral-100)', borderRadius: 'var(--border-radius-default)', background: '#fff', padding: '22px 26px', display: 'grid', gridTemplateColumns: 'minmax(190px, 220px) 1fr', gap: 28, alignItems: 'start' }}>
      <div style={{ display: 'flex', alignItems: 'center', gap: 14, borderRight: '1px solid var(--color-neutral-100)', minHeight: 56 }}>
        <Ic name="clipboard" size={30} color="var(--color-primary)" />
        <span style={{ display: 'flex', flexDirection: 'column', gap: 4 }}>
          <window.Caption>nº do boletim</window.Caption>
          <a href="#" style={{ fontSize: 16, fontWeight: 600 }}>{item.id}</a>
        </span>
      </div>
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(150px, 1fr))', gap: '20px 24px' }}>
        <FieldPair label="serviço" value={item.service} />
        <FieldPair label="data" value={item.date} />
        <FieldPair label="duração" value={item.duration} />
        <FieldPair label="odômetro" value={fmtNum(item.odometer)} />
        <FieldPair label="local" value={item.location} />
        <FieldPair label="executor" value={item.executor} />
        <FieldPair label="centro de custo" value={item.costCenter} />
        <FieldPair label="classificação" value={item.classification} />
        <FieldPair label="comentário" value={item.comment} />
      </div>
    </div>
  )
}

const ORIGIN_TONE = {
  'Cadastro': { bg: 'var(--color-success-light-100)', fg: 'var(--color-primary-900)', card: '#fff', border: 'var(--color-neutral-100)' },
  'Edição': { bg: 'var(--color-info-light-100)', fg: 'var(--color-info-dark)', card: '#fff', border: 'var(--color-neutral-100)' },
  'Exclusão': { bg: 'var(--color-danger-dark)', fg: '#fff', card: 'var(--color-danger-light-100)', border: 'var(--color-danger-light)' },
}

function OdometerCard({ item, unit }) {
  const { fmtNum } = window
  const tone = ORIGIN_TONE[item.origin] || ORIGIN_TONE['Cadastro']
  const suffix = unit === 'Horas' ? ' H' : ' km'
  return (
    <div style={{ border: '1px solid ' + tone.border, borderRadius: 'var(--border-radius-default)', background: tone.card, padding: '20px 26px' }}>
      <header style={{ display: 'flex', alignItems: 'center', gap: 14, flexWrap: 'wrap' }}>
        <h3 style={{ margin: 0, fontSize: 17, fontWeight: 600, color: 'var(--color-grayish-dark)' }}>{item.title}</h3>
        <span style={{ padding: '4px 14px', borderRadius: 100, background: tone.bg, color: tone.fg, fontSize: 13, fontWeight: 500 }}>{item.origin}</span>
      </header>
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(150px, 1fr))', gap: 24, marginTop: 18 }}>
        <FieldPair label="data" value={item.date} />
        <FieldPair label="registrado por" value={item.author} />
        <FieldPair label={(unit === 'Horas' ? 'horímetro' : 'odômetro') + ' anterior'} value={fmtNum(item.previous) + suffix} />
        <FieldPair label={(unit === 'Horas' ? 'horímetro' : 'odômetro') + ' novo'} value={fmtNum(item.value) + suffix} />
      </div>
    </div>
  )
}

function FichaPage({ machinery, onRegister, onEditMaintenance, tab, onTab }) {
  const { Caption, Panel, Tabs, Btn, SearchInput, Select, Field, fmtNum, EmptyState } = window
  const { FICHA_SCHEDULE, FICHA_SCHEDULE_PERIODIC, FICHA_ODOMETER, FICHA_BULLETINS, HISTORY, HISTORY_DETAIL } = window.MAQ
  const periodic = !!machinery.periodic
  const basics = periodic
    ? [['Nome do maquinário', machinery.name], ['Tipo do maquinário', machinery.type], ['Modelo', machinery.model], ['Fazenda', machinery.farm]]
    : [['Nome do maquinário', machinery.name], ['Tipo do maquinário', machinery.type], ['Modelo', machinery.model],
      ['Unidade de frequência', machinery.unit], ['Número da frota', machinery.fleet], ['Km atual', fmtNum(machinery.mileage)], ['Fazenda', machinery.farm]]
  const tabs = periodic
    ? [{ key: 'next', label: 'Próximas programações' }, { key: 'maint', label: 'Histórico de manutenções' }]
    : [{ key: 'next', label: 'Próximas programações' }, { key: 'maint', label: 'Histórico de manutenções' },
      { key: 'bulletins', label: 'Histórico de boletins' }, { key: 'odometer', label: 'Histórico de quilometragem' }]
  const activeTab = periodic && (tab === 'bulletins' || tab === 'odometer') ? 'next' : tab

  const [q, setQ] = React.useState('')
  const [fMaint, setFMaint] = React.useState('')
  const [fStatus, setFStatus] = React.useState('')
  const [fHist, setFHist] = React.useState('')

  let schedule = (periodic ? FICHA_SCHEDULE_PERIODIC : FICHA_SCHEDULE).slice().sort((a, b) => ORDER[a.status] - ORDER[b.status])
  if (q) schedule = schedule.filter(s => s.name.toLowerCase().includes(q.toLowerCase()))
  if (fMaint) schedule = schedule.filter(s => s.name === fMaint)
  if (fStatus) schedule = schedule.filter(s => s.status === fStatus)

  let history = HISTORY.filter(h => h.machinery === machinery.name)
  const histNames = [...new Set(history.map(h => h.maintenance))]
  if (fHist) history = history.filter(h => h.maintenance === fHist)

  return (
    <div style={{ margin: '-32px', display: 'flex', flexDirection: 'column' }}>
      <section style={{ background: 'var(--color-neutral-light-100)', boxShadow: 'var(--shadow-card-default)', padding: '24px 32px' }}>
        <h2 style={{ margin: '0 0 32px', fontSize: 22, fontWeight: 600, color: 'var(--color-grayish-dark)' }}>Dados básicos</h2>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(200px, 1fr))', gap: '32px 48px' }}>
          {basics.map(([l, v]) => (
            <div key={l} style={{ minWidth: 0, display: 'flex', flexDirection: 'column', gap: 8 }}>
              <Caption>{l}</Caption>
              <span style={{ fontSize: 15, fontWeight: 500, color: 'var(--color-grayish)' }}>{v || '—'}</span>
            </div>
          ))}
        </div>
      </section>

      <section style={{ background: '#fff', padding: '32px', borderTop: '8px solid var(--color-background)' }}>
        <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 24 }}>
          <h2 style={{ margin: 0, fontSize: 22, fontWeight: 600, color: 'var(--color-grayish-dark)' }}>Observações</h2>
          <Btn type="ghost" size="medium" label="Adicionar obs.:" icon="add-circle-outline" upper />
        </div>
        <p style={{ margin: '20px 0 0', fontSize: 15, fontWeight: 500, color: machinery.observation ? 'var(--color-grayish)' : 'var(--color-neutral-300)' }}>{machinery.observation || '-'}</p>
      </section>

      <div style={{ padding: 32, display: 'grid', gap: 20 }}>
        <Tabs align="center" active={activeTab} onChange={onTab} tabs={tabs} />

        {activeTab === 'next' && (
          <Panel pad={28}>
            <div style={{ display: 'flex', justifyContent: 'flex-end', gap: 20, flexWrap: 'wrap', marginBottom: 24 }}>
              <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
                <Caption>buscar</Caption>
                <SearchInput value={q} onChange={setQ} width={280} placeholder="Buscar manutenção" />
              </div>
              <div style={{ width: 260 }}><Field label="Manutenção"><Select placeholder="Selecione uma manutenção" options={schedule.length || fMaint ? (periodic ? FICHA_SCHEDULE_PERIODIC : FICHA_SCHEDULE).map(s => s.name) : []} value={fMaint} onChange={e => setFMaint(e.target.value)} /></Field></div>
              <div style={{ width: 220 }}><Field label="Status"><Select placeholder="Selecione um status" options={['Atrasada', 'A vencer', 'Atenção', 'Segura']} value={fStatus} onChange={e => setFStatus(e.target.value)} /></Field></div>
            </div>
            <div style={{ display: 'grid', gap: 20 }}>
              {schedule.length === 0 ? <EmptyState message="Nenhuma programação encontrada para os filtros." />
                : schedule.map(item => <NextMaintenanceCard key={item.id} item={item} unit={machinery.unit} periodic={periodic} onRegister={() => onRegister(item)} />)}
            </div>
          </Panel>
        )}

        {activeTab === 'maint' && (
          <Panel pad={28}>
            <div style={{ display: 'flex', justifyContent: 'flex-end', marginBottom: 24 }}>
              <div style={{ width: 300 }}><Field label="Filtrar"><Select placeholder="Selecione uma manutenção" options={histNames} value={fHist} onChange={e => setFHist(e.target.value)} /></Field></div>
            </div>
            <div style={{ display: 'grid', gap: 20 }}>
              {history.length === 0 ? <EmptyState message="Nenhuma manutenção registrada para este maquinário." />
                : history.map(h => <MaintenanceHistoryCard key={h.id} item={h} detail={HISTORY_DETAIL[h.id]} periodic={periodic} unit={machinery.unit} onEdit={() => onEditMaintenance(h)} />)}
            </div>
          </Panel>
        )}

        {!periodic && activeTab === 'bulletins' && (
          <Panel pad={28}>
            <div style={{ display: 'grid', gap: 20 }}>
              {FICHA_BULLETINS.map(b => <BulletinCard key={b.id} item={b} />)}
            </div>
          </Panel>
        )}

        {!periodic && activeTab === 'odometer' && (
          <Panel pad={28}>
            <div style={{ display: 'grid', gap: 16 }}>
              {FICHA_ODOMETER.map(o => <OdometerCard key={o.date + o.title} item={o} unit={machinery.unit} />)}
            </div>
          </Panel>
        )}
      </div>
    </div>
  )
}

Object.assign(window, { FichaPage, NextMaintenanceCard, MaintenanceHistoryCard, BulletinCard, OdometerCard })