/* Mobile · AI Agronomist Chat thread */

function MobileChat() {
  const { lang, alertState } = useGA();

  const threads = {
    en: [
      { t: 'ai', label: '02:14 PM · AGRONOMIST', body: <>Frost risk detected at <b>lower-ridge zone</b> in 90 minutes. Ambient drops to <span style={{ color: 'var(--amber)' }}>−1.2°C</span>. I can activate localized drip-irrigation to shield the buds.</>, action: 'Run frost shield · 4.2mm · 40min' },
      { t: 'me', body: 'How sure are you?' },
      { t: 'ai', label: '02:14 PM · MODEL', body: <>92.4% confidence. Telemetry from <b>K3-B-015</b> shows dew at −2.1°C, and Sentinel-2 NDVI on the ridge dropped 0.04 in the last four days. Frost-radiative model, run at 14:14, gave an 89-minute horizon.</> },
      { t: 'me', body: 'What does it cost?' },
      { t: 'ai', label: '02:14 PM · LEDGER', body: <>≈ <span style={{ color: 'var(--yellow)' }}>₾28</span> in water across the 5 valves on zone B. Insurance writes off frost damage worth ₾2,400 on this acreage — net protection ratio <span style={{ color: 'var(--green)' }}>85×</span>.</>, attach: 'frost-cost-1402.csv' },
      { t: 'me', body: 'Run it now. Notify Nika.' },
      { t: 'ai', label: '02:14 PM · EXECUTING', queued: true },
    ],
    ka: [
      { t: 'ai', label: '14:14 · აგრონომი', body: <>ყინვის რისკი ქვედა-ხეობის ზონაში 90 წუთში. ტემპერატურა <span style={{ color: 'var(--amber)' }}>−1.2°C</span>-მდე ეცემა. შემიძლია წვეთოვანი მორწყვა ჩავრთო ლოკალურად.</>, action: 'ყინვის ფარის ჩართვა · 4.2მმ · 40წთ' },
      { t: 'me', body: 'რამდენად ზუსტი ხარ?' },
      { t: 'ai', label: '14:14 · მოდელი', body: <>92.4% დარწმუნება. სენსორი <b>K3-B-015</b> აჩვენებს ცვარს −2.1°C-ზე.</> },
    ],
    ru: [
      { t: 'ai', label: '14:14 · АГРОНОМ', body: <>Заморозки в зоне нижнего хребта через 90 минут. Температура опустится до <span style={{ color: 'var(--amber)' }}>−1.2°C</span>. Могу включить капельный полив локально.</>, action: 'Активировать защиту · 4.2мм · 40мин' },
      { t: 'me', body: 'Насколько уверены?' },
      { t: 'ai', label: '14:14 · МОДЕЛЬ', body: <>Уверенность 92.4%. Датчик <b>K3-B-015</b> — точка росы −2.1°C.</> },
    ],
  };
  const messages = threads[lang] || threads.en;

  return (
    <MobileShell tab="ai">
      <div style={{
        padding: '14px 18px 12px',
        position: 'sticky', top: 0, zIndex: 8,
        background: 'rgba(17,17,19,0.85)',
        backdropFilter: 'blur(20px)', WebkitBackdropFilter: 'blur(20px)',
        borderBottom: '0.5px solid var(--line)',
      }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
          {/* AI avatar */}
          <div style={{
            width: 44, height: 44, borderRadius: '50%', position: 'relative',
            background: 'radial-gradient(circle at 30% 30%, #FFD60A 0%, #FFA500 60%, #1F1A0C 100%)',
            border: '1px solid rgba(255,214,10,0.4)',
            overflow: 'hidden',
          }}>
            <div style={{ position: 'absolute', inset: 0,
              background: 'conic-gradient(from 0deg, transparent 60%, rgba(255,255,255,0.45) 70%, transparent 80%)',
              animation: 'ga-radar 6s linear infinite' }} />
          </div>
          <div style={{ flex: 1, minWidth: 0 }}>
            <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
              <span className="ga-disp" style={{ fontSize: 17, fontWeight: 600 }}>
                {lang === 'ka' ? 'AI აგრონომი' : lang === 'ru' ? 'AI агроном' : 'AI Agronomist'}
              </span>
              <Pill color="green" size="sm"><LiveDot size={5} /></Pill>
            </div>
            <div style={{ marginTop: 3, fontFamily: 'var(--f-mono)', fontSize: 10.5, color: 'var(--ink-3)' }}>
              haiku-4.5 · soil-context v2.6 · 4 zones
            </div>
          </div>
          <Pill color="ghost" size="sm">···</Pill>
        </div>

        {/* context chips */}
        <div style={{ display: 'flex', gap: 6, marginTop: 12, overflowX: 'auto' }}>
          {['Zone B context', '24h telemetry', 'Sentinel-2', 'Action ledger'].map((c, i) => (
            <span key={c} style={{
              flexShrink: 0,
              fontFamily: 'var(--f-mono)', fontSize: 10, fontWeight: 500, letterSpacing: '0.08em',
              textTransform: 'uppercase',
              padding: '5px 10px',
              background: i === 0 ? 'rgba(255,214,10,0.12)' : 'var(--bg-3)',
              color: i === 0 ? 'var(--yellow)' : 'var(--ink-2)',
              borderRadius: 4, border: '0.5px solid var(--line-2)',
            }}>{c}</span>
          ))}
        </div>
      </div>

      {/* messages */}
      <div style={{ padding: '16px 14px 14px', display: 'flex', flexDirection: 'column', gap: 14 }}>
        {/* day divider */}
        <div style={{ textAlign: 'center', display: 'flex', alignItems: 'center', gap: 12,
          fontFamily: 'var(--f-mono)', fontSize: 9.5, color: 'var(--ink-4)' }}>
          <span style={{ flex: 1, height: 1, background: 'var(--line)' }} />
          TODAY · 23 MAR 2026
          <span style={{ flex: 1, height: 1, background: 'var(--line)' }} />
        </div>

        {messages.map((m, i) => m.t === 'ai' ? <AIMsg key={i} {...m} /> : <MeMsg key={i} {...m} />)}

        {/* typing */}
        <div style={{ display: 'flex', gap: 6 }}>
          <div style={{ display: 'flex', gap: 4, padding: '12px 14px',
            background: 'var(--bg-2)', borderRadius: 14, border: '1px solid var(--line-2)' }}>
            <span className="ga-pulse-dot" style={{ width: 6, height: 6, borderRadius: '50%', background: 'var(--yellow)' }} />
            <span className="ga-pulse-dot" style={{ width: 6, height: 6, borderRadius: '50%', background: 'var(--yellow)', animationDelay: '0.2s' }} />
            <span className="ga-pulse-dot" style={{ width: 6, height: 6, borderRadius: '50%', background: 'var(--yellow)', animationDelay: '0.4s' }} />
          </div>
        </div>
      </div>

      {/* Composer */}
      <div style={{
        position: 'absolute', left: 0, right: 0, bottom: 92,
        padding: '10px 14px 12px',
        background: 'rgba(10,10,11,0.92)',
        backdropFilter: 'blur(20px)', WebkitBackdropFilter: 'blur(20px)',
        borderTop: '0.5px solid var(--line-2)',
        zIndex: 30,
      }}>
        {/* suggestion chips */}
        <div style={{ display: 'flex', gap: 6, marginBottom: 8, overflowX: 'auto' }}>
          {[ 'How sure are you?', 'What does it cost?', 'Run on B only', 'Show me the model' ].map((s) => (
            <span key={s} style={{
              flexShrink: 0, fontSize: 11, padding: '6px 10px',
              background: 'var(--bg-3)', border: '0.5px solid var(--line-2)',
              borderRadius: 14, color: 'var(--ink-2)',
            }}>{s}</span>
          ))}
        </div>
        <div style={{
          display: 'flex', alignItems: 'center', gap: 8,
          padding: '10px 14px', borderRadius: 22,
          background: 'var(--bg-2)', border: '1px solid var(--line-2)',
        }}>
          <input
            placeholder={lang === 'ka' ? 'ჰკითხეთ აგრონომს…' : lang === 'ru' ? 'Спросить агронома…' : 'Ask the agronomist…'}
            style={{
              flex: 1, background: 'transparent', border: 'none', outline: 'none',
              color: 'var(--ink)', fontFamily: 'var(--f-body)', fontSize: 14,
            }}/>
          <button style={{
            width: 32, height: 32, borderRadius: '50%',
            background: 'var(--yellow)', border: 'none', display: 'flex',
            alignItems: 'center', justifyContent: 'center', color: '#0A0A0B',
          }}>
            <svg width="14" height="14" viewBox="0 0 14 14"><path d="M2 8L7 3l5 5M7 3v10" stroke="currentColor" strokeWidth="1.8" fill="none" strokeLinecap="round" strokeLinejoin="round"/></svg>
          </button>
        </div>
      </div>
      <div style={{ height: 130 }} />
    </MobileShell>
  );
}

function AIMsg({ label, body, action, attach, queued }) {
  if (queued) {
    return (
      <div style={{ alignSelf: 'flex-start', maxWidth: '88%',
        padding: '12px 14px', borderRadius: 14,
        background: 'rgba(67,214,122,0.08)',
        border: '1px solid rgba(67,214,122,0.4)' }}>
        <div className="ga-kicker" style={{ color: 'var(--green)', marginBottom: 6 }}>{label}</div>
        <div style={{ display: 'flex', alignItems: 'center', gap: 10, fontSize: 13.5 }}>
          <svg width="16" height="16" viewBox="0 0 16 16" fill="none">
            <circle cx="8" cy="8" r="7" stroke="var(--green)" strokeWidth="1.3"/>
            <path d="M4.5 8.5l2.3 2.2 4.8-5" stroke="var(--green)" strokeWidth="1.5" fill="none" strokeLinecap="round" strokeLinejoin="round"/>
          </svg>
          Action queued · signed · <span className="ga-mono" style={{ color: 'var(--green)' }}>#0xA1·9C32A1</span>
        </div>
      </div>
    );
  }
  return (
    <div style={{ alignSelf: 'flex-start', maxWidth: '88%' }}>
      {label && <div className="ga-kicker" style={{ marginBottom: 6 }}>{label}</div>}
      <div style={{
        padding: '12px 14px', borderRadius: 14,
        borderTopLeftRadius: 4,
        background: 'var(--bg-2)',
        border: '1px solid var(--line-2)',
        fontSize: 13.5, lineHeight: 1.5, color: 'var(--ink)',
      }}>
        {body}
        {action && (
          <div style={{ marginTop: 10, paddingTop: 10, borderTop: '1px dashed var(--line-2)' }}>
            <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', gap: 8 }}>
              <span style={{ fontFamily: 'var(--f-mono)', fontSize: 11, color: 'var(--yellow)' }}>{action}</span>
              <GhostButton color="yellow" size="sm" solid>Run →</GhostButton>
            </div>
          </div>
        )}
        {attach && (
          <div style={{ marginTop: 8, padding: '8px 10px',
            background: 'var(--bg-3)', borderRadius: 6,
            border: '0.5px solid var(--line-2)',
            display: 'flex', alignItems: 'center', gap: 8,
            fontFamily: 'var(--f-mono)', fontSize: 11, color: 'var(--ink-2)' }}>
            <svg width="12" height="12" viewBox="0 0 12 12" fill="none" stroke="currentColor" strokeWidth="1.3"><path d="M7 1H2v10h8V4z"/><path d="M7 1v3h3"/></svg>
            {attach}
          </div>
        )}
      </div>
    </div>
  );
}

function MeMsg({ body }) {
  return (
    <div style={{ alignSelf: 'flex-end', maxWidth: '80%' }}>
      <div style={{
        padding: '10px 14px', borderRadius: 14, borderTopRightRadius: 4,
        background: 'var(--yellow)', color: '#0A0A0B',
        fontSize: 13.5, fontWeight: 500, lineHeight: 1.45,
      }}>{body}</div>
    </div>
  );
}

Object.assign(window, { MobileChat });