/* FarmDetail.jsx — "Why is this farm flagged, and what do I tell the farmer?" */
const REC = {
  healthy:       { en: 'Crops on track for this stage. Maintain weeding and routine scouting; no intervention needed.', sw: 'Mazao yako sawa kwa hatua hii. Endelea kupalilia na ukaguzi wa kawaida; hakuna hatua inayohitajika.' },
  water_deficit: { en: 'Topsoil is drying and a dry window opens before Friday. Advise irrigation now if a borehole is available, and mulch the rows to hold moisture.', sw: 'Udongo wa juu unakauka na dirisha kavu linakuja kabla ya Ijumaa. Shauri umwagiliaji sasa ikiwa kuna kisima, na weka matandazo kuhifadhi unyevu.' },
  veg_drop:      { en: 'Greenness is falling faster than its peers — scout the field today for fall armyworm and nitrogen stress, and pull leaf samples from the affected block.', sw: 'Kijani kinapungua haraka kuliko wenzake — kagua shamba leo kwa viwavi jeshi na upungufu wa naitrojeni, na chukua sampuli za majani.' },
  heat_stress:   { en: 'Heat is building during a sensitive tasseling window. Advise early-morning irrigation and avoid spraying in the midday heat.', sw: 'Joto linaongezeka wakati wa kutoa maua ambao ni nyeti. Shauri umwagiliaji wa asubuhi na epuka kunyunyiza wakati wa joto la mchana.' },
  off_stage:     { en: 'Growth is lagging for the crop\u2019s age. Check stand density and nitrogen status; a CAN top-dress may bring it back on schedule.', sw: 'Ukuaji unachelewa kwa umri wa zao. Angalia wingi wa mimea na hali ya naitrojeni; kuongeza CAN kunaweza kurudisha ratiba.' },
  nutrient:      { en: 'Leaf colour suggests a nitrogen shortfall. Top-dress CAN before tasseling completes to protect yield.', sw: 'Rangi ya majani inaonyesha upungufu wa naitrojeni. Ongeza CAN kabla ya kutoa maua kumalizika ili kulinda mavuno.' },
  waterlog:      { en: 'Standing water after heavy rain risks root stress. Advise opening drainage furrows and hold off on fertiliser until it dries.', sw: 'Maji yaliyotuama baada ya mvua kubwa yanahatarisha mizizi. Shauri kufungua mifereji na usubiri kabla ya mbolea.' },
};

function metricVerdict(f, t) {
  const g = f.ndvi - f.ndviNorm;
  const green = { txt: g < -0.06 ? t('below_normal') : g > 0.05 ? t('above_normal') : t('at_normal'), s: g < -0.10 ? 'red' : g < -0.04 ? 'amber' : 'green' };
  const water = { txt: f.ndmi < 0.22 ? t('low') : f.ndmi < 0.38 ? t('moderate') : t('adequate'), s: f.ndmi < 0.20 ? 'red' : f.ndmi < 0.34 ? 'amber' : 'green' };
  const heat = { txt: f.tmax >= 32 ? t('rising') : f.tmax >= 29 ? t('moderate') : t('low'), s: f.tmax >= 33 ? 'red' : f.tmax >= 30 ? 'amber' : 'green' };
  return { green, water, heat };
}

function Metric({ icon, label, value, raw, verdict, s }) {
  return (
    <div className="metric">
      <div className="top">
        <span className="mlabel"><Icon d={icon} size={15} color="var(--ink-soft)" />{label}</span>
        <span className="mraw">{raw}</span>
      </div>
      <div className="mverdict" style={{ color: STATUS_INK[s] }}>{value}</div>
      <Bar pct={verdict} s={s} />
    </div>
  );
}

function FarmDetail({ farm, t, lang, onBack }) {
  const R = window.RADA, f = farm;
  const [drawer, setDrawer] = useState(false);
  const [showRaw, setShowRaw] = useState(false);
  const mv = metricVerdict(f, t);
  const dv = R.DRIVERS[f.driver];
  const sLabel = (k) => { const s = R.STAGES.find(x => x.key === k); return s ? s[lang] || s.en : k; };
  const curIdx = R.stageIndex(f.stage);
  const visits = R.VISITS[f.id] || [{ date: '2026-05-12', agent: f.agent, note: lang === 'sw' ? 'Ukaguzi wa kawaida — shamba liko sawa.' : 'Routine check — field in good order.', advice: lang === 'sw' ? 'Hakuna hatua.' : 'No action needed.', photos: 1 }];
  const overall = f.status === 'green' ? (lang === 'sw' ? 'Shamba linaendelea vizuri' : 'Farm is doing well') : f.status === 'amber' ? (lang === 'sw' ? 'Linahitaji kuangaliwa' : 'Needs watching') : (lang === 'sw' ? 'Linahitaji msaada wa haraka' : 'Needs attention now');

  return (
    <div className="scroll">
      <div className="phead">
        <div>
          <button className="btn ghost sm" onClick={onBack} style={{ marginLeft: -8, marginBottom: 6 }}><Icon d="chevron" size={14} style={{ transform: 'rotate(180deg)' }} />{t('back')}</button>
          <div style={{ display: 'flex', alignItems: 'center', gap: 11 }}>
            <h1>{f.name}</h1>
            <StatusChip s={f.status} label={t('st_' + f.status)} />
          </div>
          <div className="psub">
            <Icon d="person" size={13} color="var(--ink-mute)" style={{ verticalAlign: -2, marginRight: 4 }} />{f.farmer}
            <span style={{ margin: '0 8px', color: 'var(--ink-mute)' }}>·</span>
            <Icon d="pin" size={13} color="var(--ink-mute)" style={{ verticalAlign: -2, marginRight: 4 }} />{f.ward}, {f.region === 'UG' ? 'Uasin Gishu' : 'Elgeyo Marakwet'}
          </div>
        </div>
        <div className="pright">
          <button className="btn"><Icon d="phone" size={14} />{lang === 'sw' ? 'Piga simu' : 'Call'}</button>
          <button className="btn orange"><Icon d="plus" size={15} color="#3a2408" />{t('log_visit')}</button>
        </div>
      </div>

      {/* header facts strip */}
      <div className="fd" style={{ paddingBottom: 0 }}>
        <div className="card" style={{ display: 'flex', flexWrap: 'wrap' }}>
          {[
            [t('crop'), lang === 'sw' ? 'Mahindi (H614)' : 'Maize (H614)'],
            [t('planted'), new Date(f.planting).toLocaleDateString(lang === 'sw' ? 'sw-KE' : 'en-GB', { day: 'numeric', month: 'short' }) + ' · ' + f.ageDays + (lang === 'sw' ? ' siku' : 'd')],
            [t('area'), f.area + ' ha'],
            [t('stage'), sLabel(f.stage)],
            [t('agent'), f.agent],
          ].map(([k, v], i) => (
            <div key={i} style={{ flex: '1 1 18%', padding: '14px 18px', borderRight: i < 4 ? '1px solid var(--line-soft)' : 0, minWidth: 130 }}>
              <div className="eyebrow" style={{ marginBottom: 5 }}>{k}</div>
              <div style={{ fontSize: 14, fontWeight: 600 }}>{v}</div>
            </div>
          ))}
        </div>
      </div>

      <div className="fd">
        <div className="fd-grid">
          {/* LEFT column */}
          <div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
            {/* status card */}
            <div className="card card-pad">
              <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 16 }}>
                <span className="eyebrow"><span className="eb-dot" style={{ background: STATUS_COLOR[f.status] }}></span>{t('current_status')}</span>
                <span style={{ fontSize: 13, fontWeight: 600, color: STATUS_INK[f.status], display: 'flex', alignItems: 'center', gap: 7 }}>
                  <span style={{ fontSize: 15 }}>{dv.glyph}</span>{overall}
                </span>
              </div>
              <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3,1fr)', gap: 22 }}>
                <Metric icon="leaf" label={t('crop_greenness')} value={mv.green.txt} raw={showRaw ? f.ndvi.toFixed(2) + ' NDVI' : ''} verdict={norm(f.ndvi, 0.2, 0.85) * 100} s={mv.green.s} />
                <Metric icon="drop" label={t('soil_water')} value={mv.water.txt} raw={showRaw ? f.ndmi.toFixed(2) + ' NDMI' : ''} verdict={norm(f.ndmi, 0.1, 0.55) * 100} s={mv.water.s} />
                <Metric icon="thermo" label={t('heat_risk')} value={mv.heat.txt} raw={showRaw ? f.tmax + '°C' : ''} verdict={norm(f.tmax, 22, 36) * 100} s={mv.heat.s} />
              </div>
              <div style={{ marginTop: 16, paddingTop: 14, borderTop: '1px solid var(--line-soft)', display: 'flex', alignItems: 'center', gap: 9 }}>
                <span className="gl" style={{ fontSize: 16 }}>{dv.glyph}</span>
                <span style={{ fontSize: 13.5, fontWeight: 600, color: STATUS_INK[f.status] }}>{dv[lang] || dv.en}</span>
                <button className="btn ghost sm" style={{ marginLeft: 'auto' }} onClick={() => setShowRaw(!showRaw)}>
                  <Icon d="eye" size={13} />{showRaw ? (lang === 'sw' ? 'Ficha NDVI' : 'Hide values') : t('view_raw')}
                </button>
              </div>
            </div>

            {/* phenology */}
            <div className="card card-pad">
              <span className="eyebrow"><span className="eb-dot" style={{ background: 'var(--orange)' }}></span>{t('phenology')}</span>
              <div className="pheno">
                {R.STAGES.map((s, i) => (
                  <div key={s.key} className={'pstage' + (i < curIdx ? ' done' : i === curIdx ? ' cur' : '')}>
                    <div className="pseg"></div>
                    <div className="pdot"></div>
                    <div className="plabel">{s[lang] || s.en}</div>
                  </div>
                ))}
              </div>
              <div style={{ fontSize: 12.5, color: 'var(--ink-soft)', marginTop: 16, textAlign: 'center' }}>
                {lang === 'sw' ? `Sasa: ${sLabel(f.stage)} · ${f.ageDays} siku tangu kupanda · ${t('typical_marker')}` : `Now: ${sLabel(f.stage)} · day ${f.ageDays} since planting · ${t('typical_marker')}`}
              </div>
            </div>

            {/* health trend */}
            <div className="card card-pad">
              <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 12 }}>
                <span className="eyebrow"><span className="eb-dot" style={{ background: STATUS_COLOR[f.status] }}></span>{t('health_trend')} · {lang === 'sw' ? 'wiki 8' : '8 weeks'}</span>
                <div style={{ display: 'flex', gap: 14, fontSize: 11, color: 'var(--ink-soft)' }}>
                  <span style={{ display: 'flex', alignItems: 'center', gap: 5 }}><span style={{ width: 14, height: 3, background: STATUS_COLOR[f.status], borderRadius: 2 }}></span>{t('this_farm')}</span>
                  <span style={{ display: 'flex', alignItems: 'center', gap: 5 }}><span style={{ width: 14, height: 0, borderTop: '2px dashed var(--ink-mute)' }}></span>{t('stage_normal')}</span>
                </div>
              </div>
              <Sparkline series={f.trend} baseline={f.cohort} color={STATUS_COLOR[f.status]} w={520} h={120} />
              <div style={{ fontSize: 12.5, color: 'var(--ink-soft)', marginTop: 10 }}>
                {f.status === 'red'
                  ? (lang === 'sw' ? 'Kijani kimeshuka wiki hii — chini ya wenzake.' : 'Greenness dipped this week — now below its peers.')
                  : f.status === 'amber'
                    ? (lang === 'sw' ? 'Inaendelea chini kidogo ya kawaida ya hatua.' : 'Tracking just below its stage-normal.')
                    : (lang === 'sw' ? 'Mwenendo mzuri — sambamba na kawaida ya hatua.' : 'Healthy trajectory — at or above stage-normal.')}
              </div>
            </div>
          </div>

          {/* RIGHT column */}
          <div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
            {/* recommended action */}
            <div className="rec">
              <div className="rh"><Icon d="target" size={13} color="var(--orange-deep)" />{t('rec_action')}</div>
              <div className="rt">{REC[f.driver][lang] || REC[f.driver].en}</div>
            </div>

            {/* water & weather */}
            <div className="card card-pad">
              <span className="eyebrow"><span className="eb-dot" style={{ background: 'var(--blue)' }}></span>{t('water_weather')}</span>
              <div style={{ marginTop: 14, display: 'flex', flexDirection: 'column', gap: 14 }}>
                <div>
                  <div style={{ display: 'flex', justifyContent: 'space-between', fontSize: 12.5, marginBottom: 6 }}>
                    <span className="mlabel"><Icon d="rain" size={14} color="var(--blue)" />{t('rain_7d')}</span>
                    <span className="fig" style={{ fontSize: 14 }}>{f.rain7}mm</span>
                  </div>
                  <Bar pct={norm(f.rain7, 0, 60) * 100} s={f.rain7 < 12 ? 'amber' : 'var(--blue)'} />
                  <div style={{ fontSize: 11, color: 'var(--ink-mute)', marginTop: 5 }}>{lang === 'sw' ? 'Kawaida' : 'Normal'} ~{f.rainNorm}mm · CHIRPS</div>
                </div>
                <div>
                  <div style={{ display: 'flex', justifyContent: 'space-between', fontSize: 12.5, marginBottom: 6 }}>
                    <span className="mlabel"><Icon d="drop" size={14} color="var(--blue)" />{t('soil_moisture')}</span>
                    <span className="fig" style={{ fontSize: 14 }}>{(f.ndmi * 100).toFixed(0)}%</span>
                  </div>
                  <Bar pct={f.ndmi * 100} s={mv.water.s} />
                </div>
                <div style={{ borderTop: '1px solid var(--line-soft)', paddingTop: 12 }}>
                  <div className="eyebrow" style={{ marginBottom: 9 }}>{t('near_outlook')}</div>
                  <div style={{ display: 'flex', gap: 6 }}>
                    {R.WEATHER.days.slice(0, 5).map((d, i) => (
                      <div key={i} style={{ flex: 1, textAlign: 'center', background: 'var(--bg-cream-dim)', borderRadius: 8, padding: '8px 2px' }}>
                        <div style={{ fontSize: 9.5, fontFamily: 'var(--font-mono)', color: 'var(--ink-mute)' }}>{d.d}</div>
                        <div style={{ fontSize: 16, margin: '2px 0' }}>{d.g}</div>
                        <div style={{ fontSize: 10, fontWeight: 700, color: d.mm > 5 ? 'var(--blue-ink)' : 'var(--ink-soft)' }}>{d.mm}mm</div>
                      </div>
                    ))}
                  </div>
                </div>
              </div>
            </div>

            {/* visit log */}
            <div className="card card-pad">
              <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 6 }}>
                <span className="eyebrow"><span className="eb-dot" style={{ background: 'var(--green)' }}></span>{t('visit_log')} · {visits.length}</span>
                <button className="btn green sm"><Icon d="plus" size={13} color="#fff" />{t('log_visit')}</button>
              </div>
              <div style={{ marginTop: 6 }}>
                {visits.map((v, i) => (
                  <div className="visit" key={i}>
                    <div className="vrail"><div className="vnode"></div>{i < visits.length - 1 && <div className="vstem"></div>}</div>
                    <div style={{ flex: 1 }}>
                      <div style={{ display: 'flex', justifyContent: 'space-between' }}>
                        <span className="vdate">{new Date(v.date).toLocaleDateString(lang === 'sw' ? 'sw-KE' : 'en-GB', { day: 'numeric', month: 'short' })}</span>
                        <span className="vdate">{v.agent}</span>
                      </div>
                      <div className="vnote">{v.note}</div>
                      <div className="vadvice">"{v.advice}"</div>
                      {v.photos > 0 && <span className="photo-chip"><Icon d="camera" size={12} />{v.photos} {lang === 'sw' ? 'picha' : 'photos'}</span>}
                    </div>
                  </div>
                ))}
              </div>
            </div>
          </div>
        </div>

        {/* raw-data drawer */}
        <div className="card card-pad" style={{ marginTop: 16 }}>
          <div className={'drawer-head' + (drawer ? ' open' : '')} onClick={() => setDrawer(!drawer)} style={{ paddingTop: 0 }}>
            <Icon d="chevron" size={16} className="chev" />
            <span className="eyebrow" style={{ flex: 1 }}>{t('raw_data')}</span>
            <span style={{ fontSize: 11.5, color: 'var(--ink-mute)' }}>{t('raw_hint')}</span>
          </div>
          {drawer && (
            <div style={{ marginTop: 12, display: 'grid', gridTemplateColumns: 'repeat(2,1fr)', gap: '0 40px' }}>
              {[
                ['NDVI', f.ndvi.toFixed(3)], ['NDVI stage-normal', f.ndviNorm.toFixed(3)],
                ['NDMI (moisture)', f.ndmi.toFixed(3)], ['Rainfall 7d (CHIRPS)', f.rain7 + ' mm'],
                ['GDD accumulated', f.gdd + ' °C·d'], ['Canopy max temp', f.tmax + ' °C'],
                ['Soil temp', f.soilTemp + ' °C'], ['Area (polygon)', f.area + ' ha'],
                ['Planting date', f.planting], ['Days since planting', f.ageDays],
                [t('source'), 'Sentinel-2 · Sentinel-1 SAR · CHIRPS'], [t('updated'), '02 Jun 2026 · 06:40'],
              ].map(([k, v], i) => (
                <div className="kv" key={i}><span className="k">{k}</span><span className="v">{v}</span></div>
              ))}
            </div>
          )}
        </div>
      </div>
    </div>
  );
}

window.FarmDetail = FarmDetail;