<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Garden HQ Pro</title>
  <style>
    :root{
      --bg:#f4f1e8;
      --panel:#ffffff;
      --panel2:#f8f6f0;
      --text:#243024;
      --muted:#667066;
      --line:#d9ded5;
      --brand:#4f7c4a;
      --brand2:#6f9e67;
      --danger:#b54d4d;
      --warn:#cc8a2e;
      --accent:#e8f2e3;
      --shadow:0 10px 24px rgba(0,0,0,.08);
      --r:16px;
    }

    *{box-sizing:border-box}
    body{
      margin:0;
      font-family:Arial,Helvetica,sans-serif;
      background:linear-gradient(180deg,#ece7db 0,#f4f1e8 160px);
      color:var(--text);
    }

    header{
      background:linear-gradient(135deg,var(--brand),var(--brand2));
      color:#fff;
      padding:22px 18px;
      box-shadow:var(--shadow);
    }

    header h1{
      margin:0 0 8px 0;
      font-size:2rem;
    }

    header p{
      margin:0;
      opacity:.95;
    }

    .container{
      max-width:1450px;
      margin:0 auto;
      padding:16px;
      display:grid;
      gap:16px;
    }

    .grid{display:grid;gap:16px}
    .grid-2{grid-template-columns:1fr 1fr}
    .grid-3{grid-template-columns:repeat(3,1fr)}
    .grid-auto{grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}

    .section{
      background:var(--panel);
      border:1px solid var(--line);
      border-radius:var(--r);
      padding:16px;
      box-shadow:var(--shadow);
    }

    .section h2{
      margin:0 0 12px 0;
      font-size:1.2rem;
    }

    .toolbar{
      display:flex;
      flex-wrap:wrap;
      gap:10px;
      align-items:center;
      justify-content:space-between;
      margin-bottom:12px;
    }

    .toolbar-left,.toolbar-right{
      display:flex;
      flex-wrap:wrap;
      gap:10px;
      align-items:center;
    }

    .field{
      display:grid;
      gap:6px;
    }

    .field label{
      font-size:.9rem;
      color:var(--muted);
      font-weight:700;
    }

    input,select,textarea{
      width:100%;
      padding:10px 12px;
      border:1px solid var(--line);
      border-radius:10px;
      font:inherit;
      background:#fff;
      color:var(--text);
    }

    textarea{
      min-height:88px;
      resize:vertical;
    }

    button{
      border:none;
      border-radius:10px;
      padding:10px 14px;
      background:var(--brand);
      color:#fff;
      font-weight:700;
      cursor:pointer;
    }

    button:hover{filter:brightness(.96)}
    button.secondary{background:#6f7d6d}
    button.danger{background:var(--danger)}
    button.warn{background:var(--warn)}

    .cards{
      display:grid;
      grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
      gap:12px;
    }

    .card{
      background:var(--panel2);
      border:1px solid #e6eadf;
      border-left:6px solid var(--brand);
      border-radius:12px;
      padding:12px;
    }

    .card h3{
      margin:0 0 8px 0;
      font-size:1.05rem;
    }

    .muted{
      color:var(--muted);
      font-size:.92rem;
    }

    .pill-row{
      display:flex;
      gap:6px;
      flex-wrap:wrap;
      margin:8px 0;
    }

    .pill{
      background:var(--accent);
      color:#2d512c;
      border-radius:999px;
      padding:5px 10px;
      font-size:.78rem;
      font-weight:700;
      border:1px solid #d7e6cf;
    }

    .small-actions{
      display:flex;
      gap:8px;
      flex-wrap:wrap;
      margin-top:10px;
    }

    .task-list{
      display:grid;
      gap:10px;
    }

    .task{
      background:#fbfbfb;
      border:1px solid var(--line);
      border-radius:12px;
      padding:12px;
    }

    .task strong{display:block;margin-bottom:4px}

    .bed-plant{
      background:#edf5e8;
      border:1px solid #d7e6cf;
      border-radius:10px;
      padding:8px;
      margin-top:8px;
    }

    .status{
      padding:10px 12px;
      border-radius:10px;
      background:#eef6ea;
      border:1px solid #d9e8d1;
      color:#2b5728;
      font-size:.92rem;
    }

    .status.error{
      background:#fff1f1;
      border-color:#f0cccc;
      color:#8c2f2f;
    }

    .planner-grid{
      display:grid;
      grid-template-columns:330px 1fr;
      gap:16px;
      min-height:420px;
    }

    .bed-list{
      display:grid;
      gap:10px;
    }

    .bed-list-item{
      padding:12px;
      background:#fff;
      border:1px solid var(--line);
      border-radius:12px;
      cursor:pointer;
    }

    .bed-list-item.active{
      outline:2px solid var(--brand);
      background:#f7fbf5;
    }

    .canvas{
      background:
        radial-gradient(rgba(70,50,30,.06) 1px, transparent 1px),
        linear-gradient(180deg,#f8f2e8,#f4ecdf);
      background-size:16px 16px, auto;
      border:2px dashed #cdbfa8;
      border-radius:18px;
      position:relative;
      overflow:hidden;
      min-height:420px;
    }

    .bed-box{
      position:absolute;
      background:linear-gradient(180deg,#7b5f45,#654933);
      border:3px solid #503721;
      color:#fff;
      border-radius:16px;
      box-shadow:0 10px 20px rgba(0,0,0,.18);
      min-width:150px;
      min-height:100px;
      user-select:none;
    }

    .bed-head{
      padding:10px 12px;
      border-bottom:1px solid rgba(255,255,255,.12);
      cursor:grab;
      display:flex;
      justify-content:space-between;
      gap:8px;
      align-items:center;
      font-weight:700;
    }

    .bed-body{
      padding:10px;
      display:grid;
      gap:8px;
      align-content:start;
    }

    .chip{
      display:inline-flex;
      align-items:center;
      gap:6px;
      background:rgba(255,255,255,.14);
      border:1px solid rgba(255,255,255,.14);
      border-radius:999px;
      padding:5px 9px;
      font-size:.8rem;
      margin:2px;
    }

    .chip button{
      padding:2px 6px;
      font-size:.7rem;
      background:rgba(255,255,255,.18);
      border-radius:999px;
    }

    .calendar{
      display:grid;
      grid-template-columns:repeat(12,1fr);
      gap:8px;
    }

    .month{
      background:#fff;
      border:1px solid var(--line);
      border-radius:12px;
      padding:10px;
      min-height:150px;
    }

    .month h4{
      margin:0 0 8px 0;
      font-size:.95rem;
    }

    .cal-item{
      font-size:.8rem;
      padding:7px 8px;
      border-radius:8px;
      background:#f6f9f3;
      border:1px solid #dce7d3;
      margin-bottom:6px;
    }

    .legend{
      display:flex;
      flex-wrap:wrap;
      gap:8px;
      margin-top:10px;
    }

    .legend span{
      font-size:.82rem;
      padding:6px 10px;
      border-radius:999px;
      background:#f0f6ec;
      border:1px solid #dce7d3;
    }

    .hidden{display:none}

    @media (max-width:1100px){
      .grid-2,.grid-3,.planner-grid,.calendar{grid-template-columns:1fr}
    }
  </style>
</head>
<body>
  <header>
    <h1>🌱 Garden HQ Pro</h1>
    <p>Plant database, bed planner, calendar, task engine, companion checks, and AI garden help.</p>
  </header>

  <div class="container">

    <div id="statusBox" class="status">Ready.</div>

    <div class="section">
      <div class="toolbar">
        <div class="toolbar-left">
          <button onclick="showTab('dashboard')">Dashboard</button>
          <button onclick="showTab('plants')">Plants</button>
          <button onclick="showTab('beds')">Beds</button>
          <button onclick="showTab('calendar')">Calendar</button>
          <button onclick="showTab('tasks')">Tasks</button>
          <button onclick="showTab('ai')">AI</button>
        </div>
        <div class="toolbar-right">
          <button class="secondary" onclick="loadAll()">Refresh All</button>
        </div>
      </div>
    </div>

    <div id="tab-dashboard" class="grid">
      <div class="grid grid-3">
        <div class="section"><h2>Plants</h2><div id="dashPlants" class="status">0</div></div>
        <div class="section"><h2>Beds</h2><div id="dashBeds" class="status">0</div></div>
        <div class="section"><h2>Tasks</h2><div id="dashTasks" class="status">0</div></div>
      </div>

      <div class="grid grid-2">
        <div class="section">
          <div class="toolbar">
            <h2 style="margin:0">What Should I Plant Now?</h2>
            <button class="secondary" onclick="loadSuggestions()">Refresh</button>
          </div>
          <div id="suggestions" class="task-list"></div>
        </div>

        <div class="section">
          <h2>Quick Tips</h2>
          <div class="task-list">
            <div class="task"><strong>Mulch heavily</strong><div class="muted">Helps with weeds, water retention, and root temperature.</div></div>
            <div class="task"><strong>Harvest often</strong><div class="muted">Beans, cucumbers, zucchini, and herbs do better when picked regularly.</div></div>
            <div class="task"><strong>Do a pest scan weekly</strong><div class="muted">Check leaf undersides, stems, and new growth early.</div></div>
          </div>
        </div>
      </div>
    </div>

    <div id="tab-plants" class="grid hidden">
      <div class="grid grid-2">
        <div class="section">
          <h2>Add Plant</h2>
          <div class="grid grid-auto">
            <div class="field">
              <label>Plant Name</label>
              <input id="plant_name" placeholder="Tomato">
            </div>
            <div class="field">
              <label>Sun</label>
              <select id="plant_sun">
                <option value="full sun">Full sun</option>
                <option value="part sun">Part sun</option>
                <option value="shade">Shade</option>
              </select>
            </div>
            <div class="field">
              <label>Water</label>
              <select id="plant_water">
                <option value="low">Low</option>
                <option value="moderate">Moderate</option>
                <option value="high">High</option>
              </select>
            </div>
            <div class="field">
              <label>Season</label>
              <select id="plant_season">
                <option value="warm">Warm</option>
                <option value="cool">Cool</option>
              </select>
            </div>
            <div class="field">
              <label>Spacing Inches</label>
              <input id="plant_spacing" type="number" value="12">
            </div>
            <div class="field">
              <label>Planted Date</label>
              <input id="plant_date" type="date">
            </div>
          </div>
          <div class="field" style="margin-top:12px;">
            <label>Notes</label>
            <textarea id="plant_notes" placeholder="Companion notes, pests, how it did last season, wife's favorites..."></textarea>
          </div>
          <div class="small-actions">
            <button onclick="addPlant()">Add Plant</button>
            <button class="secondary" onclick="seedPlants()">Seed Starter Plants</button>
          </div>
        </div>

        <div class="section">
          <div class="toolbar">
            <h2 style="margin:0">Plant Database</h2>
            <button class="secondary" onclick="loadPlants()">Refresh</button>
          </div>
          <div id="plants" class="cards"></div>
        </div>
      </div>
    </div>

    <div id="tab-beds" class="grid hidden">
      <div class="grid grid-3">
        <div class="section">
          <h2>Add Bed</h2>
          <div class="grid">
            <div class="field">
              <label>Bed Name</label>
              <input id="bed_name" placeholder="Back Fence Bed">
            </div>
            <div class="field">
              <label>Width (ft)</label>
              <input id="bed_width" type="number" value="4">
            </div>
            <div class="field">
              <label>Length (ft)</label>
              <input id="bed_length" type="number" value="8">
            </div>
            <div class="field">
              <label>Notes</label>
              <textarea id="bed_notes" placeholder="Morning sun, near hose, gets hot in afternoon..."></textarea>
            </div>
            <button onclick="addBed()">Add Bed</button>
          </div>
        </div>

        <div class="section">
          <h2>Add Plant to Bed</h2>
          <div class="grid">
            <div class="field">
              <label>Choose Bed</label>
              <select id="assign_bed"></select>
            </div>
            <div class="field">
              <label>Choose Plant</label>
              <select id="assign_plant"></select>
            </div>
            <div class="field">
              <label>Count</label>
              <input id="assign_count" type="number" value="1">
            </div>
            <button onclick="addPlantToBed()">Assign Plant</button>
          </div>
        </div>

        <div class="section">
          <div class="toolbar">
            <h2 style="margin:0">Bed List</h2>
            <button class="secondary" onclick="loadBeds()">Refresh</button>
          </div>
          <div id="beds" class="cards"></div>
        </div>
      </div>

      <div class="section">
        <div class="toolbar">
          <h2 style="margin:0">Visual Bed Planner</h2>
          <button class="secondary" onclick="loadBeds()">Reload Planner</button>
        </div>
        <div class="planner-grid">
          <div>
            <div id="bedListPanel" class="bed-list"></div>
          </div>
          <div id="bedCanvas" class="canvas"></div>
        </div>
      </div>
    </div>

    <div id="tab-calendar" class="grid hidden">
      <div class="section">
        <div class="toolbar">
          <h2 style="margin:0">Planting Calendar</h2>
          <button class="secondary" onclick="renderCalendar()">Refresh</button>
        </div>
        <div id="calendarGrid" class="calendar"></div>
        <div class="legend">
          <span>Warm crops</span>
          <span>Cool crops</span>
          <span>Based on plant season and planted date</span>
        </div>
      </div>
    </div>

    <div id="tab-tasks" class="grid hidden">
      <div class="section">
        <div class="toolbar">
          <h2 style="margin:0">Weekly Tasks</h2>
          <button onclick="loadTasks()">Generate</button>
        </div>
        <div id="tasks" class="task-list"></div>
      </div>
    </div>

    <div id="tab-ai" class="grid hidden">
      <div class="section">
        <h2>AI Garden Assistant</h2>
        <div class="grid grid-2">
          <div class="field">
            <label>Ask a question</label>
            <textarea id="prompt" placeholder="My cucumber leaves are yellow with brown edges. What should I check first?"></textarea>
          </div>
          <div class="field">
            <label>Response</label>
            <div id="aiResponse" class="card" style="min-height:140px; white-space:pre-wrap;"></div>
          </div>
        </div>
        <div class="small-actions">
          <button onclick="askAI()">Ask AI</button>
          <button class="secondary" onclick="quickPrompt('What should I plant right now in raised beds?')">What to plant now</button>
          <button class="secondary" onclick="quickPrompt('How often should I water tomatoes in hot weather?')">Tomato watering</button>
          <button class="secondary" onclick="quickPrompt('What are common signs of aphids or squash bugs?')">Pest help</button>
        </div>
      </div>
    </div>

  </div>
<div class="section">
  <div class="toolbar">
    <h2 style="margin:0">Recommended Bed Layouts</h2>
    <button class="secondary" onclick="loadBedSuggestions()">Refresh</button>
  </div>
  <div id="bedSuggestions" class="cards"></div>
</div>
  <script>
    let plants = [];
    let beds = [];
    let tasks = [];
    let selectedBedId = null;
    const bedPositions = JSON.parse(localStorage.getItem("garden_hq_bed_positions") || "{}");

    const monthNames = [
      "Jan","Feb","Mar","Apr","May","Jun",
      "Jul","Aug","Sep","Oct","Nov","Dec"
    ];
    async function loadBedSuggestions() {
  const data = await apiGet("/bed_suggestions");
  const div = document.getElementById("bedSuggestions");
  if (!div) return;

  div.innerHTML = "";

  if (!data.length) {
    div.innerHTML = `<div class="card"><div class="muted">No beds yet, so there are no bed suggestions.</div></div>`;
    return;
  }

  for (const b of data) {
    div.innerHTML += `
      <div class="card">
        <h3>${esc(b.bed_name)}</h3>
        <div class="muted">${esc(b.summary)}</div>
        <div class="pill-row">
          ${(b.recommended || []).map(r => `
            <span class="pill">${esc(r.plant_name)} × ${esc(String(r.count))} (${esc(r.role)})</span>
          `).join("")}
        </div>
        <div style="margin-top:10px;">
          ${(b.notes || []).map(n => `<div class="muted">• ${esc(n)}</div>`).join("")}
        </div>
      </div>
    `;
  }
}
    function setStatus(msg, isError=false) {
      const box = document.getElementById("statusBox");
      box.textContent = msg;
      box.className = isError ? "status error" : "status";
    }

    function esc(str) {
      return String(str || "")
        .replaceAll("&","&amp;")
        .replaceAll("<","&lt;")
        .replaceAll(">","&gt;")
        .replaceAll('"',"&quot;");
    }

    async function apiGet(url) {
      const res = await fetch(url);
      if (!res.ok) {
        throw new Error(`GET ${url} failed with ${res.status}`);
      }
      return await res.json();
    }

    async function apiPost(url, body) {
      const res = await fetch(url, {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify(body)
      });
      if (!res.ok) {
        const text = await res.text();
        throw new Error(text || `POST ${url} failed with ${res.status}`);
      }
      return await res.json();
    }

    function showTab(name) {
      ["dashboard","plants","beds","calendar","tasks","ai"].forEach(tab => {
        document.getElementById(`tab-${tab}`).classList.toggle("hidden", tab !== name);
      });
    }

    async function loadPlants() {
      plants = await apiGet("/plants");
      const div = document.getElementById("plants");
      div.innerHTML = "";

      if (!plants.length) {
        div.innerHTML = `<div class="card"><div class="muted">No plants yet.</div></div>`;
      }

      for (const p of plants) {
        div.innerHTML += `
          <div class="card">
            <h3>${esc(p.name)}</h3>
            <div class="pill-row">
              <span class="pill">${esc(p.sun || "n/a")}</span>
              <span class="pill">${esc(p.water || "n/a")} water</span>
              <span class="pill">${esc(p.season || "n/a")} season</span>
              <span class="pill">${esc(String(p.spacing_inches || 12))}" spacing</span>
            </div>
            <div class="muted">${esc(p.notes || "No notes yet.")}</div>
            <div class="small-actions">
              <button class="danger" onclick="deletePlant(${p.id})">Delete</button>
            </div>
          </div>
        `;
      }

      document.getElementById("dashPlants").textContent = String(plants.length);
      populatePlantSelect();
      renderCalendar();
    }

    async function addPlant() {
      const payload = {
        name: document.getElementById("plant_name").value.trim(),
        sun: document.getElementById("plant_sun").value,
        water: document.getElementById("plant_water").value,
        season: document.getElementById("plant_season").value,
        spacing_inches: document.getElementById("plant_spacing").value,
        planted_date: document.getElementById("plant_date").value,
        notes: document.getElementById("plant_notes").value.trim()
      };

      if (!payload.name) {
        setStatus("Plant name is required.", true);
        return;
      }

      await apiPost("/add_plant", payload);

      document.getElementById("plant_name").value = "";
      document.getElementById("plant_spacing").value = "12";
      document.getElementById("plant_date").value = "";
      document.getElementById("plant_notes").value = "";

      setStatus(`Added plant: ${payload.name}`);
      await loadPlants();
      await loadTasks();
      await loadSuggestions();
    }

    async function deletePlant(id) {
      await apiPost("/delete_plant", { id });
      setStatus("Plant deleted.");
      await loadPlants();
      await loadBeds();
      await loadTasks();
    }

    async function seedPlants() {
      const starter = [
        { name:"Tomato", sun:"full sun", water:"moderate", season:"warm", spacing_inches:24, notes:"Heavy feeder. Good with basil." },
        { name:"Pepper", sun:"full sun", water:"moderate", season:"warm", spacing_inches:18, notes:"Likes heat." },
        { name:"Cucumber", sun:"full sun", water:"high", season:"warm", spacing_inches:12, notes:"Trellis helps." },
        { name:"Green Bean", sun:"full sun", water:"moderate", season:"warm", spacing_inches:4, notes:"Great for succession sowing." },
        { name:"Lettuce", sun:"part sun", water:"moderate", season:"cool", spacing_inches:8, notes:"Can bolt in heat." },
        { name:"Radish", sun:"full sun", water:"moderate", season:"cool", spacing_inches:2, notes:"Fast crop." },
        { name:"Basil", sun:"full sun", water:"moderate", season:"warm", spacing_inches:10, notes:"Great with tomatoes." }
      ];

      for (const p of starter) {
        await apiPost("/add_plant", p);
      }

      setStatus("Starter plant set added.");
      await loadPlants();
      await loadSuggestions();
    }

    async function loadBeds() {
      beds = await apiGet("/beds");
      const div = document.getElementById("beds");
      div.innerHTML = "";

      if (!beds.length) {
        div.innerHTML = `<div class="card"><div class="muted">No beds yet.</div></div>`;
      }

            for (const b of beds) {
        const area = (Number(b.width_ft || 0) * Number(b.length_ft || 0));
        let usedSlots = 0;

        for (const bp of (b.plants || [])) {
          const plant = plants.find(p => Number(p.id) === Number(bp.plant_id));
          const spacing = Number(plant?.spacing_inches || 12);
          const areaEach = (spacing * spacing) / 144;
          usedSlots += areaEach * Number(bp.count || 1);
        }

        const over = usedSlots > area;
        const conflictText = bedCompanionWarnings(b);

        div.innerHTML += `
          <div class="card">
            <h3>${esc(b.name)}</h3>
            <div class="pill-row">
              <span class="pill">${esc(String(b.length_ft))} ft × ${esc(String(b.width_ft))} ft</span>
              <span class="pill">${area.toFixed(1)} sq ft</span>
              <span class="pill">${usedSlots.toFixed(1)} used</span>
              ${over ? `<span class="pill" style="background:#fff1ea;border-color:#f0c4b3;color:#8b4020;">Crowded</span>` : ``}
            </div>
            <div class="muted">${esc(b.notes || "No notes yet.")}</div>
            ${conflictText ? `<div class="muted" style="margin-top:8px;color:#8b5a13;"><strong>Warnings:</strong> ${esc(conflictText)}</div>` : ``}
            ${(b.plants || []).map(bp => `
              <div class="bed-plant">
                <strong>${esc(bp.plant_name)}</strong> × ${esc(String(bp.count))}
                <div class="small-actions">
                  <button class="danger" onclick="removePlantFromBed(${bp.bed_plant_id})">Remove</button>
                </div>
              </div>
            `).join("") || `<div class="muted" style="margin-top:8px;">No plants assigned yet.</div>`}
            <div class="small-actions">
              <button class="danger" onclick="deleteBed(${b.id})">Delete Bed</button>
            </div>
          </div>
        `;
      }

      document.getElementById("dashBeds").textContent = String(beds.length);
      populateBedSelect();
      renderBedListPanel();
      renderBedCanvas();
    }

    async function addBed() {
      const payload = {
        name: document.getElementById("bed_name").value.trim(),
        width_ft: document.getElementById("bed_width").value,
        length_ft: document.getElementById("bed_length").value,
        notes: document.getElementById("bed_notes").value.trim()
      };

      if (!payload.name) {
        setStatus("Bed name is required.", true);
        return;
      }

      await apiPost("/add_bed", payload);

      document.getElementById("bed_name").value = "";
      document.getElementById("bed_width").value = "4";
      document.getElementById("bed_length").value = "8";
      document.getElementById("bed_notes").value = "";

      setStatus(`Added bed: ${payload.name}`);
      await loadBeds();
    }

    async function deleteBed(id) {
      await apiPost("/delete_bed", { id });
      delete bedPositions[id];
      localStorage.setItem("garden_hq_bed_positions", JSON.stringify(bedPositions));
      if (Number(selectedBedId) === Number(id)) selectedBedId = null;
      setStatus("Bed deleted.");
      await loadBeds();
    }

    async function addPlantToBed() {
      const bed_id = document.getElementById("assign_bed").value;
      const plant_id = document.getElementById("assign_plant").value;
      const count = Number(document.getElementById("assign_count").value || 1);

      if (!bed_id || !plant_id) {
        setStatus("Choose both a bed and a plant.", true);
        return;
      }

      await apiPost("/add_plant_to_bed", { bed_id, plant_id, count });
      document.getElementById("assign_count").value = "1";
      setStatus("Plant assigned to bed.");
      await loadBeds();
      await loadTasks();
    }

    async function removePlantFromBed(bed_plant_id) {
      await apiPost("/remove_plant_from_bed", { bed_plant_id });
      setStatus("Plant removed from bed.");
      await loadBeds();
      await loadTasks();
    }

    function populatePlantSelect() {
      const sel = document.getElementById("assign_plant");
      sel.innerHTML = plants.map(p => `<option value="${p.id}">${esc(p.name)}</option>`).join("");
    }

    function populateBedSelect() {
      const sel = document.getElementById("assign_bed");
      sel.innerHTML = beds.map(b => `<option value="${b.id}">${esc(b.name)}</option>`).join("");
    }

    function renderBedListPanel() {
      const panel = document.getElementById("bedListPanel");
      panel.innerHTML = "";

      if (!beds.length) {
        panel.innerHTML = `<div class="bed-list-item"><div class="muted">No beds to show.</div></div>`;
        return;
      }

      for (const b of beds) {
        const active = Number(selectedBedId) === Number(b.id);
        panel.innerHTML += `
          <div class="bed-list-item ${active ? "active" : ""}" onclick="selectBed(${b.id})">
            <strong>${esc(b.name)}</strong>
            <div class="muted">${esc(String(b.length_ft))} × ${esc(String(b.width_ft))} ft</div>
            <div class="muted">${(b.plants || []).length} assigned crop entries</div>
          </div>
        `;
      }

      if (!selectedBedId && beds[0]) {
        selectedBedId = beds[0].id;
      }
    }

    function selectBed(id) {
      selectedBedId = id;
      renderBedListPanel();
      renderBedCanvas();
    }

    function renderBedCanvas() {
      const canvas = document.getElementById("bedCanvas");
      canvas.innerHTML = "";

      for (const b of beds) {
        const pos = bedPositions[b.id] || { x: 20 + (Number(b.id) % 5) * 40, y: 20 + (Number(b.id) % 4) * 35 };
        const w = Math.max(150, Number(b.length_ft || 1) * 34);
        const h = Math.max(100, Number(b.width_ft || 1) * 34);

        const box = document.createElement("div");
        box.className = "bed-box";
        box.style.left = `${pos.x}px`;
        box.style.top = `${pos.y}px`;
        box.style.width = `${w}px`;
        box.style.height = `${h}px`;

        const chips = (b.plants || []).map(bp => `
          <span class="chip">
            ${esc(bp.plant_name)} × ${esc(String(bp.count))}
            <button onclick="event.stopPropagation(); removePlantFromBed(${bp.bed_plant_id})">x</button>
          </span>
        `).join("") || `<div class="muted" style="color:#e8f2e3;">No plants assigned</div>`;

        box.innerHTML = `
          <div class="bed-head">
            <span>${esc(b.name)}</span>
            <span>${esc(String(b.length_ft))}×${esc(String(b.width_ft))}</span>
          </div>
          <div class="bed-body">${chips}</div>
        `;

        makeDraggable(box, b.id);

        if (Number(selectedBedId) === Number(b.id)) {
          box.style.outline = "3px solid #b9d8ae";
        }

        box.addEventListener("click", () => {
          selectedBedId = b.id;
          renderBedListPanel();
          renderBedCanvas();
        });

        canvas.appendChild(box);
      }
    }

    function makeDraggable(el, bedId) {
      const handle = el.querySelector(".bed-head");
      let dragging = false;
      let startX = 0;
      let startY = 0;
      let origX = 0;
      let origY = 0;

      handle.addEventListener("mousedown", (e) => {
        dragging = true;
        startX = e.clientX;
        startY = e.clientY;
        const pos = bedPositions[bedId] || { x: parseInt(el.style.left || "0", 10), y: parseInt(el.style.top || "0", 10) };
        origX = pos.x;
        origY = pos.y;
        document.body.style.userSelect = "none";
      });

      window.addEventListener("mousemove", (e) => {
        if (!dragging) return;
        const dx = e.clientX - startX;
        const dy = e.clientY - startY;
        const x = Math.max(0, origX + dx);
        const y = Math.max(0, origY + dy);
        el.style.left = `${x}px`;
        el.style.top = `${y}px`;
      });

      window.addEventListener("mouseup", () => {
        if (!dragging) return;
        dragging = false;
        document.body.style.userSelect = "";
        bedPositions[bedId] = {
          x: parseInt(el.style.left || "0", 10),
          y: parseInt(el.style.top || "0", 10)
        };
        localStorage.setItem("garden_hq_bed_positions", JSON.stringify(bedPositions));
      });
    }

    function bedCompanionWarnings(bed) {
      const names = (bed.plants || []).map(x => String(x.plant_name || "").toLowerCase());
      const warnings = [];

      const has = (term) => names.some(n => n.includes(term));
      if (has("bean") && (has("onion") || has("garlic"))) warnings.push("Beans and onions/garlic are not ideal together");
      if (has("tomato") && has("potato")) warnings.push("Tomatoes and potatoes can share disease pressure");
      if (has("cucumber") && has("sage")) warnings.push("Cucumbers are often not a great match with sage");
      if (has("lettuce") && has("tomato")) warnings.push("Lettuce may bolt fast if shaded or overheated near dense tomatoes");

      return warnings.join("; ");
    }

    function renderCalendar() {
      const grid = document.getElementById("calendarGrid");
      if (!grid) return;
      grid.innerHTML = "";

      for (let i = 0; i < 12; i++) {
        grid.innerHTML += `<div class="month"><h4>${monthNames[i]}</h4><div id="month_${i}"></div></div>`;
      }

      for (const p of plants) {
        const monthIndex = getPlantMonthIndex(p);
        const target = document.getElementById(`month_${monthIndex}`);
        if (!target) continue;

        target.innerHTML += `
          <div class="cal-item">
            <strong>${esc(p.name)}</strong><br>
            <span class="muted">${esc(p.season || "n/a")} season • ${esc(p.sun || "n/a")}</span>
          </div>
        `;
      }
    }

    function getPlantMonthIndex(p) {
      if (p.planted_date) {
        const d = new Date(p.planted_date);
        if (!Number.isNaN(d.getTime())) return d.getMonth();
      }

      const m = new Date().getMonth();
      if ((p.season || "").toLowerCase() === "cool") {
        return Math.max(0, Math.min(11, m <= 5 ? m : 8));
      }
      return Math.max(0, Math.min(11, m));
    }

    async function loadTasks() {
      tasks = await apiGet("/tasks");
      const div = document.getElementById("tasks");
      div.innerHTML = "";

      if (!tasks.length) {
        div.innerHTML = `<div class="task"><div class="muted">No tasks yet.</div></div>`;
      }

      for (const t of tasks) {
        div.innerHTML += `
          <div class="task">
            <strong>${esc(t.title)}</strong>
            <div class="muted">${esc(t.body)}</div>
          </div>
        `;
      }

      document.getElementById("dashTasks").textContent = String(tasks.length);
    }

    async function loadSuggestions() {
      const suggestions = await apiGet("/suggestions");
      const div = document.getElementById("suggestions");
      div.innerHTML = "";

      for (const s of suggestions) {
        div.innerHTML += `
          <div class="task">
            <strong>Suggestion</strong>
            <div class="muted">${esc(s)}</div>
          </div>
        `;
      }
    }

    function quickPrompt(text) {
      document.getElementById("prompt").value = text;
      showTab("ai");
    }

    async function askAI() {
      const prompt = document.getElementById("prompt").value.trim();
      const output = document.getElementById("aiResponse");

      if (!prompt) {
        output.textContent = "Ask a garden question first.";
        return;
      }

      output.textContent = "Thinking...";

      try {
        const data = await apiPost("/ai", { prompt });
        output.textContent = data.response || "No response returned.";
      } catch (err) {
        output.textContent = "AI request failed. Check your API key and rebuild.";
        setStatus(`AI error: ${err.message}`, true);
      }
    }

    async function loadAll() {
  try {
    setStatus("Loading garden data...");
    await loadPlants();
    await loadBeds();
    await loadTasks();
    await loadSuggestions();
    await loadBedSuggestions();
    renderCalendar();
    setStatus("Garden HQ loaded.");
  } catch (err) {
    console.error(err);
    setStatus(`Load failed: ${err.message}`, true);
  }
}

    loadAll();
  </script>
</body>
</html>