// Tidvattnaren — admin-formulär (PlantForm, ZoneForm) + Sheet-omslag.
// Sheet är samma komponent på mobil (bottom-sheet) och desktop (centrerad modal),
// CSS hanterar layout-skillnaden via .sheet-overlay / .sheet-body.

function Sheet({ children, onClose, title, onDelete, deleteLabel }) {
  React.useEffect(() => {
    const onKey = (e) => { if (e.key === 'Escape') onClose(); };
    window.addEventListener('keydown', onKey);
    return () => window.removeEventListener('keydown', onKey);
  }, [onClose]);

  return (
    <div className="sheet-overlay" onClick={onClose}>
      <div className="sheet-body" onClick={(e) => e.stopPropagation()}>
        <div className="sheet-grabber"><div/></div>
        <div style={{ padding: '14px 22px 26px' }}>
          {title && (
            <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 18 }}>
              <h2 className="serif" style={{ fontSize: 22, lineHeight: 1.1 }}>{title}</h2>
              <button onClick={onClose} aria-label="Stäng" style={{
                appearance: 'none', border: 0, background: 'var(--bg-card)',
                width: 32, height: 32, borderRadius: '50%', cursor: 'pointer',
                color: 'var(--ink-muted)',
                display: 'flex', alignItems: 'center', justifyContent: 'center',
                boxShadow: 'var(--shadow-card)',
              }}>
                <Icon.X size={14}/>
              </button>
            </div>
          )}
          {children}
        </div>
      </div>
    </div>
  );
}

const HUE_OPTIONS = [
  'tomato','cucumber','chili','pea','herb','basil',
  'root','leafy','berry','flower','mint','onion',
];

function HueSwatch({ hue, active, onClick }) {
  const h = TV.HUES[hue];
  return (
    <button type="button" className={`hue-swatch ${active ? 'active' : ''}`}
            style={{ background: h.bg }} onClick={onClick} title={hue}>
      <svg width="22" height="22" viewBox="0 0 24 24">
        <path d="M12 22 V 11" stroke={h.leaf} strokeWidth="1.6" strokeLinecap="round" fill="none"/>
        <path d="M12 12 C 12 8.5, 9.5 6.5, 6 6.5 C 6 10, 8.5 12, 12 12 z" fill={h.accent} stroke={h.leaf} strokeWidth="0.8"/>
        <path d="M12 14 C 12 10.5, 14.5 8.5, 18 8.5 C 18 12, 15.5 14, 12 14 z" fill={h.leaf} stroke={h.leaf} strokeWidth="0.8"/>
      </svg>
    </button>
  );
}

// ─────── PlantForm ───────
// Used för både "Lägg till" och "Redigera" — initialPlant=null betyder ny.
function PlantForm({ initialPlant, zones, onSave, onDelete, onClose }) {
  const isEdit = !!initialPlant;
  const [name, setName] = React.useState(initialPlant?.name || '');
  const [zone, setZone] = React.useState(initialPlant?.zone || zones[0]?.id || '');
  const [hue, setHue] = React.useState(initialPlant?.hue || 'herb');
  const [scheduleType, setScheduleType] = React.useState(initialPlant?.schedule?.type || 'every');
  const [scheduleDays, setScheduleDays] = React.useState(initialPlant?.schedule?.days || 2);
  const [hasFert, setHasFert] = React.useState(!!initialPlant?.fert);
  const [fertDays, setFertDays] = React.useState(initialPlant?.fert?.days || 14);
  const [busy, setBusy] = React.useState(false);
  const [error, setError] = React.useState(null);

  const submit = async (e) => {
    e.preventDefault();
    if (!name.trim()) { setError('Namn behövs'); return; }
    setBusy(true);
    setError(null);
    const body = {
      name: name.trim(),
      zone,
      hue,
      schedule: scheduleType === 'every'
        ? { type: 'every', days: Number(scheduleDays) || 2 }
        : { type: 'when_dry' },
      fert: hasFert
        ? { days: Number(fertDays) || 14, last: initialPlant?.fert?.last || Date.now() }
        : null,
    };
    try {
      if (isEdit) {
        const updated = await TV.apiPost(`/api/plants/${initialPlant.id}`, body, 'PATCH');
        onSave(updated);
      } else {
        const created = await TV.apiPost('/api/plants', body);
        onSave(created);
      }
    } catch (err) {
      setError(err.message);
    } finally {
      setBusy(false);
    }
  };

  const handleDelete = async () => {
    if (!confirm(`Vill du verkligen radera ${initialPlant.name}?`)) return;
    setBusy(true);
    try {
      await TV.apiPost(`/api/plants/${initialPlant.id}`, null, 'DELETE');
      onDelete(initialPlant.id);
    } catch (err) {
      setError(err.message);
      setBusy(false);
    }
  };

  return (
    <Sheet title={isEdit ? 'Redigera planta' : 'Lägg till planta'} onClose={onClose}>
      <form onSubmit={submit}>
        <div className="form-group">
          <label className="form-label">Namn</label>
          <input className="form-input" value={name} onChange={e => setName(e.target.value)}
                 placeholder="t.ex. Tomater Bingo" autoFocus/>
        </div>

        <div className="form-group">
          <label className="form-label">Zon</label>
          <select className="form-select" value={zone} onChange={e => setZone(e.target.value)}>
            {zones.map(z => <option key={z.id} value={z.id}>{z.name}</option>)}
          </select>
        </div>

        <div className="form-group">
          <label className="form-label">Färg / växt-typ</label>
          <div className="hue-grid">
            {HUE_OPTIONS.map(h => (
              <HueSwatch key={h} hue={h} active={hue === h} onClick={() => setHue(h)}/>
            ))}
          </div>
          <div className="form-help">Bestämmer vilken liten illustration som visas på plantan.</div>
        </div>

        <div className="form-group">
          <label className="form-label">Vattnings-schema</label>
          <div className="form-segment">
            <button type="button" className={scheduleType === 'every' ? 'active' : ''}
                    onClick={() => setScheduleType('every')}>Var X:e dag</button>
            <button type="button" className={scheduleType === 'when_dry' ? 'active' : ''}
                    onClick={() => setScheduleType('when_dry')}>När jorden är torr</button>
          </div>
          {scheduleType === 'every' && (
            <div style={{ marginTop: 10 }}>
              <input type="number" className="form-input" value={scheduleDays}
                     min="1" max="60"
                     onChange={e => setScheduleDays(e.target.value)}/>
              <div className="form-help">Plantan markeras "Idag" när det gått så här många dagar sen senaste vattning.</div>
            </div>
          )}
        </div>

        <div className="form-group">
          <label className="form-checkbox">
            <input type="checkbox" checked={hasFert} onChange={e => setHasFert(e.target.checked)}/>
            <span style={{ fontSize: 14, color: 'var(--ink)' }}>Plantan har separat gödningsschema</span>
          </label>
          {hasFert && (
            <div style={{ marginTop: 6 }}>
              <label className="form-label">Gödning var X:e dag</label>
              <input type="number" className="form-input" value={fertDays}
                     min="1" max="120"
                     onChange={e => setFertDays(e.target.value)}/>
            </div>
          )}
        </div>

        {error && (
          <div style={{
            padding: '10px 12px', borderRadius: 10,
            background: '#F7E0CF', color: 'var(--warn)',
            fontSize: 13, marginTop: 10,
          }}>{error}</div>
        )}

        <div className="form-actions">
          {isEdit && (
            <button type="button" className="btn-danger" onClick={handleDelete} disabled={busy}>
              Radera
            </button>
          )}
          <button type="button" className="btn-secondary" onClick={onClose} disabled={busy}>Avbryt</button>
          <button type="submit" className="btn-primary" disabled={busy}>
            {busy ? 'Sparar…' : (isEdit ? 'Spara' : 'Lägg till')}
          </button>
        </div>
      </form>
    </Sheet>
  );
}

// ─────── ZoneForm ───────
function ZoneForm({ initialZone, plants, onSave, onDelete, onClose }) {
  const isEdit = !!initialZone;
  const [name, setName] = React.useState(initialZone?.name || '');
  const [emoji, setEmoji] = React.useState(initialZone?.emoji || '🌿');
  const [busy, setBusy] = React.useState(false);
  const [error, setError] = React.useState(null);

  const inUse = isEdit ? plants.filter(p => p.zone === initialZone.id).length : 0;

  const submit = async (e) => {
    e.preventDefault();
    if (!name.trim()) { setError('Namn behövs'); return; }
    setBusy(true);
    setError(null);
    try {
      if (isEdit) {
        const updated = await TV.apiPost(`/api/zones/${initialZone.id}`, { name: name.trim(), emoji }, 'PATCH');
        onSave(updated);
      } else {
        const created = await TV.apiPost('/api/zones', { name: name.trim(), emoji });
        onSave(created);
      }
    } catch (err) {
      setError(err.message);
    } finally {
      setBusy(false);
    }
  };

  const handleDelete = async () => {
    if (inUse > 0) {
      alert(`Kan inte radera — ${inUse} plantor ligger i den här zonen. Flytta eller radera dem först.`);
      return;
    }
    if (!confirm(`Radera zonen ${initialZone.name}?`)) return;
    setBusy(true);
    try {
      await TV.apiPost(`/api/zones/${initialZone.id}`, null, 'DELETE');
      onDelete(initialZone.id);
    } catch (err) {
      setError(err.message);
      setBusy(false);
    }
  };

  const EMOJI_PRESETS = ['🌿','🪴','🌱','🥕','🍓','🧅','🌸','🌳','🌻','🌺','🍅','🌶️'];

  return (
    <Sheet title={isEdit ? 'Redigera zon' : 'Lägg till zon'} onClose={onClose}>
      <form onSubmit={submit}>
        <div className="form-group">
          <label className="form-label">Namn</label>
          <input className="form-input" value={name} onChange={e => setName(e.target.value)}
                 placeholder="t.ex. Pallkrage 5" autoFocus/>
        </div>

        <div className="form-group">
          <label className="form-label">Emoji</label>
          <div style={{ display: 'flex', gap: 6, flexWrap: 'wrap' }}>
            {EMOJI_PRESETS.map(e => (
              <button key={e} type="button"
                      onClick={() => setEmoji(e)}
                      style={{
                        appearance: 'none', border: 0, cursor: 'pointer',
                        width: 44, height: 44, borderRadius: 10,
                        background: emoji === e ? 'var(--primary-wash)' : 'var(--bg-card)',
                        boxShadow: emoji === e ? '0 0 0 2px var(--primary)' : '0 0 0 1px var(--line)',
                        fontSize: 22,
                      }}>{e}</button>
            ))}
          </div>
        </div>

        {error && (
          <div style={{
            padding: '10px 12px', borderRadius: 10,
            background: '#F7E0CF', color: 'var(--warn)',
            fontSize: 13, marginTop: 10,
          }}>{error}</div>
        )}

        <div className="form-actions">
          {isEdit && (
            <button type="button" className="btn-danger" onClick={handleDelete} disabled={busy}>
              Radera{inUse > 0 ? ` (${inUse}!)` : ''}
            </button>
          )}
          <button type="button" className="btn-secondary" onClick={onClose} disabled={busy}>Avbryt</button>
          <button type="submit" className="btn-primary" disabled={busy}>
            {busy ? 'Sparar…' : (isEdit ? 'Spara' : 'Lägg till')}
          </button>
        </div>
      </form>
    </Sheet>
  );
}

window.Sheet = Sheet;
window.PlantForm = PlantForm;
window.ZoneForm = ZoneForm;