const { useState } = React;

// ─── Weather Icon ────────────────────────────────────────────────────────────
function WeatherIcon({ icon, size = 22 }) {
  const icons = { sun:'☀', partly:'⛅', rain:'🌧', storm:'⛈', cloud:'☁' };
  return <span style={{ fontSize: size, lineHeight: 1 }}>{icons[icon] || '🌤'}</span>;
}

// ─── Weather Card ────────────────────────────────────────────────────────────
function WeatherCard({ w, idx }) {
  const isAlert = w.rain > 20;
  return (
    <div style={{
      minWidth: 74, padding:'8px 6px', borderRadius:6, border:`1px solid ${isAlert ? C.warning+'66' : C.border}`,
      background: isAlert ? '#FFFBEB' : C.card, display:'flex', flexDirection:'column', alignItems:'center', gap:3,
      flexShrink: 0, position:'relative',
    }}>
      {idx === 0 && (
        <div style={{ position:'absolute', top:-8, left:'50%', transform:'translateX(-50%)', background:C.primary, color:'#fff', fontSize:8, fontWeight:700, padding:'1px 6px', borderRadius:3, letterSpacing:0.5, whiteSpace:'nowrap' }}>HOJE+1</div>
      )}
      <div style={{ fontSize:9, color:C.textSub, fontWeight:600, letterSpacing:0.2, textAlign:'center', lineHeight:1.2 }}>{w.day}</div>
      <WeatherIcon icon={w.icon} size={20} />
      <div style={{ fontSize:11.5, fontWeight:700, color:C.text }}>{w.max}° <span style={{ fontSize:10, color:C.textSub, fontWeight:400 }}>{w.min}°</span></div>
      <div style={{ fontSize:10, color: isAlert ? C.warning : C.textSub, fontWeight: isAlert ? 700 : 400 }}>
        {w.rain > 0 ? `${w.rain}mm` : '—'}
      </div>
      {isAlert && <div style={{ fontSize:8, color:C.warning, fontWeight:700, textAlign:'center', lineHeight:1.2 }}>⚠ IMPACTO</div>}
    </div>
  );
}

// ─── Sparkline with trend ────────────────────────────────────────────────────
function SparkWithTrend({ data, w = 72, h = 26 }) {
  const rising = data[data.length-1] > data[0];
  return <Sparkline data={data} color="auto" w={w} h={h} />;
}

// ─── Purchase Row ────────────────────────────────────────────────────────────
function PurchaseRow({ r, idx }) {
  const recVariant = { danger:'danger', success:'success', primary:'primary', warning:'warning' }[r.recKey] || 'default';
  const trendIcon = r.trend === 'up' ? '▲' : r.trend === 'down' ? '▼' : '→';
  const trendColor = r.trend === 'up' ? C.danger : r.trend === 'down' ? C.success : C.textSub;
  const isUrgent = r.recKey === 'danger';

  return (
    <tr style={{ background: isUrgent ? '#FFF5F5' : idx % 2 === 0 ? '#FAFBFC' : C.card }}>
      <Td style={{ fontWeight: 600, color:C.text }}>{r.item}</Td>
      <Td style={{ fontFamily:'IBM Plex Mono, monospace', fontSize:11 }}>{r.priceStr}</Td>
      <Td>
        <span style={{ color: r.var7d < 0 ? C.success : C.danger, fontWeight:600, fontSize:11 }}>
          {r.var7d > 0 ? '+' : ''}{r.var7d.toFixed(1)}%
        </span>
      </Td>
      <Td>
        <span style={{ color: r.var30d < 0 ? C.success : C.danger, fontWeight:600, fontSize:11 }}>
          {r.var30d > 0 ? '+' : ''}{r.var30d.toFixed(1)}%
        </span>
      </Td>
      <Td><SparkWithTrend data={r.sparkline} /></Td>
      <Td><span style={{ color:trendColor, fontWeight:700, fontSize:12 }}>{trendIcon}</span></Td>
      <Td><Badge label={r.rec} variant={recVariant} small /></Td>
      <Td style={{ fontFamily:'IBM Plex Mono, monospace', fontSize:11, fontWeight:600, color: r.budgetImpact.startsWith('+') ? C.danger : C.success }}>{r.budgetImpact}</Td>
      <Td>
        <div style={{ display:'flex', alignItems:'center', gap:5 }}>
          <div style={{ flex:1, height:4, background:C.borderSub, borderRadius:2, overflow:'hidden', minWidth:40 }}>
            <div style={{ height:'100%', width:`${r.confidence}%`, background: r.confidence >= 80 ? C.success : r.confidence >= 65 ? C.warning : C.danger, borderRadius:2 }} />
          </div>
          <span style={{ fontSize:10, color:C.textSub, fontWeight:600 }}>{r.confidence}%</span>
        </div>
      </Td>
    </tr>
  );
}

// ─── Forecast Scenario Card ──────────────────────────────────────────────────
function ScenarioCard({ label, prob, date, delta, color, pct }) {
  return (
    <div style={{ flex:1, padding:'12px 14px', borderRadius:7, border:`1px solid ${color}44`, background:`${color}0A`, display:'flex', flexDirection:'column', gap:4 }}>
      <div style={{ display:'flex', justifyContent:'space-between', alignItems:'center' }}>
        <span style={{ fontSize:10.5, fontWeight:700, color, letterSpacing:0.5, textTransform:'uppercase' }}>{label}</span>
        <span style={{ fontSize:10, background:`${color}22`, color, padding:'1px 6px', borderRadius:3, fontWeight:700 }}>P{prob}</span>
      </div>
      <div style={{ fontSize:20, fontWeight:800, color }}>{date}</div>
      <div style={{ fontSize:10.5, color:C.textSub }}>{delta} dias vs. baseline</div>
      <div style={{ height:4, background:C.borderSub, borderRadius:2, overflow:'hidden', marginTop:2 }}>
        <div style={{ height:'100%', width:`${pct}%`, background:color, borderRadius:2 }} />
      </div>
      <div style={{ fontSize:10, color:C.textSub }}>Probabilidade: {pct}%</div>
    </div>
  );
}

// ─── Discipline Trend Alert ──────────────────────────────────────────────────
function DisciplineTrendAlert({ name, slope, days7, status }) {
  const color = statusColor(status);
  return (
    <div style={{ display:'flex', alignItems:'center', gap:10, padding:'8px 10px', borderRadius:5, border:`1px solid ${color}33`, background:`${color}08`, marginBottom:6 }}>
      <div style={{ minWidth:8, height:36, borderRadius:2, background:color }} />
      <div style={{ flex:1 }}>
        <div style={{ fontSize:11.5, fontWeight:600, color:C.text }}>{name}</div>
        <div style={{ fontSize:10, color:C.textSub }}>Tendência 7 dias: <strong style={{ color }}>{slope > 0 ? '+' : ''}{slope}pp/sem</strong></div>
      </div>
      <div style={{ textAlign:'right' }}>
        <div style={{ fontSize:11, fontWeight:700, color }}>−{days7} dias</div>
        <div style={{ fontSize:9.5, color:C.textSub }}>impacto crítico</div>
      </div>
    </div>
  );
}

// ─── Screen 2: Dashboard IA Preditivo ────────────────────────────────────────
function Screen2IA() {
  const { weather, purchaseRecs } = window.SIGP_DATA;
  const [activeTab, setActiveTab] = useState('compras');

  const tabs = [
    { id:'compras',   label:'Recomendações de Compra' },
    { id:'clima',     label:'Previsão Climática' },
    { id:'forecast',  label:'Forecast de Conclusão' },
    { id:'alertas',   label:'Alertas por Disciplina' },
  ];

  return (
    <ScreenShell
      title="Dashboard Preditivo de IA"
      subtitle="IAP · Modelos preditivos, recomendações de compra e previsão climática · Jaraguari/MS"
    >
      {/* ── Alert box ── */}
      <div style={{ padding:'10px 14px', background:'#FFFBEB', border:`1px solid ${C.warning}66`, borderRadius:7, marginBottom:14, display:'flex', gap:12, alignItems:'flex-start' }}>
        <span style={{ fontSize:20, marginTop:1 }}>🌧</span>
        <div>
          <div style={{ fontSize:12.5, fontWeight:700, color:'#78350F', marginBottom:3 }}>Alerta Climático — IA detectou impacto nos próximos 14 dias</div>
          <div style={{ fontSize:11.5, color:'#92400E', lineHeight:1.6 }}>
            <strong>Qua 27/05 (28mm) e Qui 28/05 (42mm):</strong> suspensão provável de concretagens descobertas e armações externas — impacto estimado <strong>+2 dias</strong> no Caminho Crítico (Fundações Bloco A).<br />
            <strong>Ter 02/06 (35mm) e Qua 03/06 (55mm):</strong> segunda janela crítica — risco de alagamento nas cavas das fundações. Recomendação: adiantar concretagem do pilar C7 para 26/05.
          </div>
        </div>
        <div style={{ minWidth:90, textAlign:'center', background:C.warning, borderRadius:6, padding:'6px 8px', color:'#fff' }}>
          <div style={{ fontSize:10, fontWeight:600, letterSpacing:0.5 }}>IMPACTO</div>
          <div style={{ fontSize:20, fontWeight:800 }}>+2d</div>
          <div style={{ fontSize:9.5 }}>Caminho Crítico</div>
        </div>
      </div>

      {/* ── Tabs ── */}
      <div style={{ display:'flex', gap:2, marginBottom:12 }}>
        {tabs.map(t => (
          <button key={t.id} onClick={() => setActiveTab(t.id)} style={{
            padding:'7px 14px', fontSize:11.5, fontWeight: activeTab===t.id ? 700 : 500,
            background: activeTab===t.id ? C.primary : C.card,
            color: activeTab===t.id ? '#fff' : C.textSub,
            border:`1px solid ${activeTab===t.id ? C.primary : C.border}`,
            borderRadius:5, cursor:'pointer', fontFamily:'inherit',
          }}>{t.label}</button>
        ))}
      </div>

      {/* ── Climate Tab ── */}
      {activeTab === 'clima' && (
        <Card title="Previsão Climática — 14 Dias" subtitle="Jaraguari/MS · Modelo meteoblue + IA local · Dias com chuva >20mm em destaque âmbar">
          <div style={{ display:'flex', gap:7, overflowX:'auto', paddingBottom:6 }}>
            {weather.map((w, i) => <WeatherCard key={i} w={w} idx={i} />)}
          </div>
          <div style={{ marginTop:12, padding:'8px 12px', background:'#F8FAFC', borderRadius:5, fontSize:11, color:C.textSub }}>
            <span style={{ color:C.warning, fontWeight:700 }}>⚠ 4 dias com precipitação &gt;20mm</span> nos próximos 14 dias. Atividades externas afetadas: concretagem, armação, aterro compactado, montagem de estrutura metálica.
          </div>
        </Card>
      )}

      {/* ── Purchase Tab ── */}
      {activeTab === 'compras' && (
        <Card title="Recomendações de Compra / Hedge" subtitle="Análise IA com base em preços de mercado, variações e tendências de 30 dias" noPad>
          <Table>
            <thead>
              <tr>
                <Th>Insumo</Th>
                <Th>Preço Atual</Th>
                <Th>Var 7d</Th>
                <Th>Var 30d</Th>
                <Th>Tendência</Th>
                <Th>Trend</Th>
                <Th>Recomendação IA</Th>
                <Th>Impacto Orçamento</Th>
                <Th>Confiança</Th>
              </tr>
            </thead>
            <tbody>
              {purchaseRecs.map((r, i) => <PurchaseRow key={i} r={r} idx={i} />)}
            </tbody>
          </Table>
          <div style={{ padding:'10px 12px', fontSize:11, color:C.textSub, borderTop:`1px solid ${C.borderSub}` }}>
            Modelos: ARIMA + LSTM · Dados: B3, CEPEA/ESALQ, ANP, PTAX-BACEN · Atualização: 22/05/2026 18:00
          </div>
        </Card>
      )}

      {/* ── Forecast Tab ── */}
      {activeTab === 'forecast' && (
        <div>
          <div style={{ display:'flex', gap:10, marginBottom:14 }}>
            <ScenarioCard label="Otimista" prob={20} date="Jan/2027" delta="+0" color={C.success} pct={20} />
            <ScenarioCard label="Base"     prob={50} date="Mar/2027" delta="+45" color={C.warning} pct={50} />
            <ScenarioCard label="Pessimista" prob={80} date="Mai/2027" delta="+120" color={C.danger} pct={80} />
          </div>
          <Card title="Premissas do Modelo" subtitle="Variáveis de entrada para Monte Carlo (10.000 iterações)">
            <div style={{ display:'grid', gridTemplateColumns:'1fr 1fr 1fr', gap:8 }}>
              {[
                { l:'Variabilidade de prazo',    v:'σ = 8,4 semanas' },
                { l:'Variabilidade de custo',    v:'σ = R$ 12,3M' },
                { l:'Histórico de atraso',       v:'+1,8 sem/mês tendência' },
                { l:'Impacto climático',         v:'+2 dias/mês (MS)' },
                { l:'Risco R-001 (câmbio)',      v:'15% prob. gatilho' },
                { l:'Risco R-002 (caldeira)',    v:'65% prob. atraso' },
              ].map(({l,v}) => (
                <div key={l} style={{ padding:'8px 10px', background:'#F8FAFC', borderRadius:5, border:`1px solid ${C.border}` }}>
                  <div style={{ fontSize:10.5, color:C.textSub, marginBottom:2 }}>{l}</div>
                  <div style={{ fontSize:12, fontWeight:700, color:C.text }}>{v}</div>
                </div>
              ))}
            </div>
          </Card>
        </div>
      )}

      {/* ── Alerts Tab ── */}
      {activeTab === 'alertas' && (
        <div style={{ display:'grid', gridTemplateColumns:'1fr 1fr', gap:10 }}>
          <Card title="Tendência de Atraso por Disciplina" subtitle="Regressão linear — últimas 7 semanas de medição">
            <DisciplineTrendAlert name="Mecânica"  slope={-1.8} days7={12} status="critical" />
            <DisciplineTrendAlert name="Civil"     slope={-1.2} days7={8}  status="delayed"  />
            <DisciplineTrendAlert name="P&I"       slope={-0.6} days7={4}  status="at_risk"  />
            <DisciplineTrendAlert name="Elétrica"  slope={-0.3} days7={2}  status="warning"  />
            <DisciplineTrendAlert name="Ambiental" slope={-0.1} days7={1}  status="warning"  />
          </Card>
          <Card title="Ações Recomendadas pela IA" subtitle="Prioridade alta — aprovação PMO necessária">
            {[
              { icon:'🔴', action:'Emitir PO caldeira até 30/05', owner:'Ger. Suprimentos', impact:'Evita +22 sem no cronograma' },
              { icon:'🟡', action:'Adicionar turno noturno civil',  owner:'Ger. Obras',      impact:'Recupera 5 dias em 3 semanas' },
              { icon:'🟡', action:'Antecipar entrega aço CA-50',    owner:'Compras',          impact:'Reduz risco de interrupção' },
              { icon:'🟠', action:'Contratar topógrafo adicional',  owner:'Ger. Civil',      impact:'Desbloqueia 3 frentes de trabalho' },
              { icon:'🔵', action:'Fechar hedge EUR/BRL agora',      owner:'CFO',             impact:'Bloqueia variação de R$ 420k' },
            ].map(({icon,action,owner,impact}) => (
              <div key={action} style={{ display:'flex', gap:10, padding:'8px 0', borderBottom:`1px solid ${C.borderSub}` }}>
                <span style={{ fontSize:16, marginTop:1 }}>{icon}</span>
                <div>
                  <div style={{ fontSize:12, fontWeight:600, color:C.text }}>{action}</div>
                  <div style={{ fontSize:10.5, color:C.textSub }}>{owner} · {impact}</div>
                </div>
              </div>
            ))}
          </Card>
        </div>
      )}
    </ScreenShell>
  );
}

Object.assign(window, { Screen2IA });