// VÄXTER-vyn — zone-tabs, kort per planta, snooze, samt detaljsheet.

function PlantCard({ plant, zones, onWater, onOpen, onSnooze, rainTomorrow, busy, showZone }) {
  const st = TV.statusOf(plant);
  const isOverdue = st.kind === 'overdue';
  const isToday = st.kind === 'today';
  const isManual = st.kind === 'manual';
  const isOutdoor = plant.zone !== 'vaxthus';
  const showRainHint = rainTomorrow && (isToday || isOverdue) && isOutdoor;

  let statusBadge;
  if (isOverdue) statusBadge = <span className="pill warn"><Icon.Clock size={11}/> {st.days} {st.days===1?'dag':'dagar'} sen</span>;
  else if (isToday) statusBadge = <span className="pill accent"><Icon.Drop size={11}/> Idag</span>;
  else if (isManual) statusBadge = <span className="pill tonal">Känn på jorden</span>;
  else statusBadge = <span className="pill primary">om {st.days} {st.days===1?'dag':'dagar'}</span>;

  const zoneName = zones.find(z => z.id === plant.zone)?.name;

  return (
    <div className="card" style={{ padding: 'var(--pad-card)' }}>
      <button onClick={() => onOpen(plant.id)} style={{
        background: 'transparent', border: 0, padding: 0, cursor: 'pointer', textAlign: 'left',
        width: '100%', display: 'flex', gap: 12, alignItems: 'flex-start',
      }}>
        <PlantDisc hue={plant.hue} size={48}/>
        <div style={{ flex: 1, minWidth: 0 }}>
          <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 8 }}>
            <div style={{ fontSize: 16, fontWeight: 500, color: 'var(--ink)', minWidth: 0,
                          overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{plant.name}</div>
            {statusBadge}
          </div>
          <div style={{ fontSize: 12.5, color: 'var(--ink-subtle)', marginTop: 4 }}>
            {showZone && zoneName && <span style={{ color: 'var(--ink-muted)', fontWeight: 500 }}>{zoneName} · </span>}
            {plant.schedule.type === 'every'
              ? `Var ${plant.schedule.days}:e dag · senast ${TV.formatLast(plant.last)}`
              : `Manuell vattning · senast ${TV.formatLast(plant.last)}`}
          </div>
        </div>
      </button>

      {showRainHint && (
        <div style={{
          marginTop: 12, padding: '8px 11px',
          background: 'var(--water-wash)', color: 'var(--rain)',
          borderRadius: 10, fontSize: 12.5, display: 'flex', alignItems: 'center', gap: 8,
        }}>
          <Icon.CloudRain size={15}/>
          <span style={{ flex: 1 }}>Regn imorgon — kanske räcker det?</span>
        </div>
      )}

      <div style={{ display: 'flex', gap: 8, marginTop: 12, alignItems: 'center' }}>
        <button className="btn-water compact" disabled={busy} onClick={(e) => onWater(plant.id, e)}>
          <Icon.Drop size={13}/> Vattnat
        </button>
        {(isToday || isOverdue) && (
          <button className="btn-snooze" onClick={() => onSnooze(plant.id)}>
            <Icon.Snooze size={14}/> Imorgon
          </button>
        )}
      </div>
    </div>
  );
}

// Mobil-zon-tabs (horisontell scroll). Renderas inte på desktop (dölj via CSS i layouten).
function ZoneTabs({ zones, active, onPick, plants, allCount }) {
  const items = [{ id: 'all', name: 'Alla' }, ...zones];
  return (
    <div className="h-scroll" style={{ padding: '0 16px', display: 'flex', gap: 6, marginBottom: 14 }}>
      {items.map(z => {
        const count = z.id === 'all' ? allCount : plants.filter(p => p.zone === z.id).length;
        const need = z.id === 'all'
          ? plants.filter(p => ['today','overdue'].includes(TV.statusOf(p).kind)).length
          : plants.filter(p => p.zone === z.id && ['today','overdue'].includes(TV.statusOf(p).kind)).length;
        const isActive = z.id === active;
        return (
          <button key={z.id} className={`zone-tab ${isActive?'active':''}`} onClick={() => onPick(z.id)} style={{
            position: 'relative', display: 'flex', alignItems: 'center', gap: 6,
          }}>
            <span>{z.name}</span>
            <span style={{
              fontSize: 10.5, fontWeight: 600,
              padding: '1px 6px', borderRadius: 999,
              background: isActive ? 'rgba(251,247,234,0.18)' : 'var(--bg-deep)',
              color: isActive ? 'var(--bg-card)' : 'var(--ink-muted)',
            }}>{count}</span>
            {need > 0 && !isActive && (
              <span style={{
                position: 'absolute', top: 4, right: 4,
                width: 6, height: 6, borderRadius: '50%', background: 'var(--accent)',
              }}/>
            )}
          </button>
        );
      })}
    </div>
  );
}

function PlantsScreen({ plants, zones, activeZone, onZone, onWater, onOpen, onSnooze, onAddPlant, onEditZone, busyId }) {
  const isAll = activeZone === 'all';
  const zone = isAll ? null : zones.find(z => z.id === activeZone);
  const inZone = isAll ? plants : plants.filter(p => p.zone === activeZone);
  const need = inZone.filter(p => ['today','overdue'].includes(TV.statusOf(p).kind));
  const ok = inZone.filter(p => !['today','overdue'].includes(TV.statusOf(p).kind));
  const rainTomorrow = TV.WEATHER[1].rain >= 3 ? TV.WEATHER[1] : null;

  return (
    <div>
      <div style={{ padding: '4px 16px 14px' }}>
        <div className="eyebrow" style={{ marginBottom: 6 }}>Mina växter</div>
        <div style={{ display: 'flex', alignItems: 'flex-end', justifyContent: 'space-between', gap: 12 }}>
          <h1 className="serif" style={{ fontSize: 28, lineHeight: 1.05, letterSpacing: '-0.015em' }}>
            {isAll ? 'Alla plantor' : (zone?.name || '—')}
          </h1>
          <div style={{ display: 'flex', gap: 8 }}>
            {!isAll && zone && (
              <button onClick={() => onEditZone(zone.id)} aria-label="Redigera zon" style={{
                appearance: 'none', border: '1px solid var(--line-strong)', cursor: 'pointer',
                background: 'var(--bg-card)', color: 'var(--ink-muted)',
                width: 38, height: 38, borderRadius: '50%',
                display: 'flex', alignItems: 'center', justifyContent: 'center',
              }}>
                <Icon.Settings size={15}/>
              </button>
            )}
            <button onClick={onAddPlant} aria-label="Lägg till planta" style={{
              appearance: 'none', border: 0, cursor: 'pointer',
              background: 'var(--ink)', color: 'var(--bg-card)',
              width: 38, height: 38, borderRadius: '50%',
              display: 'flex', alignItems: 'center', justifyContent: 'center',
            }}>
              <Icon.Plus size={18}/>
            </button>
          </div>
        </div>
        <div style={{ fontSize: 13.5, color: 'var(--ink-muted)', marginTop: 4 }}>
          {inZone.length} plantor · {need.length > 0 ? `${need.length} vill ha vatten idag` : 'alla nöjda'}
        </div>
      </div>

      {/* Mobil-tabs syns vid <1024px (sidebar tar över på desktop) */}
      <div className="mobile-only-zonetabs">
        <ZoneTabs zones={zones} active={activeZone} onPick={onZone} plants={plants} allCount={plants.length}/>
      </div>

      <div style={{ padding: '0 16px 24px', display: 'flex', flexDirection: 'column', gap: 'var(--gap-stack)' }}>
        {need.length > 0 && (
          <>
            <div style={{ display: 'flex', alignItems: 'center', gap: 8, padding: '0 4px', marginTop: 4 }}>
              <span className="eyebrow">Behöver vatten</span>
              <span style={{ flex: 1, height: 1, background: 'var(--line)' }}/>
            </div>
            <div className="plants-grid">
              {need.map(p => (
                <PlantCard key={p.id} plant={p} zones={zones} onWater={onWater} onOpen={onOpen} onSnooze={onSnooze}
                           rainTomorrow={rainTomorrow} busy={busyId === p.id} showZone={isAll}/>
              ))}
            </div>
          </>
        )}
        {ok.length > 0 && (
          <>
            <div style={{ display: 'flex', alignItems: 'center', gap: 8, padding: '0 4px', marginTop: need.length > 0 ? 8 : 4 }}>
              <span className="eyebrow">Nöjda</span>
              <span style={{ flex: 1, height: 1, background: 'var(--line)' }}/>
            </div>
            <div className="plants-grid">
              {ok.map(p => (
                <PlantCard key={p.id} plant={p} zones={zones} onWater={onWater} onOpen={onOpen} onSnooze={onSnooze}
                           rainTomorrow={rainTomorrow} busy={busyId === p.id} showZone={isAll}/>
              ))}
            </div>
          </>
        )}
        {inZone.length === 0 && (
          <div className="card leaf-stamp" style={{ padding: 24, textAlign: 'center' }}>
            <div style={{ fontSize: 32, marginBottom: 8 }}>{zone?.emoji || '🌱'}</div>
            <div className="serif" style={{ fontSize: 18 }}>Inga plantor här ännu</div>
            <div style={{ fontSize: 13, color: 'var(--ink-muted)', marginTop: 6, marginBottom: 14 }}>
              Tryck på + för att lägga till en planta {zone ? `i ${zone.name}` : ''}.
            </div>
            <button className="btn-water compact" onClick={onAddPlant}>
              <Icon.Plus size={13}/> Ny planta
            </button>
          </div>
        )}
      </div>
    </div>
  );
}

// ─────── Plant detail sheet ───────
function PlantSheet({ plant, zones, onClose, onWater, onSnooze, onEdit, onChat, history, busy }) {
  if (!plant) return null;
  const st = TV.statusOf(plant);
  const myHistory = history.filter(h => h.plantId === plant.id).slice(0, 12);
  const fertDue = plant.fert ? plant.fert.last + plant.fert.days * TV.DAY : null;
  const fertDays = fertDue ? Math.ceil((fertDue - Date.now()) / TV.DAY) : null;

  let statusLine;
  if (st.kind === 'overdue') statusLine = `Borde ha vattnats för ${st.days} ${st.days===1?'dag':'dagar'} sedan`;
  else if (st.kind === 'today') statusLine = 'Vill ha vatten idag';
  else if (st.kind === 'manual') statusLine = `Känn på jorden — senast vattnad ${TV.formatLast(plant.last)}`;
  else statusLine = `Nästa vattning om ${st.days} ${st.days===1?'dag':'dagar'}`;

  const zone = zones.find(z => z.id === plant.zone);

  return (
    <Sheet onClose={onClose}>
      <div style={{ display: 'flex', gap: 14, alignItems: 'center', marginBottom: 6 }}>
        <PlantDisc hue={plant.hue} size={64}/>
        <div style={{ flex: 1, minWidth: 0 }}>
          <div className="eyebrow" style={{ marginBottom: 4 }}>{zone?.name}</div>
          <h2 className="serif" style={{ fontSize: 24, lineHeight: 1.1, letterSpacing: '-0.015em' }}>{plant.name}</h2>
        </div>
        <button onClick={() => { onEdit(plant.id); onClose(); }} aria-label="Redigera planta" style={{
          appearance: 'none', border: '1px solid var(--line-strong)', cursor: 'pointer',
          background: 'var(--bg-card)', color: 'var(--ink-muted)',
          width: 38, height: 38, borderRadius: '50%',
          display: 'flex', alignItems: 'center', justifyContent: 'center',
        }}>
          <Icon.Settings size={15}/>
        </button>
      </div>

      <div className="card" style={{ marginTop: 14, padding: 16 }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 10, marginBottom: 6 }}>
          <span style={{ color: st.kind==='overdue'?'var(--warn)':st.kind==='today'?'var(--accent)':'var(--primary)' }}>
            <Icon.Drop size={18}/>
          </span>
          <div className="serif" style={{ fontSize: 18, lineHeight: 1.2 }}>{statusLine}</div>
        </div>
        <div style={{ fontSize: 13, color: 'var(--ink-muted)', marginLeft: 28 }}>
          {plant.schedule.type === 'every' ? `Schema: var ${plant.schedule.days}:e dag` : 'Schema: när jorden är torr'}
        </div>
      </div>

      <div style={{ display: 'flex', gap: 8, marginTop: 14 }}>
        <button className="btn-water" style={{ flex: 1, height: 50 }} disabled={busy}
                onClick={() => { onWater(plant.id); onClose(); }}>
          <Icon.Drop size={17}/> Vattnat
        </button>
        <button className="btn-snooze" style={{
          padding: '0 16px', height: 50, background: 'var(--bg-card)',
          border: '1px solid var(--line-strong)', borderRadius: 999,
        }} onClick={() => { onSnooze(plant.id); onClose(); }}>
          <Icon.Snooze size={16}/> Imorgon
        </button>
      </div>

      <button onClick={() => { onChat(plant); onClose(); }} style={{
        marginTop: 12, width: '100%', height: 46,
        appearance: 'none', border: '1px solid var(--accent)',
        background: 'var(--accent-wash)', color: '#8B4516',
        borderRadius: 14, cursor: 'pointer',
        display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 8,
        font: '600 14px/1 Geist, system-ui, sans-serif',
      }}>
        <Icon.Sparkle size={15}/> Chatta om {plant.name}
      </button>

      {plant.fert && (
        <div className="card" style={{ marginTop: 14, padding: 14 }}>
          <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
            <div style={{
              width: 34, height: 34, borderRadius: 10,
              background: 'var(--accent-wash)', color: 'var(--accent)',
              display: 'flex', alignItems: 'center', justifyContent: 'center',
            }}>
              <Icon.Sparkle size={16}/>
            </div>
            <div style={{ flex: 1 }}>
              <div style={{ fontSize: 14, fontWeight: 500 }}>Gödning</div>
              <div style={{ fontSize: 12.5, color: 'var(--ink-subtle)', marginTop: 1 }}>
                Var {plant.fert.days}:e dag · senast {TV.formatLast(plant.fert.last)}
              </div>
            </div>
            <span className="pill accent" style={{ flexShrink: 0 }}>
              {fertDays > 0 ? `om ${fertDays}d` : fertDays === 0 ? 'idag' : `${-fertDays}d sen`}
            </span>
          </div>
          <div className="progress-track" style={{ marginTop: 12 }}>
            <div className="progress-fill" style={{
              width: `${Math.max(0, Math.min(100, ((Date.now() - plant.fert.last) / (plant.fert.days * TV.DAY)) * 100))}%`,
              background: 'linear-gradient(90deg, var(--accent-soft), var(--accent))',
            }}/>
          </div>
        </div>
      )}

      <div style={{ marginTop: 22 }}>
        <div className="eyebrow" style={{ marginBottom: 10 }}>Historik (senaste vattningar)</div>
        <div className="card" style={{ padding: 14 }}>
          {myHistory.length === 0 && (
            <div style={{ fontSize: 13, color: 'var(--ink-muted)', padding: 4 }}>Inga händelser ännu.</div>
          )}
          {myHistory.slice(0, 6).map((h, i) => (
            <div key={h.id || i} style={{
              display: 'flex', alignItems: 'center', gap: 10,
              padding: '8px 0',
              borderBottom: i < Math.min(myHistory.length, 6) - 1 ? '1px solid var(--line)' : 'none',
            }}>
              <span style={{ color: h.kind === 'fert' ? 'var(--accent)' : 'var(--water)' }}>
                {h.kind === 'fert' ? <Icon.Sparkle size={14}/> : <Icon.Drop size={14}/>}
              </span>
              <div style={{ flex: 1, fontSize: 13.5, color: 'var(--ink-muted)' }}>
                {h.kind === 'fert' ? 'Gödad' : 'Vattnad'} {TV.formatLast(h.at)}
              </div>
              <span style={{ fontSize: 12, color: 'var(--ink-faint)' }} className="numerical">
                {new Date(h.at).toLocaleDateString('sv-SE', { day:'numeric', month:'short' })}
              </span>
            </div>
          ))}
        </div>
      </div>
    </Sheet>
  );
}

window.PlantsScreen = PlantsScreen;
window.PlantSheet = PlantSheet;