API Error: Claude's response exceeded the 32000 output token maximum. To configure this behavior, set the CLAUDE_CODE_MAX_OUTPUT_TOKENS environment variable.
Propagation Planner</title>
  <script crossorigin src="https://unpkg.com/react@18/umd/react.production.min.js"></script>
  <script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.production.min.js"></script>
  <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
  <style>
    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
    :root {
      --bg-darkest: #0f1420;
      --bg-panel: #161d2e;
      --bg-card: #1d2740;
      --border: #2a3550;
      --accent: #52B788;
      --brand: #00AE42;
      --text-primary: #e8edf5;
      --text-secondary: #8fa3bf;
      --text-muted: #4d6080;
      --red: #ef4444;
      --orange: #f97316;
      --yellow: #eab308;
      --green: #22c55e;
      --purple: #a855f7;
      --teal: #14b8a6;
      --gold: #f59e0b;
      --sidebar: 220px;
    }
    html, body { background: var(--bg-darkest); color: var(--text-primary); font-family: Inter, system-ui, sans-serif; font-size: 14px; line-height: 1.5; height: 100%; -webkit-font-smoothing: antialiased; }
    .app { display: flex; height: 100vh; overflow: hidden; }
    /* Sidebar */
    .sidebar { width: var(--sidebar); min-width: var(--sidebar); background: var(--bg-panel); border-right: 1px solid var(--border); display: flex; flex-direction: column; overflow-y: auto; flex-shrink: 0; }
    .sidebar-logo { padding: 20px 16px 16px; border-bottom: 1px solid var(--border); }
    .sidebar-logo-title { font-size: 15px; font-weight: 700; color: var(--accent); letter-spacing: -0.3px; }
    .sidebar-logo-sub { font-size: 11px; color: var(--text-muted); margin-top: 2px; }
    .sidebar-nav { padding: 10px 8px; flex: 1; }
    .nav-section { margin-bottom: 6px; }
    .nav-section-label { font-size: 10px; font-weight: 600; color: var(--text-muted); letter-spacing: 0.8px; text-transform: uppercase; padding: 8px 8px 4px; }
    .nav-item { display: flex; align-items: center; gap: 9px; padding: 8px 10px; border-radius: 7px; cursor: pointer; color: var(--text-secondary); font-size: 13px; transition: all 0.15s; margin-bottom: 1px; }
    .nav-item:hover { background: rgba(82,183,136,0.08); color: var(--text-primary); }
    .nav-item.active { background: rgba(82,183,136,0.15); color: var(--accent); font-weight: 500; }
    .nav-icon { width: 16px; text-align: center; font-size: 14px; }
    /* Main */
    .main { flex: 1; display: flex; flex-direction: column; overflow: hidden; }
    .topbar { height: 52px; background: var(--bg-panel); border-bottom: 1px solid var(--border); display: flex; align-items: center; justify-content: space-between; padding: 0 20px; flex-shrink: 0; }
    .topbar-title { font-size: 16px; font-weight: 600; }
    .topbar-right { display: flex; align-items: center; gap: 12px; }
    .content { flex: 1; overflow-y: auto; padding: 24px; }
    /* Cards */
    .card { background: var(--bg-card); border: 1px solid var(--border); border-radius: 10px; padding: 20px; margin-bottom: 16px; }
    .card-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }
    .card-title { font-size: 14px; font-weight: 600; color: var(--text-primary); }
    /* Stat grid */
    .stat-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 12px; margin-bottom: 20px; }
    .stat-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: 10px; padding: 16px; }
    .stat-label { font-size: 11px; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 6px; }
    .stat-value { font-size: 26px; font-weight: 700; line-height: 1; }
    .stat-sub { font-size: 11px; color: var(--text-secondary); margin-top: 4px; }
    .stat-green { color: var(--green); }
    .stat-yellow { color: var(--yellow); }
    .stat-red { color: var(--red); }
    .stat-teal { color: var(--teal); }
    .stat-purple { color: var(--purple); }
    .stat-gold { color: var(--gold); }
    /* Buttons */
    .btn { display: inline-flex; align-items: center; gap: 6px; padding: 7px 14px; border-radius: 7px; font-size: 13px; font-weight: 500; cursor: pointer; border: none; transition: all 0.15s; }
    .btn-primary { background: var(--accent); color: #0f1420; }
    .btn-primary:hover { background: #63d4a0; }
    .btn-secondary { background: var(--bg-panel); color: var(--text-secondary); border: 1px solid var(--border); }
    .btn-secondary:hover { border-color: var(--accent); color: var(--accent); }
    .btn-danger { background: rgba(239,68,68,0.15); color: var(--red); border: 1px solid rgba(239,68,68,0.3); }
    .btn-sm { padding: 4px 10px; font-size: 12px; }
    .btn-xs { padding: 3px 8px; font-size: 11px; border-radius: 5px; }
    /* Badges/Pills */
    .badge { display: inline-flex; align-items: center; padding: 2px 8px; border-radius: 20px; font-size: 11px; font-weight: 500; }
    .badge-teal { background: rgba(20,184,166,0.15); color: var(--teal); }
    .badge-green { background: rgba(34,197,94,0.15); color: var(--green); }
    .badge-purple { background: rgba(168,85,247,0.15); color: var(--purple); }
    .badge-gold { background: rgba(245,158,11,0.15); color: var(--gold); }
    .badge-yellow { background: rgba(234,179,8,0.15); color: var(--yellow); }
    .badge-red { background: rgba(239,68,68,0.15); color: var(--red); }
    .badge-gray { background: rgba(77,96,128,0.3); color: var(--text-secondary); }
    .badge-orange { background: rgba(249,115,22,0.15); color: var(--orange); }
    /* Tables */
    .table-wrap { overflow-x: auto; }
    table { width: 100%; border-collapse: collapse; }
    th { text-align: left; font-size: 11px; font-weight: 600; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.5px; padding: 8px 12px; border-bottom: 1px solid var(--border); white-space: nowrap; }
    td { padding: 10px 12px; border-bottom: 1px solid rgba(42,53,80,0.5); font-size: 13px; }
    tr:last-child td { border-bottom: none; }
    tr:hover td { background: rgba(82,183,136,0.04); }
    /* Forms */
    .form-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 14px; }
    .form-group { display: flex; flex-direction: column; gap: 5px; }
    .form-group.full { grid-column: 1 / -1; }
    label { font-size: 12px; color: var(--text-secondary); font-weight: 500; }
    input, select, textarea { background: var(--bg-panel); border: 1px solid var(--border); border-radius: 6px; color: var(--text-primary); padding: 7px 10px; font-size: 13px; width: 100%; transition: border-color 0.15s; }
    input:focus, select:focus, textarea:focus { outline: none; border-color: var(--accent); }
    textarea { resize: vertical; min-height: 70px; }
    select option { background: var(--bg-panel); }
    /* Modal */
    .modal-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.7); z-index: 200; display: flex; align-items: center; justify-content: center; padding: 20px; }
    .modal { background: var(--bg-card); border: 1px solid var(--border); border-radius: 12px; width: 100%; max-width: 680px; max-height: 90vh; overflow-y: auto; }
    .modal-header { display: flex; align-items: center; justify-content: space-between; padding: 20px 24px 16px; border-bottom: 1px solid var(--border); }
    .modal-title { font-size: 16px; font-weight: 600; }
    .modal-body { padding: 20px 24px; }
    .modal-footer { padding: 16px 24px; border-top: 1px solid var(--border); display: flex; justify-content: flex-end; gap: 10px; }
    .close-btn { background: none; border: none; color: var(--text-muted); cursor: pointer; font-size: 20px; line-height: 1; padding: 4px; }
    .close-btn:hover { color: var(--text-primary); }
    /* Grid layouts */
    .two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
    .three-col { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 16px; }
    /* Batch cards */
    .batch-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 14px; }
    .batch-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: 10px; padding: 16px; transition: border-color 0.15s; }
    .batch-card:hover { border-color: rgba(82,183,136,0.4); }
    .batch-card-header { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 10px; }
    .batch-id { font-size: 11px; color: var(--text-muted); font-weight: 600; letter-spacing: 0.5px; }
    .batch-strain { font-size: 15px; font-weight: 600; margin-top: 2px; }
    .batch-meta { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0; }
    .batch-dates { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-top: 10px; border-top: 1px solid var(--border); padding-top: 10px; }
    .date-item { font-size: 11px; }
    .date-label { color: var(--text-muted); }
    .date-val { color: var(--text-primary); font-weight: 500; }
    .batch-actions { display: flex; gap: 6px; margin-top: 12px; flex-wrap: wrap; }
    /* Timeline / Gantt */
    .gantt-wrap { overflow-x: auto; }
    .gantt-row { display: flex; align-items: center; margin-bottom: 6px; min-height: 36px; }
    .gantt-label { width: 180px; min-width: 180px; font-size: 12px; padding-right: 12px; color: var(--text-secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .gantt-track { flex: 1; background: rgba(42,53,80,0.3); border-radius: 4px; height: 24px; position: relative; }
    .gantt-bar { position: absolute; height: 24px; border-radius: 4px; display: flex; align-items: center; padding: 0 6px; font-size: 10px; font-weight: 600; white-space: nowrap; overflow: hidden; }
    /* Calendar */
    .cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
    .cal-day-header { text-align: center; font-size: 11px; color: var(--text-muted); font-weight: 600; padding: 6px 0; }
    .cal-day { background: var(--bg-card); border: 1px solid var(--border); border-radius: 6px; min-height: 90px; padding: 6px; }
    .cal-day.today { border-color: var(--accent); }
    .cal-day.other-month { opacity: 0.4; }
    .cal-day-num { font-size: 12px; font-weight: 600; margin-bottom: 4px; }
    .cal-event { font-size: 10px; background: rgba(82,183,136,0.15); color: var(--accent); border-radius: 3px; padding: 2px 5px; margin-bottom: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: pointer; }
    .cal-event.clone { background: rgba(20,184,166,0.2); color: var(--teal); }
    .cal-event.harvest { background: rgba(245,158,11,0.2); color: var(--gold); }
    .cal-event.flip { background: rgba(168,85,247,0.2); color: var(--purple); }
    .cal-event.transplant { background: rgba(34,197,94,0.2); color: var(--green); }
    /* Priority */
    .priority-urgent { color: var(--red); }
    .priority-high { color: var(--orange); }
    .priority-medium { color: var(--yellow); }
    .priority-low { color: var(--text-secondary); }
    /* Tabs */
    .tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--border); margin-bottom: 20px; }
    .tab { padding: 8px 16px; font-size: 13px; cursor: pointer; color: var(--text-secondary); border-bottom: 2px solid transparent; margin-bottom: -1px; transition: all 0.15s; }
    .tab:hover { color: var(--text-primary); }
    .tab.active { color: var(--accent); border-bottom-color: var(--accent); font-weight: 500; }
    /* Scheduler */
    .scheduler-timeline { background: var(--bg-panel); border: 1px solid var(--border); border-radius: 10px; padding: 20px; margin-top: 20px; }
    .timeline-row { display: flex; align-items: center; padding: 8px 0; border-bottom: 1px solid rgba(42,53,80,0.5); }
    .timeline-row:last-child { border-bottom: none; }
    .timeline-event { font-size: 13px; font-weight: 600; width: 160px; }
    .timeline-date { font-size: 13px; color: var(--accent); font-weight: 500; width: 120px; }
    .timeline-days { font-size: 12px; color: var(--text-muted); }
    .timeline-connector { width: 20px; text-align: center; color: var(--text-muted); font-size: 16px; }
    /* Performance */
    .perf-bar-wrap { margin-bottom: 12px; }
    .perf-bar-label { display: flex; justify-content: space-between; font-size: 12px; margin-bottom: 4px; }
    .perf-bar-track { height: 8px; background: rgba(42,53,80,0.5); border-radius: 4px; overflow: hidden; }
    .perf-bar-fill { height: 100%; border-radius: 4px; transition: width 0.4s; }
    /* Alert banner */
    .alert { padding: 10px 14px; border-radius: 8px; margin-bottom: 12px; font-size: 13px; display: flex; align-items: center; gap: 8px; }
    .alert-yellow { background: rgba(234,179,8,0.1); border: 1px solid rgba(234,179,8,0.3); color: var(--yellow); }
    .alert-red { background: rgba(239,68,68,0.1); border: 1px solid rgba(239,68,68,0.3); color: var(--red); }
    .alert-green { background: rgba(82,183,136,0.1); border: 1px solid rgba(82,183,136,0.3); color: var(--accent); }
    /* Role badge */
    .role-badge { background: rgba(82,183,136,0.1); border: 1px solid rgba(82,183,136,0.3); color: var(--accent); border-radius: 6px; padding: 4px 10px; font-size: 12px; font-weight: 500; }
    /* Stage pipeline */
    .stage-pipeline { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 8px; }
    .stage-step { display: flex; align-items: center; gap: 4px; font-size: 11px; }
    .stage-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
    /* Bottom nav (mobile portrait) */
    .bottom-nav { display: none; }
    @media (max-width: 768px) and (orientation: portrait) {
      .sidebar { display: none; }
      .content { padding: 14px 12px 80px; }
      .bottom-nav {
        display: flex;
        position: fixed;
        bottom: 0; left: 0; right: 0;
        background: var(--bg-panel);
        border-top: 1px solid var(--border);
        z-index: 100;
        height: 62px;
        justify-content: space-around;
        align-items: center;
        padding-bottom: env(safe-area-inset-bottom, 0px);
      }
      .bottom-nav-item {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 2px;
        cursor: pointer;
        padding: 6px 8px;
        border-radius: 8px;
        flex: 1;
        position: relative;
        transition: background 0.15s;
      }
      .bottom-nav-item.active { background: rgba(82,183,136,0.15); }
      .bottom-nav-item .bnav-icon { font-size: 20px; line-height: 1; }
      .bottom-nav-item .bnav-label { font-size: 9px; color: var(--text-muted); font-weight: 500; letter-spacing: 0.2px; }
      .bottom-nav-item.active .bnav-label { color: var(--accent); }
      .bnav-badge { position: absolute; top: 2px; right: 8px; background: var(--red); color: #fff; border-radius: 8px; font-size: 9px; font-weight: 700; padding: 1px 4px; min-width: 14px; text-align: center; }
      .bnav-badge.yellow { background: var(--yellow); color: #0f1420; }
    }
    @media (max-width: 768px) {
      .stat-grid { grid-template-columns: repeat(2, 1fr); }
      .two-col { grid-template-columns: 1fr; }
      .three-col { grid-template-columns: 1fr; }
      .batch-grid { grid-template-columns: 1fr; }
      .topbar-right .topbar-alert { display: none; }
    }
    @media (max-width: 768px) and (orientation: landscape) {
      .sidebar { display: flex; }
      .bottom-nav { display: none !important; }
    }
    /* Scrollbar */
    ::-webkit-scrollbar { width: 6px; height: 6px; }
    ::-webkit-scrollbar-track { background: transparent; }
    ::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }
    ::-webkit-scrollbar-thumb:hover { background: var(--text-muted); }
    /* Misc */
    .divider { height: 1px; background: var(--border); margin: 16px 0; }
    .empty-state { text-align: center; padding: 48px 24px; color: var(--text-muted); }
    .empty-icon { font-size: 40px; margin-bottom: 12px; }
    .empty-title { font-size: 15px; font-weight: 600; color: var(--text-secondary); margin-bottom: 6px; }
    .search-input { position: relative; }
    .search-input input { padding-left: 32px; }
    .search-icon { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); color: var(--text-muted); font-size: 13px; }
    .filter-row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-bottom: 16px; }
    .filter-row select, .filter-row input { width: auto; min-width: 120px; }
  </style>
</head>
<body>
<div id="root"></div>
<script type="text/babel">
const { useState, useEffect, useMemo, useCallback } = React;

// ─── HELPERS ──────────────────────────────────────────────────────────────────
const today = () => new Date().toISOString().slice(0,10);
const addDays = (d, n) => { const dt = new Date(d); dt.setDate(dt.getDate()+n); return dt.toISOString().slice(0,10); };
const diffDays = (a,b) => Math.round((new Date(b)-new Date(a))/(1000*60*60*24));
const fmtDate = d => d ? new Date(d+'T12:00:00').toLocaleDateString('en-US',{month:'short',day:'numeric',year:'numeric'}) : '—';
const fmtDateShort = d => d ? new Date(d+'T12:00:00').toLocaleDateString('en-US',{month:'short',day:'numeric'}) : '—';
const uid = () => Math.random().toString(36).slice(2,8).toUpperCase();

function useLS(key, def) {
  const [val, setVal] = useState(() => { try { const s=localStorage.getItem(key); return s?JSON.parse(s):def; } catch { return def; } });
  useEffect(() => { try { localStorage.setItem(key, JSON.stringify(val)); } catch {} }, [key,val]);
  return [val, setVal];
}

// ─── STAGE CONFIG ────────────────────────────────────────────────────────────
const STAGES = [
  { id:'mother',     label:'Mother Stock',      color:'#64748b', badgeClass:'badge-gray' },
  { id:'planned',    label:'Clone Planned',     color:'#0ea5e9', badgeClass:'badge-teal' },
  { id:'cut',        label:'Cut Clones',        color:'#14b8a6', badgeClass:'badge-teal' },
  { id:'propagation',label:'In Propagation',    color:'#22d3ee', badgeClass:'badge-teal' },
  { id:'rooting',    label:'Rooting',           color:'#6ee7b7', badgeClass:'badge-teal' },
  { id:'rooted',     label:'Rooted',            color:'#52B788', badgeClass:'badge-green' },
  { id:'harden',     label:'Harden Off',        color:'#86efac', badgeClass:'badge-green' },
  { id:'transplant_ready', label:'Transplant Ready', color:'#22c55e', badgeClass:'badge-green' },
  { id:'veg',        label:'Veg',               color:'#16a34a', badgeClass:'badge-green' },
  { id:'flip_scheduled', label:'Flip Scheduled', color:'#c084fc', badgeClass:'badge-purple' },
  { id:'flower',     label:'Flower',            color:'#a855f7', badgeClass:'badge-purple' },
  { id:'harvest_scheduled', label:'Harvest Scheduled', color:'#fbbf24', badgeClass:'badge-gold' },
  { id:'harvested',  label:'Harvested',         color:'#f59e0b', badgeClass:'badge-gold' },
  { id:'archive',    label:'Archive',           color:'#4d6080', badgeClass:'badge-gray' },
];
const STAGE_MAP = Object.fromEntries(STAGES.map(s=>[s.id,s]));
const nextStage = id => { const i=STAGES.findIndex(s=>s.id===id); return i<STAGES.length-1?STAGES[i+1].id:id; };

// ─── DEFAULT DATA ─────────────────────────────────────────────────────────────
const DEFAULT_STRAINS = [
  { id:'s1', name:'Gelato 41', cultivarId:'GEL-41', breeder:'Cookies', category:'Hybrid', vigor:'High vigor, fast rooter', rooting:'Clean white roots, minimal humidity needed', stretch:'1.8x stretch', flowerChar:'Dense, frosty, lime/cookie nose', rootingDays:10, vegDays:21, flowerDays:63, preferredMother:'M-GEL-41-A', handlingNotes:'Prone to mag deficiency in late flower', notes:'' },
  { id:'s2', name:'Wedding Cake', cultivarId:'WC-01', breeder:'Seed Junky', category:'Indica-dom Hybrid', vigor:'Medium-high vigor, slower rooter', rooting:'Takes 12d avg, sensitive to high humidity', stretch:'1.5x stretch', flowerChar:'Heavy resin, vanilla/earthy, tight buds', rootingDays:12, vegDays:18, flowerDays:63, preferredMother:'M-WC-01-B', handlingNotes:'Watch for powdery mildew in late flower', notes:'' },
  { id:'s3', name:'Runtz', cultivarId:'RNT-01', breeder:'Cookies', category:'Balanced Hybrid', vigor:'Medium vigor', rooting:'Consistent rooter, 11d avg', stretch:'2x stretch', flowerChar:'Fruity candy, purple hues, spade-shaped buds', rootingDays:11, vegDays:21, flowerDays:56, preferredMother:'M-RNT-01-A', handlingNotes:'High stretcher — LST or top at day 10 veg', notes:'' },
  { id:'s4', name:'Zkittlez', cultivarId:'ZKT-01', breeder:'3rd Gen Fam', category:'Indica-dom Hybrid', vigor:'Medium vigor, reliable', rooting:'Good rooter, 10d avg', stretch:'1.4x stretch', flowerChar:'Tropical candy, dense calyxes, heavy trichomes', rootingDays:10, vegDays:24, flowerDays:63, preferredMother:'M-ZKT-01-A', handlingNotes:'Heavy feeder, needs K bump week 5-6', notes:'' },
];
const DEFAULT_ROOMS = ['Prop Room A','Prop Room B','Veg Room 1','Flower Room 1','Flower Room 2'];
const DEFAULT_BATCHES = [
  { id:'b1', batchId:'BAT-001', strainId:'s1', room:'Prop Room A', trayCount:6, plantCount:72, sourceMother:'M-GEL-41-A', dateCut:addDays(today(),-8), stage:'rooting', rootingTarget:addDays(today(),2), rootedDate:null, transplantDate:addDays(today(),5), flipDate:addDays(today(),26), harvestDate:addDays(today(),89), nextCloneCut:addDays(today(),79), status:'active', stageLog:[{stage:'cut',date:addDays(today(),-8)},{stage:'propagation',date:addDays(today(),-7)},{stage:'rooting',date:addDays(today(),-3)}] },
  { id:'b2', batchId:'BAT-002', strainId:'s2', room:'Prop Room B', trayCount:4, plantCount:48, sourceMother:'M-WC-01-B', dateCut:addDays(today(),-5), stage:'propagation', rootingTarget:addDays(today(),7), rootedDate:null, transplantDate:addDays(today(),10), flipDate:addDays(today(),28), harvestDate:addDays(today(),91), nextCloneCut:addDays(today(),81), status:'active', stageLog:[{stage:'cut',date:addDays(today(),-5)},{stage:'propagation',date:addDays(today(),-4)}] },
  { id:'b3', batchId:'BAT-003', strainId:'s3', room:'Veg Room 1', trayCount:8, plantCount:96, sourceMother:'M-RNT-01-A', dateCut:addDays(today(),-30), stage:'veg', rootingTarget:addDays(today(),-19), rootedDate:addDays(today(),-18), transplantDate:addDays(today(),-10), flipDate:addDays(today(),3), harvestDate:addDays(today(),59), nextCloneCut:addDays(today(),49), status:'active', stageLog:[{stage:'cut',date:addDays(today(),-30)},{stage:'rooted',date:addDays(today(),-18)},{stage:'veg',date:addDays(today(),-10)}] },
  { id:'b4', batchId:'BAT-004', strainId:'s4', room:'Flower Room 1', trayCount:10, plantCount:120, sourceMother:'M-ZKT-01-A', dateCut:addDays(today(),-55), stage:'flower', rootingTarget:addDays(today(),-45), rootedDate:addDays(today(),-43), transplantDate:addDays(today(),-33), flipDate:addDays(today(),-10), harvestDate:addDays(today(),53), nextCloneCut:addDays(today(),43), status:'active', stageLog:[{stage:'cut',date:addDays(today(),-55)},{stage:'rooted',date:addDays(today(),-43)},{stage:'flower',date:addDays(today(),-10)}] },
];
const DEFAULT_TASKS = [
  { id:'t1', name:'Check rooting progress — BAT-001', batchId:'b1', assignee:'Alex', dueDate:addDays(today(),1), status:'pending', priority:'high', notes:'Look for white tips at tray bottom' },
  { id:'t2', name:'Transplant BAT-001 to Veg Room 1', batchId:'b1', assignee:'Alex', dueDate:addDays(today(),5), status:'pending', priority:'high', notes:'Use 1-gal pots' },
  { id:'t3', name:'Flip BAT-003 to flower', batchId:'b3', assignee:'Maria', dueDate:addDays(today(),3), status:'pending', priority:'urgent', notes:'Confirm canopy height before flip' },
  { id:'t4', name:'IPM spray — Flower Room 1', batchId:'b4', assignee:'James', dueDate:addDays(today(),0), status:'pending', priority:'medium', notes:'Preventive neem application' },
  { id:'t5', name:'Cut clones for next BAT-003 run', batchId:'b3', assignee:'Maria', dueDate:addDays(today(),49), status:'pending', priority:'medium', notes:'Target 80 cuts from mother M-RNT-01-A' },
  { id:'t6', name:'Harden off BAT-002', batchId:'b2', assignee:'Alex', dueDate:addDays(today(),8), status:'pending', priority:'medium', notes:'Reduce humidity over 3 days' },
  { id:'t7', name:'Defoliation — BAT-004 week 3', batchId:'b4', assignee:'James', dueDate:addDays(today(),-1), status:'pending', priority:'low', notes:'Light defoliation, remove large fan leaves' },
];
const DEFAULT_PERFORMANCE = [
  { id:'p1', batchId:'b4', strainId:'s4', yieldGft2:52.3, rosinPct:22.1, thcPct:28.4, terpPct:2.8, notes:'Top run this quarter, excellent density' },
];
const DEFAULT_USERS = [{ id:'u1', name:'Alex', role:'Propagation Manager' },{ id:'u2', name:'Maria', role:'Cultivation Manager' },{ id:'u3', name:'James', role:'Grower' }];

// ─── STAGE BADGE ─────────────────────────────────────────────────────────────
function StageBadge({ stage }) {
  const s = STAGE_MAP[stage] || { label: stage, badgeClass:'badge-gray', color:'#4d6080' };
  return <span className={`badge ${s.badgeClass}`} style={{borderColor:`${s.color}40`}}>{s.label}</span>;
}

// ─── STATUS BADGE ─────────────────────────────────────────────────────────────
function StatusBadge({ status }) {
  const map = { planned:'badge-gray', active:'badge-green', rooted:'badge-teal', transplanted:'badge-green', flipped:'badge-purple', harvested:'badge-gold', completed:'badge-gray', delayed:'badge-yellow', failed:'badge-red' };
  return <span className={`badge ${map[status]||'badge-gray'}`}>{status}</span>;
}

// ─── PRIORITY BADGE ──────────────────────────────────────────────────────────
function PriorityBadge({ priority }) {
  const map = { urgent:'badge-red', high:'badge-orange', medium:'badge-yellow', low:'badge-gray' };
  return <span className={`badge ${map[priority]||'badge-gray'}`}>{priority}</span>;
}

// ─── MODAL ────────────────────────────────────────────────────────────────────
function Modal({ title, onClose, children, footer }) {
  return (
    <div className="modal-overlay" onClick={e=>e.target===e.currentTarget&&onClose()}>
      <div className="modal">
        <div className="modal-header">
          <span className="modal-title">{title}</span>
          <button className="close-btn" onClick={onClose}>×</button>
        </div>
        <div className="modal-body">{children}</div>
        {footer && <div className="modal-footer">{footer}</div>}
      </div>
    </div>
  );
}

// ─── DASHBOARD ───────────────────────────────────────────────────────────────
function Dashboard({ batches, tasks, strains, performance }) {
  const td = today();
  const weekEnd = addDays(td, 7);
  const twoWeeks = addDays(td, 14);
  const month = addDays(td, 30);

  const active = batches.filter(b=>!['harvested','archive','completed'].includes(b.stage));
  const rooting = batches.filter(b=>['rooting','propagation','cut'].includes(b.stage));
  const readyTransplant = batches.filter(b=>['rooted','harden','transplant_ready'].includes(b.stage));
  const cloneCutsThisWeek = batches.filter(b=>b.nextCloneCut && b.nextCloneCut>=td && b.nextCloneCut<=weekEnd);
  const rootingDue = batches.filter(b=>b.rootingTarget && b.rootingTarget>=td && b.rootingTarget<=weekEnd);
  const upcomingFlips = batches.filter(b=>b.flipDate && b.flipDate>=td && b.flipDate<=twoWeeks);
  const upcomingHarvests = batches.filter(b=>b.harvestDate && b.harvestDate>=td && b.harvestDate<=month);
  const overdueTasks = tasks.filter(t=>t.status!=='done' && t.dueDate && t.dueDate<td);
  const problematic = batches.filter(b=>['delayed','failed'].includes(b.status));

  const alerts = [];
  if (cloneCutsThisWeek.length) alerts.push({ type:'yellow', msg:`${cloneCutsThisWeek.length} clone cut${cloneCutsThisWeek.length>1?'s':''} due this week: ${cloneCutsThisWeek.map(b=>`${b.batchId}`).join(', ')}` });
  if (overdueTasks.length) alerts.push({ type:'red', msg:`${overdueTasks.length} overdue task${overdueTasks.length>1?'s':''}` });
  if (rootingDue.length) alerts.push({ type:'teal', msg:`${rootingDue.length} batch${rootingDue.length>1?'es':''} expected to finish rooting this week` });

  return (
    <div>
      <div style={{marginBottom:16}}>
        {alerts.map((a,i)=><div key={i} className={`alert alert-${a.type==='teal'?'green':a.type}`}><span>{a.type==='red'?'⚠️':a.type==='yellow'?'✂️':'🌱'}</span>{a.msg}</div>)}
      </div>
      <div className="stat-grid">
        <div className="stat-card"><div className="stat-label">Active Strains</div><div className="stat-value stat-green">{strains.length}</div><div className="stat-sub">in library</div></div>
        <div className="stat-card"><div className="stat-label">Active Batches</div><div className="stat-value stat-teal">{active.length}</div><div className="stat-sub">in progress</div></div>
        <div className="stat-card"><div className="stat-label">Currently Rooting</div><div className="stat-value stat-teal">{rooting.length}</div><div className="stat-sub">in prop</div></div>
        <div className="stat-card"><div className="stat-label">Ready to Transplant</div><div className="stat-value stat-green">{readyTransplant.length}</div><div className="stat-sub">waiting</div></div>
        <div className="stat-card" style={{border:'1px solid rgba(234,179,8,0.4)',background:'rgba(234,179,8,0.05)'}}>
          <div className="stat-label">Clone Cuts This Week</div>
          <div className="stat-value stat-yellow">{cloneCutsThisWeek.length}</div>
          <div className="stat-sub">{cloneCutsThisWeek.map(b=>b.batchId).join(', ')||'none scheduled'}</div>
        </div>
        <div className="stat-card"><div className="stat-label">Rooting Targets Due</div><div className="stat-value stat-teal">{rootingDue.length}</div><div className="stat-sub">this week</div></div>
        <div className="stat-card"><div className="stat-label">Upcoming Flips</div><div className="stat-value stat-purple">{upcomingFlips.length}</div><div className="stat-sub">next 14 days</div></div>
        <div className="stat-card"><div className="stat-label">Upcoming Harvests</div><div className="stat-value stat-gold">{upcomingHarvests.length}</div><div className="stat-sub">next 30 days</div></div>
        <div className="stat-card" style={overdueTasks.length?{border:'1px solid rgba(239,68,68,0.4)',background:'rgba(239,68,68,0.05)'}:{}}>
          <div className="stat-label">Overdue Tasks</div>
          <div className={`stat-value ${overdueTasks.length?'stat-red':'stat-green'}`}>{overdueTasks.length}</div>
          <div className="stat-sub">{overdueTasks.length?'needs attention':'all on track'}</div>
        </div>
        <div className="stat-card"><div className="stat-label">Delayed / Failed</div><div className={`stat-value ${problematic.length?'stat-red':'stat-green'}`}>{problematic.length}</div><div className="stat-sub">batches</div></div>
      </div>

      <div className="two-col">
        <div className="card">
          <div className="card-header"><span className="card-title">✂️ Clone Cuts — Next 30 Days</span></div>
          {batches.filter(b=>b.nextCloneCut && b.nextCloneCut>=td && b.nextCloneCut<=addDays(td,30)).length===0
            ? <div style={{color:'var(--text-muted)',fontSize:13}}>No clone cuts scheduled in next 30 days.</div>
            : batches.filter(b=>b.nextCloneCut && b.nextCloneCut>=td && b.nextCloneCut<=addDays(td,30))
                .sort((a,b)=>a.nextCloneCut.localeCompare(b.nextCloneCut))
                .map(b=>{
                  const s=strains.find(x=>x.id===b.strainId);
                  const daysAway=diffDays(td,b.nextCloneCut);
                  return <div key={b.id} style={{display:'flex',alignItems:'center',justifyContent:'space-between',padding:'8px 0',borderBottom:'1px solid var(--border)'}}>
                    <div><div style={{fontWeight:600,fontSize:13}}>{b.batchId} — {s?.name}</div><div style={{fontSize:11,color:'var(--text-muted)'}}>{b.room}</div></div>
                    <div style={{textAlign:'right'}}>
                      <div style={{fontSize:13,fontWeight:600,color:daysAway<=3?'var(--red)':daysAway<=7?'var(--yellow)':'var(--accent)'}}>{fmtDateShort(b.nextCloneCut)}</div>
                      <div style={{fontSize:11,color:'var(--text-muted)'}}>{daysAway===0?'Today':daysAway===1?'Tomorrow':`in ${daysAway}d`}</div>
                    </div>
                  </div>;
                })
          }
        </div>
        <div className="card">
          <div className="card-header"><span className="card-title">📋 Overdue Tasks</span></div>
          {overdueTasks.length===0
            ? <div style={{color:'var(--text-muted)',fontSize:13}}>✓ No overdue tasks</div>
            : overdueTasks.map(t=><div key={t.id} style={{display:'flex',justifyContent:'space-between',alignItems:'center',padding:'8px 0',borderBottom:'1px solid var(--border)'}}>
                <div><div style={{fontSize:13,fontWeight:500}}>{t.name}</div><div style={{fontSize:11,color:'var(--text-muted)'}}>Assigned: {t.assignee}</div></div>
                <div style={{textAlign:'right'}}><div style={{fontSize:12,color:'var(--red)'}}>{fmtDateShort(t.dueDate)}</div><PriorityBadge priority={t.priority}/></div>
              </div>)
          }
        </div>
      </div>

      <div className="card">
        <div className="card-header"><span className="card-title">🌿 Active Batches — Quick View</span></div>
        <div className="table-wrap">
          <table>
            <thead><tr><th>Batch</th><th>Strain</th><th>Room</th><th>Stage</th><th>Clone Cut</th><th>Rooting Target</th><th>Flip</th><th>Harvest</th></tr></thead>
            <tbody>
              {active.sort((a,b)=>a.batchId.localeCompare(b.batchId)).map(b=>{
                const s=strains.find(x=>x.id===b.strainId);
                return <tr key={b.id}>
                  <td style={{fontWeight:600}}>{b.batchId}</td>
                  <td>{s?.name||'—'}</td>
                  <td style={{color:'var(--text-secondary)'}}>{b.room}</td>
                  <td><StageBadge stage={b.stage}/></td>
                  <td style={{color:'var(--text-muted)',fontSize:12}}>{fmtDateShort(b.dateCut)}</td>
                  <td style={{color:'var(--teal)',fontSize:12}}>{fmtDateShort(b.rootingTarget)}</td>
                  <td style={{color:'var(--purple)',fontSize:12}}>{fmtDateShort(b.flipDate)}</td>
                  <td style={{color:'var(--gold)',fontSize:12}}>{fmtDateShort(b.harvestDate)}</td>
                </tr>;
              })}
            </tbody>
          </table>
        </div>
      </div>
    </div>
  );
}

// ─── STRAIN LIBRARY ──────────────────────────────────────────────────────────
function Strains({ strains, setStrains, performance, batches }) {
  const [modal, setModal] = useState(null);
  const [search, setSearch] = useState('');
  const [form, setForm] = useState({});

  const avgMetrics = id => {
    const recs = performance.filter(p=>p.strainId===id);
    if (!recs.length) return null;
    const avg = k => (recs.reduce((s,r)=>s+(+r[k]||0),0)/recs.length).toFixed(1);
    return { yield: avg('yieldGft2'), rosin: avg('rosinPct'), thc: avg('thcPct'), terp: avg('terpPct'), n: recs.length };
  };

  const filtered = strains.filter(s=>s.name.toLowerCase().includes(search.toLowerCase())||s.cultivarId?.toLowerCase().includes(search.toLowerCase()));

  const openNew = () => { setForm({ name:'',cultivarId:'',breeder:'',category:'Hybrid',vigor:'',rooting:'',stretch:'',flowerChar:'',rootingDays:10,vegDays:21,flowerDays:63,preferredMother:'',handlingNotes:'',notes:'' }); setModal('new'); };
  const openEdit = s => { setForm({...s}); setModal('edit'); };

  const save = () => {
    if (modal==='new') setStrains(p=>[...p,{...form,id:'s'+uid()}]);
    else setStrains(p=>p.map(s=>s.id===form.id?form:s));
    setModal(null);
  };

  const del = id => { if(confirm('Delete strain?')) setStrains(p=>p.filter(s=>s.id!==id)); };

  const strainFormJSX = (
    <div className="form-grid">
      <div className="form-group"><label>Strain Name *</label><input value={form.name||''} onChange={e=>setForm(p=>({...p,name:e.target.value}))}/></div>
      <div className="form-group"><label>Cultivar ID / Code</label><input value={form.cultivarId||''} onChange={e=>setForm(p=>({...p,cultivarId:e.target.value}))}/></div>
      <div className="form-group"><label>Breeder / Source</label><input value={form.breeder||''} onChange={e=>setForm(p=>({...p,breeder:e.target.value}))}/></div>
      <div className="form-group"><label>Category</label>
        <select value={form.category||'Hybrid'} onChange={e=>setForm(p=>({...p,category:e.target.value}))}>
          {['Indica','Sativa','Hybrid','Indica-dom Hybrid','Sativa-dom Hybrid','Balanced Hybrid','CBD','High-CBD'].map(c=><option key={c}>{c}</option>)}
        </select>
      </div>
      <div className="form-group"><label>Clone Rooting Days</label><input type="number" value={form.rootingDays||10} onChange={e=>setForm(p=>({...p,rootingDays:+e.target.value}))}/></div>
      <div className="form-group"><label>Veg Duration (days)</label><input type="number" value={form.vegDays||21} onChange={e=>setForm(p=>({...p,vegDays:+e.target.value}))}/></div>
      <div className="form-group"><label>Flower Duration (days)</label><input type="number" value={form.flowerDays||63} onChange={e=>setForm(p=>({...p,flowerDays:+e.target.value}))}/></div>
      <div className="form-group"><label>Preferred Mother Source</label><input value={form.preferredMother||''} onChange={e=>setForm(p=>({...p,preferredMother:e.target.value}))}/></div>
      <div className="form-group full"><label>Vigor Notes</label><input value={form.vigor||''} onChange={e=>setForm(p=>({...p,vigor:e.target.value}))}/></div>
      <div className="form-group full"><label>Rooting Behavior</label><input value={form.rooting||''} onChange={e=>setForm(p=>({...p,rooting:e.target.value}))}/></div>
      <div className="form-group full"><label>Stretch / Structure</label><input value={form.stretch||''} onChange={e=>setForm(p=>({...p,stretch:e.target.value}))}/></div>
      <div className="form-group full"><label>Flower Characteristics</label><input value={form.flowerChar||''} onChange={e=>setForm(p=>({...p,flowerChar:e.target.value}))}/></div>
      <div className="form-group full"><label>Special Handling Notes</label><textarea value={form.handlingNotes||''} onChange={e=>setForm(p=>({...p,handlingNotes:e.target.value}))} rows={2}/></div>
    </div>
  );

  return (
    <div>
      <div style={{display:'flex',justifyContent:'space-between',alignItems:'center',marginBottom:16}}>
        <div className="search-input" style={{position:'relative'}}>
          <span className="search-icon" style={{position:'absolute',left:10,top:'50%',transform:'translateY(-50%)'}}>🔍</span>
          <input style={{paddingLeft:32,width:240}} placeholder="Search strains…" value={search} onChange={e=>setSearch(e.target.value)}/>
        </div>
        <button className="btn btn-primary" onClick={openNew}>+ New Strain</button>
      </div>
      <div style={{display:'grid',gridTemplateColumns:'repeat(auto-fill,minmax(340px,1fr))',gap:14}}>
        {filtered.map(s=>{
          const m=avgMetrics(s.id);
          const bCount=batches.filter(b=>b.strainId===s.id&&!['harvested','archive','completed'].includes(b.stage)).length;
          return (
            <div key={s.id} className="card" style={{marginBottom:0}}>
              <div className="card-header" style={{marginBottom:8}}>
                <div>
                  <div style={{fontWeight:700,fontSize:15}}>{s.name}</div>
                  <div style={{fontSize:11,color:'var(--text-muted)',marginTop:2}}>{s.cultivarId} · {s.breeder}</div>
                </div>
                <div style={{display:'flex',gap:6,alignItems:'center'}}>
                  <span className="badge badge-gray">{s.category}</span>
                  {bCount>0&&<span className="badge badge-green">{bCount} active</span>}
                </div>
              </div>
              <div style={{display:'grid',gridTemplateColumns:'1fr 1fr 1fr',gap:8,marginBottom:12}}>
                <div style={{textAlign:'center',background:'var(--bg-panel)',borderRadius:6,padding:'8px 4px'}}>
                  <div style={{fontSize:18,fontWeight:700,color:'var(--teal)'}}>{s.rootingDays}d</div>
                  <div style={{fontSize:10,color:'var(--text-muted)'}}>ROOTING</div>
                </div>
                <div style={{textAlign:'center',background:'var(--bg-panel)',borderRadius:6,padding:'8px 4px'}}>
                  <div style={{fontSize:18,fontWeight:700,color:'var(--green)'}}>{s.vegDays}d</div>
                  <div style={{fontSize:10,color:'var(--text-muted)'}}>VEG</div>
                </div>
                <div style={{textAlign:'center',background:'var(--bg-panel)',borderRadius:6,padding:'8px 4px'}}>
                  <div style={{fontSize:18,fontWeight:700,color:'var(--purple)'}}>{s.flowerDays}d</div>
                  <div style={{fontSize:10,color:'var(--text-muted)'}}>FLOWER</div>
                </div>
              </div>
              {m && (
                <div style={{background:'var(--bg-panel)',borderRadius:8,padding:'10px 12px',marginBottom:10}}>
                  <div style={{fontSize:11,color:'var(--text-muted)',marginBottom:6}}>AVG PERFORMANCE ({m.n} run{m.n>1?'s':''})</div>
                  <div style={{display:'grid',gridTemplateColumns:'1fr 1fr',gap:6}}>
                    <div style={{fontSize:12}}><span style={{color:'var(--text-muted)'}}>g/ft²: </span><span style={{color:'var(--green)',fontWeight:600}}>{m.yield}</span></div>
                    <div style={{fontSize:12}}><span style={{color:'var(--text-muted)'}}>Rosin: </span><span style={{color:'var(--teal)',fontWeight:600}}>{m.rosin}%</span></div>
                    <div style={{fontSize:12}}><span style={{color:'var(--text-muted)'}}>THC: </span><span style={{color:'var(--purple)',fontWeight:600}}>{m.thc}%</span></div>
                    <div style={{fontSize:12}}><span style={{color:'var(--text-muted)'}}>Terps: </span><span style={{color:'var(--gold)',fontWeight:600}}>{m.terp}%</span></div>
                  </div>
                </div>
              )}
              {s.vigor && <div style={{fontSize:12,color:'var(--text-secondary)',marginBottom:6}}><span style={{color:'var(--text-muted)'}}>Vigor: </span>{s.vigor}</div>}
              {s.handlingNotes && <div style={{fontSize:11,color:'var(--yellow)',background:'rgba(234,179,8,0.05)',borderRadius:5,padding:'4px 8px',marginBottom:8}}>⚠ {s.handlingNotes}</div>}
              <div style={{display:'flex',gap:6,justifyContent:'flex-end'}}>
                <button className="btn btn-secondary btn-xs" onClick={()=>openEdit(s)}>Edit</button>
                <button className="btn btn-danger btn-xs" onClick={()=>del(s.id)}>Delete</button>
              </div>
            </div>
          );
        })}
      </div>
      {modal && (
        <Modal title={modal==='new'?'New Strain':'Edit Strain'} onClose={()=>setModal(null)}
          footer={<><button className="btn btn-secondary" onClick={()=>setModal(null)}>Cancel</button><button className="btn btn-primary" onClick={save}>Save Strain</button></>}>
          {strainFormJSX}
        </Modal>
      )}
    </div>
  );
}

// ─── BATCHES ─────────────────────────────────────────────────────────────────
function Batches({ batches, setBatches, strains, rooms, performance, setPerformance }) {
  const [modal, setModal] = useState(null);
  const [form, setForm] = useState({});
  const [filter, setFilter] = useState({ strain:'', room:'', stage:'', status:'' });
  const [perfModal, setPerfModal] = useState(null);
  const [perfForm, setPerfForm] = useState({});

  const filtered = batches.filter(b=>{
    if (filter.strain && b.strainId!==filter.strain) return false;
    if (filter.room && b.room!==filter.room) return false;
    if (filter.stage && b.stage!==filter.stage) return false;
    if (filter.status && b.status!==filter.status) return false;
    return true;
  });

  const openNew = () => {
    const bId = 'BAT-'+String(batches.length+1).padStart(3,'0');
    setForm({ batchId:bId, strainId:strains[0]?.id||'', room:rooms[0]||'', trayCount:4, plantCount:48, sourceMother:'', dateCut:today(), stage:'planned', rootingTarget:'', rootedDate:'', transplantDate:'', flipDate:'', harvestDate:'', nextCloneCut:'', status:'planned', stageLog:[] });
    setModal('new');
  };

  const openEdit = b => { setForm({...b}); setModal('edit'); };

  const save = () => {
    if (modal==='new') setBatches(p=>[...p,{...form,id:'b'+uid(),stageLog:[]}]);
    else setBatches(p=>p.map(b=>b.id===form.id?form:b));
    setModal(null);
  };

  const del = id => { if(confirm('Delete batch?')) setBatches(p=>p.filter(b=>b.id!==id)); };

  const advanceStage = b => {
    const ns = nextStage(b.stage);
    const log = [...(b.stageLog||[]), { stage:ns, date:today() }];
    setBatches(p=>p.map(x=>x.id===b.id?{...x,stage:ns,stageLog:log}:x));
  };

  const autoSchedule = () => {
    const s = strains.find(x=>x.id===form.strainId);
    if (!s) return;
    const base = form.dateCut || today();
    const rootingTarget = addDays(base, s.rootingDays);
    const transplantDate = addDays(rootingTarget, 2); // 2d harden
    const flipDate = addDays(transplantDate, s.vegDays);
    const harvestDate = addDays(flipDate, s.flowerDays);
    const nextCloneCut = addDays(harvestDate, -10);
    setForm(p=>({...p, rootingTarget, transplantDate, flipDate, harvestDate, nextCloneCut }));
  };

  const openPerf = b => { setPerfForm({ batchId:b.id, strainId:b.strainId, yieldGft2:'', rosinPct:'', thcPct:'', terpPct:'', notes:'' }); setPerfModal(b); };
  const savePerf = () => { setPerformance(p=>[...p.filter(x=>x.batchId!==perfForm.batchId),{...perfForm,id:'p'+uid()}]); setPerfModal(null); };

  const batchStrainObj = strains.find(x=>x.id===form.strainId);
  const batchFormJSX = (
    <div>
      <div className="form-grid">
        <div className="form-group"><label>Batch ID</label><input value={form.batchId||''} onChange={e=>setForm(p=>({...p,batchId:e.target.value}))}/></div>
        <div className="form-group"><label>Strain *</label>
          <select value={form.strainId||''} onChange={e=>setForm(p=>({...p,strainId:e.target.value}))}>
            {strains.map(s=><option key={s.id} value={s.id}>{s.name}</option>)}
          </select>
        </div>
        <div className="form-group"><label>Room / Area</label>
          <select value={form.room||''} onChange={e=>setForm(p=>({...p,room:e.target.value}))}>
            {rooms.map(r=><option key={r}>{r}</option>)}
          </select>
        </div>
        <div className="form-group"><label>Tray Count</label><input type="number" value={form.trayCount||''} onChange={e=>setForm(p=>({...p,trayCount:+e.target.value}))}/></div>
        <div className="form-group"><label>Plant Count</label><input type="number" value={form.plantCount||''} onChange={e=>setForm(p=>({...p,plantCount:+e.target.value}))}/></div>
        <div className="form-group"><label>Source Mother</label><input value={form.sourceMother||''} onChange={e=>setForm(p=>({...p,sourceMother:e.target.value}))}/></div>
        <div className="form-group"><label>Date Cut *</label><input type="date" value={form.dateCut||''} onChange={e=>setForm(p=>({...p,dateCut:e.target.value}))}/></div>
        <div className="form-group"><label>Stage</label>
          <select value={form.stage||'planned'} onChange={e=>setForm(p=>({...p,stage:e.target.value}))}>
            {STAGES.map(s=><option key={s.id} value={s.id}>{s.label}</option>)}
          </select>
        </div>
        <div className="form-group"><label>Status</label>
          <select value={form.status||'planned'} onChange={e=>setForm(p=>({...p,status:e.target.value}))}>
            {['planned','active','rooted','transplanted','flipped','harvested','completed','delayed','failed'].map(s=><option key={s}>{s}</option>)}
          </select>
        </div>
      </div>
      <div className="divider"/>
      <div style={{display:'flex',justifyContent:'space-between',alignItems:'center',marginBottom:12}}>
        <span style={{fontWeight:600,fontSize:13}}>Schedule Dates</span>
        <button className="btn btn-secondary btn-sm" onClick={autoSchedule}>⚡ Auto-Schedule{batchStrainObj?` (${batchStrainObj.name})`:''}</button>
      </div>
      <div className="form-grid">
        <div className="form-group"><label>Rooting Target Date</label><input type="date" value={form.rootingTarget||''} onChange={e=>setForm(p=>({...p,rootingTarget:e.target.value}))}/></div>
        <div className="form-group"><label>Rooted Date (actual)</label><input type="date" value={form.rootedDate||''} onChange={e=>setForm(p=>({...p,rootedDate:e.target.value}))}/></div>
        <div className="form-group"><label>Transplant Date</label><input type="date" value={form.transplantDate||''} onChange={e=>setForm(p=>({...p,transplantDate:e.target.value}))}/></div>
        <div className="form-group"><label>Flip Date</label><input type="date" value={form.flipDate||''} onChange={e=>setForm(p=>({...p,flipDate:e.target.value}))}/></div>
        <div className="form-group"><label>Harvest Date</label><input type="date" value={form.harvestDate||''} onChange={e=>setForm(p=>({...p,harvestDate:e.target.value}))}/></div>
        <div className="form-group"><label>Next Clone Cut Date</label><input type="date" value={form.nextCloneCut||''} onChange={e=>setForm(p=>({...p,nextCloneCut:e.target.value}))}/></div>
      </div>
    </div>
  );

  return (
    <div>
      <div style={{display:'flex',gap:10,alignItems:'center',justifyContent:'space-between',marginBottom:16,flexWrap:'wrap'}}>
        <div className="filter-row" style={{margin:0}}>
          <select value={filter.strain} onChange={e=>setFilter(p=>({...p,strain:e.target.value}))}>
            <option value="">All Strains</option>
            {strains.map(s=><option key={s.id} value={s.id}>{s.name}</option>)}
          </select>
          <select value={filter.stage} onChange={e=>setFilter(p=>({...p,stage:e.target.value}))}>
            <option value="">All Stages</option>
            {STAGES.map(s=><option key={s.id} value={s.id}>{s.label}</option>)}
          </select>
          <select value={filter.status} onChange={e=>setFilter(p=>({...p,status:e.target.value}))}>
            <option value="">All Status</option>
            {['planned','active','rooted','transplanted','flipped','harvested','completed','delayed','failed'].map(s=><option key={s}>{s}</option>)}
          </select>
        </div>
        <button className="btn btn-primary" onClick={openNew}>+ New Batch</button>
      </div>
      <div className="batch-grid">
        {filtered.map(b=>{
          const s = strains.find(x=>x.id===b.strainId);
          const td2 = today();
          const daysInStage = b.stageLog?.length ? diffDays(b.stageLog[b.stageLog.length-1].date, td2) : null;
          const perf = performance.find(p=>p.batchId===b.id);
          return (
            <div key={b.id} className="batch-card">
              <div className="batch-card-header">
                <div>
                  <div className="batch-id">{b.batchId}</div>
                  <div className="batch-strain">{s?.name||'Unknown'}</div>
                  <div style={{fontSize:11,color:'var(--text-muted)',marginTop:2}}>{b.room} · {b.plantCount} plants / {b.trayCount} trays</div>
                </div>
                <div style={{display:'flex',flexDirection:'column',alignItems:'flex-end',gap:4}}>
                  <StageBadge stage={b.stage}/>
                  <StatusBadge status={b.status}/>
                </div>
              </div>
              {daysInStage!==null && <div style={{fontSize:11,color:'var(--text-muted)',marginBottom:6}}>{daysInStage}d in current stage</div>}
              <div className="batch-dates">
                <div className="date-item"><div className="date-label">✂️ Cut</div><div className="date-val">{fmtDateShort(b.dateCut)}</div></div>
                <div className="date-item"><div className="date-label">🌱 Rooting Target</div><div className="date-val" style={{color:'var(--teal)'}}>{fmtDateShort(b.rootingTarget)}</div></div>
                <div className="date-item"><div className="date-label">🪴 Transplant</div><div className="date-val" style={{color:'var(--green)'}}>{fmtDateShort(b.transplantDate)}</div></div>
                <div className="date-item"><div className="date-label">💡 Flip</div><div className="date-val" style={{color:'var(--purple)'}}>{fmtDateShort(b.flipDate)}</div></div>
                <div className="date-item"><div className="date-label">🌾 Harvest</div><div className="date-val" style={{color:'var(--gold)'}}>{fmtDateShort(b.harvestDate)}</div></div>
                <div className="date-item"><div className="date-label">✂️ Next Cut</div><div className="date-val" style={{color:'var(--yellow)'}}>{fmtDateShort(b.nextCloneCut)}</div></div>
              </div>
              {perf && (
                <div style={{background:'var(--bg-panel)',borderRadius:6,padding:'6px 10px',marginTop:8,fontSize:11,display:'flex',gap:12}}>
                  <span><span style={{color:'var(--text-muted)'}}>g/ft²: </span><span style={{color:'var(--green)',fontWeight:600}}>{perf.yieldGft2}</span></span>
                  <span><span style={{color:'var(--text-muted)'}}>Rosin: </span><span style={{color:'var(--teal)',fontWeight:600}}>{perf.rosinPct}%</span></span>
                  <span><span style={{color:'var(--text-muted)'}}>THC: </span><span style={{color:'var(--purple)',fontWeight:600}}>{perf.thcPct}%</span></span>
                  <span><span style={{color:'var(--text-muted)'}}>Terps: </span><span style={{color:'var(--gold)',fontWeight:600}}>{perf.terpPct}%</span></span>
                </div>
              )}
              <div className="batch-actions">
                <button className="btn btn-primary btn-xs" onClick={()=>advanceStage(b)}>→ {STAGE_MAP[nextStage(b.stage)]?.label}</button>
                <button className="btn btn-secondary btn-xs" onClick={()=>openEdit(b)}>Edit</button>
                <button className="btn btn-secondary btn-xs" onClick={()=>openPerf(b)}>📊 Log Data</button>
                <button className="btn btn-danger btn-xs" onClick={()=>del(b.id)}>✕</button>
              </div>
            </div>
          );
        })}
      </div>
      {filtered.length===0 && <div className="empty-state"><div className="empty-icon">🌱</div><div className="empty-title">No batches found</div><div style={{fontSize:13}}>Adjust filters or create a new batch.</div></div>}

      {modal && (
        <Modal title={modal==='new'?'New Batch':'Edit Batch'} onClose={()=>setModal(null)}
          footer={<><button className="btn btn-secondary" onClick={()=>setModal(null)}>Cancel</button><button className="btn btn-primary" onClick={save}>Save Batch</button></>}>
          {batchFormJSX}
        </Modal>
      )}
      {perfModal && (
        <Modal title={`Log Performance — ${perfModal.batchId}`} onClose={()=>setPerfModal(null)}
          footer={<><button className="btn btn-secondary" onClick={()=>setPerfModal(null)}>Cancel</button><button className="btn btn-primary" onClick={savePerf}>Save</button></>}>
          <div className="form-grid">
            <div className="form-group"><label>Flower Yield (g/ft²)</label><input type="number" step="0.1" value={perfForm.yieldGft2||''} onChange={e=>setPerfForm(p=>({...p,yieldGft2:+e.target.value}))}/></div>
            <div className="form-group"><label>Rosin Yield (%)</label><input type="number" step="0.1" value={perfForm.rosinPct||''} onChange={e=>setPerfForm(p=>({...p,rosinPct:+e.target.value}))}/></div>
            <div className="form-group"><label>THC (%)</label><input type="number" step="0.1" value={perfForm.thcPct||''} onChange={e=>setPerfForm(p=>({...p,thcPct:+e.target.value}))}/></div>
            <div className="form-group"><label>Terpene (%)</label><input type="number" step="0.01" value={perfForm.terpPct||''} onChange={e=>setPerfForm(p=>({...p,terpPct:+e.target.value}))}/></div>
            <div className="form-group full"><label>Quality Notes</label><textarea value={perfForm.notes||''} onChange={e=>setPerfForm(p=>({...p,notes:e.target.value}))}/></div>
          </div>
        </Modal>
      )}
    </div>
  );
}

// ─── SCHEDULER ───────────────────────────────────────────────────────────────
function Scheduler({ strains, batches, setBatches }) {
  const [strainId, setStrainId] = useState(strains[0]?.id||'');
  const [mode, setMode] = useState('from_harvest'); // from_harvest | from_cut
  const [inputDate, setInputDate] = useState(addDays(today(),90));
  const [room, setRoom] = useState('Flower Room 1');
  const [plantCount, setPlantCount] = useState(60);
  const [trayCount, setTrayCount] = useState(5);
  const [schedule, setSchedule] = useState(null);

  const s = strains.find(x=>x.id===strainId);

  const calculate = () => {
    if (!s || !inputDate) return;
    let harvest, flip, transplant, rootingTarget, cloneCut, nextCut, rootedDate;
    if (mode==='from_harvest') {
      harvest = inputDate;
      flip = addDays(harvest, -s.flowerDays);
      transplant = addDays(flip, -s.vegDays);
      rootingTarget = addDays(transplant, -2); // 2d harden off
      cloneCut = addDays(rootingTarget, -s.rootingDays);
      nextCut = addDays(harvest, -10);
    } else {
      cloneCut = inputDate;
      rootingTarget = addDays(cloneCut, s.rootingDays);
      rootedDate = rootingTarget;
      transplant = addDays(rootingTarget, 2);
      flip = addDays(transplant, s.vegDays);
      harvest = addDays(flip, s.flowerDays);
      nextCut = addDays(harvest, -10);
    }
    setSchedule({ harvest, flip, transplant, rootingTarget, cloneCut, nextCut, rootedDate });
  };

  const createBatch = () => {
    if (!schedule) return;
    const bId = 'BAT-'+String(batches.length+1).padStart(3,'0');
    const nb = {
      id:'b'+uid(), batchId:bId, strainId, room, trayCount, plantCount,
      sourceMother:s?.preferredMother||'', dateCut:schedule.cloneCut, stage:'planned',
      rootingTarget:schedule.rootingTarget, rootedDate:null, transplantDate:schedule.transplant,
      flipDate:schedule.flip, harvestDate:schedule.harvest, nextCloneCut:schedule.nextCut,
      status:'planned', stageLog:[]
    };
    setBatches(p=>[...p,nb]);
    alert(`Batch ${bId} created from schedule!`);
  };

  const events = schedule ? [
    { label:'✂️ Clone Cut', date:schedule.cloneCut, color:'var(--teal)', days:null },
    { label:'🌱 Rooting Target', date:schedule.rootingTarget, color:'var(--teal)', days:s?.rootingDays, note:`${s?.rootingDays}d rooting` },
    { label:'🪴 Transplant', date:schedule.transplant, color:'var(--green)', days:2, note:'2d harden off' },
    { label:'💡 Flip to Flower', date:schedule.flip, color:'var(--purple)', days:s?.vegDays, note:`${s?.vegDays}d veg` },
    { label:'🌾 Harvest', date:schedule.harvest, color:'var(--gold)', days:s?.flowerDays, note:`${s?.flowerDays}d flower` },
    { label:'✂️ Next Clone Cut', date:schedule.nextCut, color:'var(--yellow)', days:null, note:'10d before harvest' },
  ] : [];

  return (
    <div>
      <div className="card">
        <div className="card-header"><span className="card-title">⚡ Propagation Scheduler — Backward Planning</span></div>
        <div style={{fontSize:13,color:'var(--text-secondary)',marginBottom:16}}>
          Enter a target date and the scheduler calculates the full propagation timeline using strain-specific defaults.<br/>
          <span style={{color:'var(--accent)'}}>Core logic: Harvest → Flip → Transplant → Rooted → Clone Cut</span>
        </div>
        <div className="form-grid">
          <div className="form-group">
            <label>Strain</label>
            <select value={strainId} onChange={e=>setStrainId(e.target.value)}>
              {strains.map(s=><option key={s.id} value={s.id}>{s.name}</option>)}
            </select>
          </div>
          <div className="form-group">
            <label>Schedule From</label>
            <select value={mode} onChange={e=>setMode(e.target.value)}>
              <option value="from_harvest">Target Harvest Date (work backward)</option>
              <option value="from_cut">Clone Cut Date (work forward)</option>
            </select>
          </div>
          <div className="form-group">
            <label>{mode==='from_harvest'?'Target Harvest Date':'Clone Cut Date'}</label>
            <input type="date" value={inputDate} onChange={e=>setInputDate(e.target.value)}/>
          </div>
          <div className="form-group">
            <label>Room / Area</label>
            <input value={room} onChange={e=>setRoom(e.target.value)}/>
          </div>
          <div className="form-group">
            <label>Plant Count</label>
            <input type="number" value={plantCount} onChange={e=>setPlantCount(+e.target.value)}/>
          </div>
          <div className="form-group">
            <label>Tray Count</label>
            <input type="number" value={trayCount} onChange={e=>setTrayCount(+e.target.value)}/>
          </div>
        </div>
        {s && (
          <div style={{background:'var(--bg-panel)',borderRadius:8,padding:'10px 14px',marginBottom:16,fontSize:12,display:'flex',gap:16,flexWrap:'wrap'}}>
            <span style={{color:'var(--text-muted)'}}>Using strain defaults for <strong style={{color:'var(--accent)'}}>{s.name}</strong>:</span>
            <span>Rooting: <strong style={{color:'var(--teal)'}}>{s.rootingDays}d</strong></span>
            <span>Veg: <strong style={{color:'var(--green)'}}>{s.vegDays}d</strong></span>
            <span>Flower: <strong style={{color:'var(--purple)'}}>{s.flowerDays}d</strong></span>
            <span>Total: <strong style={{color:'var(--gold)'}}>{s.rootingDays+2+s.vegDays+s.flowerDays}d</strong></span>
          </div>
        )}
        <button className="btn btn-primary" onClick={calculate}>Calculate Schedule</button>
      </div>

      {schedule && (
        <div className="scheduler-timeline">
          <div style={{display:'flex',justifyContent:'space-between',alignItems:'center',marginBottom:16}}>
            <span style={{fontWeight:600,fontSize:14}}>📅 Calculated Schedule — {s?.name}</span>
            <button className="btn btn-primary btn-sm" onClick={createBatch}>+ Create Batch from Schedule</button>
          </div>
          {events.map((e,i)=>(
            <div key={i} className="timeline-row">
              <div className="timeline-event" style={{color:e.color}}>{e.label}</div>
              <div className="timeline-date" style={{color:e.color}}>{fmtDate(e.date)}</div>
              {e.note && <div className="timeline-days">{e.note}</div>}
            </div>
          ))}
          <div style={{marginTop:16,paddingTop:12,borderTop:'1px solid var(--border)',fontSize:12,color:'var(--text-muted)'}}>
            Total cycle: clone cut to harvest = <strong style={{color:'var(--text-primary)'}}>{diffDays(schedule.cloneCut,schedule.harvest)} days</strong>
          </div>
        </div>
      )}

      <div className="card" style={{marginTop:16}}>
        <div className="card-header"><span className="card-title">📋 Existing Batch Schedules</span></div>
        <div className="table-wrap">
          <table>
            <thead><tr><th>Batch</th><th>Strain</th><th>Clone Cut</th><th>Rooting</th><th>Transplant</th><th>Flip</th><th>Harvest</th><th>Next Cut</th></tr></thead>
            <tbody>
              {batches.filter(b=>b.harvestDate).sort((a,b)=>a.harvestDate.localeCompare(b.harvestDate)).map(b=>{
                const s=strains.find(x=>x.id===b.strainId);
                return <tr key={b.id}>
                  <td style={{fontWeight:600}}>{b.batchId}</td>
                  <td>{s?.name}</td>
                  <td style={{color:'var(--teal)',fontSize:12}}>{fmtDateShort(b.dateCut)}</td>
                  <td style={{color:'var(--teal)',fontSize:12}}>{fmtDateShort(b.rootingTarget)}</td>
                  <td style={{color:'var(--green)',fontSize:12}}>{fmtDateShort(b.transplantDate)}</td>
                  <td style={{color:'var(--purple)',fontSize:12}}>{fmtDateShort(b.flipDate)}</td>
                  <td style={{color:'var(--gold)',fontSize:12}}>{fmtDateShort(b.harvestDate)}</td>
                  <td style={{color:'var(--yellow)',fontSize:12}}>{fmtDateShort(b.nextCloneCut)}</td>
                </tr>;
              })}
            </tbody>
          </table>
        </div>
      </div>
    </div>
  );
}

// ─── TASKS ────────────────────────────────────────────────────────────────────
function Tasks({ tasks, setTasks, batches, strains }) {
  const [modal, setModal] = useState(false);
  const [form, setForm] = useState({});
  const [filter, setFilter] = useState({ status:'', priority:'', batch:'' });

  const td = today();
  const filtered = tasks.filter(t=>{
    if (filter.status && t.status!==filter.status) return false;
    if (filter.priority && t.priority!==filter.priority) return false;
    if (filter.batch && t.batchId!==filter.batch) return false;
    return true;
  }).sort((a,b)=>{
    const pOrder = {urgent:0,high:1,medium:2,low:3};
    if (a.status!=='done' && b.status==='done') return -1;
    if (a.status==='done' && b.status!=='done') return 1;
    if ((pOrder[a.priority]||9)!==pOrder[b.priority]) return (pOrder[a.priority]||9)-(pOrder[b.priority]||9);
    return (a.dueDate||'').localeCompare(b.dueDate||'');
  });

  const taskNames = ['Select mother plants','Cut clones','Stick clones','Check rooting','Harden off','Transplant','Flip to flower','Defoliation','IPM','Harvest','Cut clones for next run','Irrigation check','pH/EC check'];

  const openNew = () => { setForm({ name:'', batchId:'', assignee:'', dueDate:today(), status:'pending', priority:'medium', notes:'' }); setModal(true); };
  const save = () => {
    if (modal==='edit') setTasks(p=>p.map(t=>t.id===form.id?form:t));
    else setTasks(p=>[...p,{...form,id:'t'+uid()}]);
    setModal(false);
  };
  const toggle = t => setTasks(p=>p.map(x=>x.id===t.id?{...x,status:x.status==='done'?'pending':'done'}:x));
  const del = id => { if(confirm('Delete task?')) setTasks(p=>p.filter(t=>t.id!==id)); };

  const isOverdue = t => t.status!=='done' && t.dueDate && t.dueDate<td;

  return (
    <div>
      <div style={{display:'flex',gap:10,alignItems:'center',justifyContent:'space-between',marginBottom:16,flexWrap:'wrap'}}>
        <div className="filter-row" style={{margin:0}}>
          <select value={filter.status} onChange={e=>setFilter(p=>({...p,status:e.target.value}))}>
            <option value="">All Status</option>
            {['pending','in-progress','done'].map(s=><option key={s}>{s}</option>)}
          </select>
          <select value={filter.priority} onChange={e=>setFilter(p=>({...p,priority:e.target.value}))}>
            <option value="">All Priority</option>
            {['urgent','high','medium','low'].map(s=><option key={s}>{s}</option>)}
          </select>
          <select value={filter.batch} onChange={e=>setFilter(p=>({...p,batch:e.target.value}))}>
            <option value="">All Batches</option>
            {batches.map(b=><option key={b.id} value={b.id}>{b.batchId}</option>)}
          </select>
        </div>
        <button className="btn btn-primary" onClick={openNew}>+ New Task</button>
      </div>

      <div className="card" style={{padding:0,overflow:'hidden'}}>
        <table style={{width:'100%'}}>
          <thead><tr><th style={{paddingLeft:16}}>Task</th><th>Batch</th><th>Assignee</th><th>Due</th><th>Priority</th><th>Status</th><th style={{paddingRight:16}}>Actions</th></tr></thead>
          <tbody>
            {filtered.map(t=>{
              const b=batches.find(x=>x.id===t.batchId);
              const overdue=isOverdue(t);
              return (
                <tr key={t.id} style={{opacity:t.status==='done'?0.5:1}}>
                  <td style={{paddingLeft:16}}>
                    <div style={{display:'flex',alignItems:'center',gap:8}}>
                      <input type="checkbox" checked={t.status==='done'} onChange={()=>toggle(t)} style={{width:14,height:14,cursor:'pointer',accentColor:'var(--accent)'}}/>
                      <div>
                        <div style={{fontWeight:500,textDecoration:t.status==='done'?'line-through':'none'}}>{t.name}</div>
                        {t.notes && <div style={{fontSize:11,color:'var(--text-muted)'}}>{t.notes}</div>}
                      </div>
                    </div>
                  </td>
                  <td style={{color:'var(--text-secondary)',fontSize:12}}>{b?.batchId||'—'}</td>
                  <td style={{color:'var(--text-secondary)',fontSize:12}}>{t.assignee||'—'}</td>
                  <td style={{fontSize:12,color:overdue?'var(--red)':t.dueDate===td?'var(--yellow)':'var(--text-secondary)'}}>{fmtDateShort(t.dueDate)}{overdue?' ⚠️':''}</td>
                  <td><PriorityBadge priority={t.priority}/></td>
                  <td><span className={`badge ${t.status==='done'?'badge-green':t.status==='in-progress'?'badge-teal':'badge-gray'}`}>{t.status}</span></td>
                  <td style={{paddingRight:16}}>
                    <div style={{display:'flex',gap:4}}>
                      <button className="btn btn-secondary btn-xs" onClick={()=>{setForm({...t});setModal('edit');}}>Edit</button>
                      <button className="btn btn-danger btn-xs" onClick={()=>del(t.id)}>✕</button>
                    </div>
                  </td>
                </tr>
              );
            })}
          </tbody>
        </table>
        {filtered.length===0 && <div className="empty-state"><div className="empty-icon">✅</div><div className="empty-title">No tasks found</div></div>}
      </div>

      {modal && (
        <Modal title={modal==='edit'?'Edit Task':'New Task'} onClose={()=>setModal(false)}
          footer={<><button className="btn btn-secondary" onClick={()=>setModal(false)}>Cancel</button><button className="btn btn-primary" onClick={save}>Save</button></>}>
          <div className="form-grid">
            <div className="form-group full">
              <label>Task Name</label>
              <input list="task-names" value={form.name||''} onChange={e=>setForm(p=>({...p,name:e.target.value}))}/>
              <datalist id="task-names">{taskNames.map(n=><option key={n} value={n}/>)}</datalist>
            </div>
            <div className="form-group">
              <label>Related Batch</label>
              <select value={form.batchId||''} onChange={e=>setForm(p=>({...p,batchId:e.target.value}))}>
                <option value="">— None —</option>
                {batches.map(b=>{const s=strains.find(x=>x.id===b.strainId);return <option key={b.id} value={b.id}>{b.batchId} — {s?.name}</option>;})}
              </select>
            </div>
            <div className="form-group"><label>Assigned To</label><input value={form.assignee||''} onChange={e=>setForm(p=>({...p,assignee:e.target.value}))}/></div>
            <div className="form-group"><label>Due Date</label><input type="date" value={form.dueDate||''} onChange={e=>setForm(p=>({...p,dueDate:e.target.value}))}/></div>
            <div className="form-group">
              <label>Priority</label>
              <select value={form.priority||'medium'} onChange={e=>setForm(p=>({...p,priority:e.target.value}))}>
                {['urgent','high','medium','low'].map(s=><option key={s}>{s}</option>)}
              </select>
            </div>
            <div className="form-group">
              <label>Status</label>
              <select value={form.status||'pending'} onChange={e=>setForm(p=>({...p,status:e.target.value}))}>
                {['pending','in-progress','done'].map(s=><option key={s}>{s}</option>)}
              </select>
            </div>
            <div className="form-group full"><label>Notes</label><textarea value={form.notes||''} onChange={e=>setForm(p=>({...p,notes:e.target.value}))}/></div>
          </div>
        </Modal>
      )}
    </div>
  );
}

// ─── CALENDAR ─────────────────────────────────────────────────────────────────
function CalendarView({ batches, tasks, strains }) {
  const [tab, setTab] = useState('monthly');
  const [currentDate, setCurrentDate] = useState(new Date());

  const td = today();

  // Monthly calendar
  const year = currentDate.getFullYear();
  const month = currentDate.getMonth();
  const firstDay = new Date(year, month, 1);
  const lastDay = new Date(year, month+1, 0);
  const startOffset = firstDay.getDay();
  const days = [];
  for (let i=0;i<startOffset;i++) { const d=new Date(year,month,1-startOffset+i); days.push({date:d,otherMonth:true}); }
  for (let i=1;i<=lastDay.getDate();i++) days.push({date:new Date(year,month,i),otherMonth:false});
  while (days.length%7!==0) { const d=new Date(year,month+1,days.length-lastDay.getDate()-startOffset+1); days.push({date:d,otherMonth:true}); }

  const dayEvents = d => {
    const ds = d.toISOString().slice(0,10);
    const evts = [];
    batches.forEach(b=>{
      const s=strains.find(x=>x.id===b.strainId);
      if (b.dateCut===ds) evts.push({label:`✂️ Cut: ${b.batchId}`,cls:'clone'});
      if (b.rootingTarget===ds) evts.push({label:`🌱 Root: ${b.batchId}`,cls:'clone'});
      if (b.transplantDate===ds) evts.push({label:`🪴 TX: ${b.batchId}`,cls:'transplant'});
      if (b.flipDate===ds) evts.push({label:`💡 Flip: ${b.batchId}`,cls:'flip'});
      if (b.harvestDate===ds) evts.push({label:`🌾 Harvest: ${b.batchId}`,cls:'harvest'});
      if (b.nextCloneCut===ds) evts.push({label:`✂️ Next Cut: ${b.batchId}`,cls:'clone'});
    });
    tasks.forEach(t=>{ if(t.dueDate===ds && t.status!=='done') evts.push({label:`📋 ${t.name.slice(0,20)}`,cls:''}); });
    return evts;
  };

  // Weekly view — 7 days from today
  const weekStart = new Date(currentDate); weekStart.setDate(weekStart.getDate()-weekStart.getDay());
  const weekDays = Array.from({length:7},(_,i)=>{ const d=new Date(weekStart); d.setDate(d.getDate()+i); return d; });

  // Timeline / Gantt
  const GanttView = () => {
    const activeBatches = batches.filter(b=>b.dateCut && b.harvestDate);
    if (!activeBatches.length) return <div className="empty-state"><div className="empty-icon">📊</div><div className="empty-title">No batches with full schedule</div></div>;
    
    const allDates = activeBatches.flatMap(b=>[b.dateCut,b.harvestDate]).filter(Boolean).sort();
    const minDate = new Date(allDates[0]+'T12:00:00');
    const maxDate = new Date(allDates[allDates.length-1]+'T12:00:00');
    const totalDays = Math.max(1, diffDays(allDates[0], allDates[allDates.length-1])) + 14;
    const pct = d => Math.max(0, Math.min(100, (diffDays(allDates[0], d) / totalDays) * 100));

    return (
      <div>
        <div style={{display:'flex',justifyContent:'space-between',fontSize:11,color:'var(--text-muted)',marginBottom:8,paddingLeft:180}}>
          <span>{fmtDateShort(allDates[0])}</span>
          <span style={{color:'var(--red)',fontWeight:600}}>TODAY: {fmtDateShort(td)}</span>
          <span>{fmtDateShort(allDates[allDates.length-1])}</span>
        </div>
        <div className="gantt-wrap">
          {/* Today line */}
          {activeBatches.map(b=>{
            const s=strains.find(x=>x.id===b.strainId);
            const segments = [
              { start:b.dateCut, end:b.rootingTarget||b.transplantDate, color:'#14b8a6', label:'Rooting' },
              { start:b.transplantDate, end:b.flipDate, color:'#22c55e', label:'Veg' },
              { start:b.flipDate, end:b.harvestDate, color:'#a855f7', label:'Flower' },
            ].filter(seg=>seg.start&&seg.end);
            return (
              <div key={b.id} className="gantt-row">
                <div className="gantt-label" title={`${b.batchId} — ${s?.name}`}><strong>{b.batchId}</strong> {s?.name}</div>
                <div className="gantt-track">
                  {segments.map((seg,i)=>(
                    <div key={i} className="gantt-bar"
                      style={{ left:`${pct(seg.start)}%`, width:`${Math.max(1,pct(seg.end)-pct(seg.start))}%`, background:`${seg.color}cc`, color:'#0f1420' }}>
                      {pct(seg.end)-pct(seg.start)>8&&seg.label}
                    </div>
                  ))}
                  {/* Today marker */}
                  <div style={{position:'absolute',left:`${pct(td)}%`,top:0,bottom:0,width:2,background:'var(--red)',zIndex:10}}/>
                </div>
              </div>
            );
          })}
          <div style={{marginTop:12,display:'flex',gap:16,fontSize:11,color:'var(--text-muted)',paddingLeft:180}}>
            <span style={{display:'flex',alignItems:'center',gap:4}}><span style={{width:12,height:10,background:'#14b8a6',borderRadius:2,display:'inline-block'}}/> Rooting/Prop</span>
            <span style={{display:'flex',alignItems:'center',gap:4}}><span style={{width:12,height:10,background:'#22c55e',borderRadius:2,display:'inline-block'}}/> Veg</span>
            <span style={{display:'flex',alignItems:'center',gap:4}}><span style={{width:12,height:10,background:'#a855f7',borderRadius:2,display:'inline-block'}}/> Flower</span>
            <span style={{display:'flex',alignItems:'center',gap:4}}><span style={{width:2,height:10,background:'var(--red)',display:'inline-block'}}/> Today</span>
          </div>
        </div>
      </div>
    );
  };

  return (
    <div>
      <div className="tabs">
        {[{id:'daily',label:'Daily'},{id:'weekly',label:'Weekly'},{id:'monthly',label:'Monthly'},{id:'timeline',label:'Timeline (Gantt)'}].map(t=>(
          <div key={t.id} className={`tab ${tab===t.id?'active':''}`} onClick={()=>setTab(t.id)}>{t.label}</div>
        ))}
      </div>

      {tab==='monthly' && (
        <div>
          <div style={{display:'flex',alignItems:'center',justifyContent:'space-between',marginBottom:16}}>
            <button className="btn btn-secondary btn-sm" onClick={()=>setCurrentDate(d=>{const n=new Date(d);n.setMonth(n.getMonth()-1);return n;})}>← Prev</button>
            <span style={{fontWeight:600,fontSize:15}}>{currentDate.toLocaleDateString('en-US',{month:'long',year:'numeric'})}</span>
            <button className="btn btn-secondary btn-sm" onClick={()=>setCurrentDate(d=>{const n=new Date(d);n.setMonth(n.getMonth()+1);return n;})}>Next →</button>
          </div>
          <div className="cal-grid">
            {['Sun','Mon','Tue','Wed','Thu','Fri','Sat'].map(d=><div key={d} className="cal-day-header">{d}</div>)}
            {days.map(({date,otherMonth},i)=>{
              const ds=date.toISOString().slice(0,10);
              const evts=dayEvents(date);
              return (
                <div key={i} className={`cal-day ${ds===td?'today':''} ${otherMonth?'other-month':''}`}>
                  <div className="cal-day-num" style={{color:ds===td?'var(--accent)':'inherit'}}>{date.getDate()}</div>
                  {evts.slice(0,3).map((e,j)=><div key={j} className={`cal-event ${e.cls}`}>{e.label}</div>)}
                  {evts.length>3&&<div style={{fontSize:9,color:'var(--text-muted)'}}>+{evts.length-3} more</div>}
                </div>
              );
            })}
          </div>
        </div>
      )}

      {tab==='weekly' && (
        <div>
          <div style={{display:'flex',alignItems:'center',justifyContent:'space-between',marginBottom:16}}>
            <button className="btn btn-secondary btn-sm" onClick={()=>setCurrentDate(d=>{const n=new Date(d);n.setDate(n.getDate()-7);return n;})}>← Prev Week</button>
            <span style={{fontWeight:600,fontSize:14}}>Week of {weekStart.toLocaleDateString('en-US',{month:'short',day:'numeric',year:'numeric'})}</span>
            <button className="btn btn-secondary btn-sm" onClick={()=>setCurrentDate(d=>{const n=new Date(d);n.setDate(n.getDate()+7);return n;})}>Next Week →</button>
          </div>
          <div style={{display:'grid',gridTemplateColumns:'repeat(7,1fr)',gap:8}}>
            {weekDays.map((d,i)=>{
              const ds=d.toISOString().slice(0,10);
              const evts=dayEvents(d);
              return (
                <div key={i} style={{background:'var(--bg-card)',border:`1px solid ${ds===td?'var(--accent)':'var(--border)'}`,borderRadius:8,padding:10,minHeight:200}}>
                  <div style={{fontWeight:600,fontSize:12,marginBottom:6,color:ds===td?'var(--accent)':'var(--text-primary)'}}>
                    {d.toLocaleDateString('en-US',{weekday:'short'})} <span style={{color:'var(--text-muted)'}}>{d.getDate()}</span>
                  </div>
                  {evts.map((e,j)=><div key={j} className={`cal-event ${e.cls}`}>{e.label}</div>)}
                  {evts.length===0&&<div style={{fontSize:11,color:'var(--text-muted)',marginTop:8}}>No events</div>}
                </div>
              );
            })}
          </div>
        </div>
      )}

      {tab==='daily' && (
        <div>
          <div style={{display:'flex',alignItems:'center',justifyContent:'space-between',marginBottom:16}}>
            <button className="btn btn-secondary btn-sm" onClick={()=>setCurrentDate(d=>{const n=new Date(d);n.setDate(n.getDate()-1);return n;})}>← Yesterday</button>
            <span style={{fontWeight:600,fontSize:14}}>{currentDate.toLocaleDateString('en-US',{weekday:'long',month:'long',day:'numeric'})}</span>
            <button className="btn btn-secondary btn-sm" onClick={()=>setCurrentDate(d=>{const n=new Date(d);n.setDate(n.getDate()+1);return n;})}>Tomorrow →</button>
          </div>
          {(() => {
            const ds=currentDate.toISOString().slice(0,10);
            const evts=dayEvents(currentDate);
            const dayTasks=tasks.filter(t=>t.dueDate===ds && t.status!=='done');
            return (
              <div>
                {evts.length>0&&<div className="card"><div className="card-header"><span className="card-title">Events</span></div>
                  {evts.map((e,i)=><div key={i} style={{padding:'8px 0',borderBottom:'1px solid var(--border)',fontSize:13}}>{e.label}</div>)}
                </div>}
                <div className="card"><div className="card-header"><span className="card-title">Tasks Due</span></div>
                  {dayTasks.length===0?<div style={{color:'var(--text-muted)',fontSize:13}}>No tasks due today.</div>
                    :dayTasks.map(t=><div key={t.id} style={{display:'flex',justifyContent:'space-between',padding:'8px 0',borderBottom:'1px solid var(--border)'}}>
                      <div><div style={{fontWeight:500}}>{t.name}</div><div style={{fontSize:11,color:'var(--text-muted)'}}>{t.assignee}</div></div>
                      <PriorityBadge priority={t.priority}/>
                    </div>)}
                </div>
              </div>
            );
          })()}
        </div>
      )}

      {tab==='timeline' && (
        <div className="card"><GanttView/></div>
      )}
    </div>
  );
}

// ─── REPORTS ─────────────────────────────────────────────────────────────────
function Reports({ batches, strains, performance, tasks }) {
  const [tab, setTab] = useState('pipeline');
  const td = today();
  const next30 = addDays(td,30);

  const avgByStrain = metric => {
    return strains.map(s=>{
      const recs=performance.filter(p=>p.strainId===s.id);
      if (!recs.length) return null;
      const avg=(recs.reduce((a,r)=>a+(+r[metric]||0),0)/recs.length).toFixed(1);
      return { name:s.name, val:+avg, runs:recs.length };
    }).filter(Boolean).sort((a,b)=>b.val-a.val);
  };

  const maxVal = arr => arr.length ? Math.max(...arr.map(x=>x.val)) : 1;

  const PerfReport = ({ metric, label, color, unit='' }) => {
    const data=avgByStrain(metric);
    if (!data.length) return <div style={{color:'var(--text-muted)',fontSize:13}}>No performance data yet.</div>;
    const mx=maxVal(data);
    return (
      <div>
        {data.map(d=>(
          <div key={d.name} className="perf-bar-wrap">
            <div className="perf-bar-label">
              <span style={{fontWeight:500}}>{d.name}</span>
              <span style={{color,fontWeight:700}}>{d.val}{unit} <span style={{color:'var(--text-muted)',fontWeight:400,fontSize:11}}>({d.runs} run{d.runs>1?'s':''})</span></span>
            </div>
            <div className="perf-bar-track">
              <div className="perf-bar-fill" style={{width:`${(d.val/mx)*100}%`,background:color}}/>
            </div>
          </div>
        ))}
      </div>
    );
  };

  return (
    <div>
      <div className="tabs" style={{flexWrap:'wrap'}}>
        {[{id:'pipeline',l:'Pipeline'},{id:'clone_cuts',l:'Clone Cuts'},{id:'rooting',l:'Rooting'},{id:'transplants',l:'Transplants'},{id:'flips',l:'Flips'},{id:'harvests',l:'Harvests'},{id:'performance',l:'Performance'}].map(t=>(
          <div key={t.id} className={`tab ${tab===t.id?'active':''}`} onClick={()=>setTab(t.id)}>{t.l}</div>
        ))}
      </div>

      {tab==='pipeline' && (
        <div className="card">
          <div className="card-header"><span className="card-title">Propagation Pipeline — All Active Batches</span></div>
          <div className="table-wrap">
            <table>
              <thead><tr><th>Batch</th><th>Strain</th><th>Room</th><th>Stage</th><th>Status</th><th>Days in Stage</th><th>Cut</th><th>Root Target</th><th>Transplant</th><th>Flip</th><th>Harvest</th></tr></thead>
              <tbody>
                {batches.filter(b=>!['archive'].includes(b.stage)).sort((a,b)=>(a.rootingTarget||'').localeCompare(b.rootingTarget||'')).map(b=>{
                  const s=strains.find(x=>x.id===b.strainId);
                  const lastLog=b.stageLog?.slice(-1)[0];
                  const dis=lastLog?diffDays(lastLog.date,td):null;
                  return <tr key={b.id}>
                    <td style={{fontWeight:600}}>{b.batchId}</td>
                    <td>{s?.name}</td>
                    <td style={{color:'var(--text-secondary)',fontSize:12}}>{b.room}</td>
                    <td><StageBadge stage={b.stage}/></td>
                    <td><StatusBadge status={b.status}/></td>
                    <td style={{color:'var(--text-secondary)',fontSize:12}}>{dis!==null?`${dis}d`:'—'}</td>
                    <td style={{fontSize:12}}>{fmtDateShort(b.dateCut)}</td>
                    <td style={{color:'var(--teal)',fontSize:12}}>{fmtDateShort(b.rootingTarget)}</td>
                    <td style={{color:'var(--green)',fontSize:12}}>{fmtDateShort(b.transplantDate)}</td>
                    <td style={{color:'var(--purple)',fontSize:12}}>{fmtDateShort(b.flipDate)}</td>
                    <td style={{color:'var(--gold)',fontSize:12}}>{fmtDateShort(b.harvestDate)}</td>
                  </tr>;
                })}
              </tbody>
            </table>
          </div>
        </div>
      )}

      {tab==='clone_cuts' && (
        <div className="card">
          <div className="card-header"><span className="card-title">✂️ Clone Cut Schedule — Next 60 Days</span></div>
          <div className="table-wrap">
            <table>
              <thead><tr><th>Batch</th><th>Strain</th><th>Source Mother</th><th>Clone Cut Date</th><th>Next Clone Cut</th><th>Days Away</th></tr></thead>
              <tbody>
                {batches.filter(b=>b.nextCloneCut && b.nextCloneCut>=td && b.nextCloneCut<=addDays(td,60))
                  .sort((a,b)=>a.nextCloneCut.localeCompare(b.nextCloneCut)).map(b=>{
                  const s=strains.find(x=>x.id===b.strainId);
                  const days=diffDays(td,b.nextCloneCut);
                  return <tr key={b.id}>
                    <td style={{fontWeight:600}}>{b.batchId}</td>
                    <td>{s?.name}</td>
                    <td style={{color:'var(--text-secondary)',fontSize:12}}>{b.sourceMother||s?.preferredMother||'—'}</td>
                    <td style={{fontSize:12}}>{fmtDateShort(b.dateCut)}</td>
                    <td style={{color:days<=7?'var(--yellow)':'var(--accent)',fontWeight:600}}>{fmtDate(b.nextCloneCut)}</td>
                    <td style={{color:days<=3?'var(--red)':days<=7?'var(--yellow)':'var(--text-secondary)',fontWeight:days<=7?600:400}}>{days===0?'TODAY':days===1?'Tomorrow':`${days} days`}</td>
                  </tr>;
                })}
              </tbody>
            </table>
          </div>
        </div>
      )}

      {['rooting','transplants','flips','harvests'].includes(tab) && (() => {
        const cfg = {
          rooting:  { field:'rootingTarget',  label:'Rooting Schedule',  color:'var(--teal)',   icon:'🌱' },
          transplants:{ field:'transplantDate', label:'Transplant Schedule',color:'var(--green)',  icon:'🪴' },
          flips:    { field:'flipDate',       label:'Flip Schedule',     color:'var(--purple)', icon:'💡' },
          harvests: { field:'harvestDate',    label:'Harvest Schedule',  color:'var(--gold)',   icon:'🌾' },
        }[tab];
        const items=batches.filter(b=>b[cfg.field]).sort((a,b2)=>a[cfg.field].localeCompare(b2[cfg.field]));
        return (
          <div className="card">
            <div className="card-header"><span className="card-title">{cfg.icon} {cfg.label}</span></div>
            <div className="table-wrap">
              <table>
                <thead><tr><th>Batch</th><th>Strain</th><th>Room</th><th>Stage</th><th>{cfg.label.replace(' Schedule','')}</th><th>Days Away</th></tr></thead>
                <tbody>
                  {items.map(b=>{
                    const s=strains.find(x=>x.id===b.strainId);
                    const days=diffDays(td,b[cfg.field]);
                    return <tr key={b.id}>
                      <td style={{fontWeight:600}}>{b.batchId}</td>
                      <td>{s?.name}</td>
                      <td style={{color:'var(--text-secondary)',fontSize:12}}>{b.room}</td>
                      <td><StageBadge stage={b.stage}/></td>
                      <td style={{color:cfg.color,fontWeight:600}}>{fmtDate(b[cfg.field])}</td>
                      <td style={{color:days<0?'var(--red)':days<=7?'var(--yellow)':'var(--text-secondary)'}}>{days<0?`${Math.abs(days)}d overdue`:days===0?'TODAY':`in ${days}d`}</td>
                    </tr>;
                  })}
                </tbody>
              </table>
            </div>
          </div>
        );
      })()}

      {tab==='performance' && (
        <div>
          <div className="four-col" style={{display:'grid',gridTemplateColumns:'repeat(auto-fill,minmax(280px,1fr))',gap:16,marginBottom:16}}>
            <div className="card" style={{marginBottom:0}}><div className="card-title" style={{marginBottom:12}}>🌿 Top by g/ft²</div><PerfReport metric="yieldGft2" label="g/ft²" color="var(--green)" unit=" g/ft²"/></div>
            <div className="card" style={{marginBottom:0}}><div className="card-title" style={{marginBottom:12}}>💧 Top by Rosin %</div><PerfReport metric="rosinPct" label="Rosin %" color="var(--teal)" unit="%"/></div>
            <div className="card" style={{marginBottom:0}}><div className="card-title" style={{marginBottom:12}}>🔬 Top by THC %</div><PerfReport metric="thcPct" label="THC %" color="var(--purple)" unit="%"/></div>
            <div className="card" style={{marginBottom:0}}><div className="card-title" style={{marginBottom:12}}>🌸 Top by Terpene %</div><PerfReport metric="terpPct" label="Terpene %" color="var(--gold)" unit="%"/></div>
          </div>
          <div className="card">
            <div className="card-header"><span className="card-title">Performance History — All Records</span></div>
            <div className="table-wrap">
              <table>
                <thead><tr><th>Batch</th><th>Strain</th><th>g/ft²</th><th>Rosin %</th><th>THC %</th><th>Terpene %</th><th>Notes</th></tr></thead>
                <tbody>
                  {performance.map(p=>{
                    const b=batches.find(x=>x.id===p.batchId);
                    const s=strains.find(x=>x.id===p.strainId);
                    return <tr key={p.id}>
                      <td style={{fontWeight:600}}>{b?.batchId||'—'}</td>
                      <td>{s?.name||'—'}</td>
                      <td style={{color:'var(--green)',fontWeight:600}}>{p.yieldGft2}</td>
                      <td style={{color:'var(--teal)',fontWeight:600}}>{p.rosinPct}%</td>
                      <td style={{color:'var(--purple)',fontWeight:600}}>{p.thcPct}%</td>
                      <td style={{color:'var(--gold)',fontWeight:600}}>{p.terpPct}%</td>
                      <td style={{color:'var(--text-secondary)',fontSize:12}}>{p.notes}</td>
                    </tr>;
                  })}
                </tbody>
              </table>
              {performance.length===0 && <div className="empty-state"><div className="empty-icon">📊</div><div className="empty-title">No performance data yet</div><div style={{fontSize:13}}>Log data from a batch to see results here.</div></div>}
            </div>
          </div>
        </div>
      )}
    </div>
  );
}

// ─── SETTINGS ────────────────────────────────────────────────────────────────
function Settings({ rooms, setRooms, settings, setSettings }) {
  const [newRoom, setNewRoom] = useState('');
  const ROLES = ['Admin','Propagation Manager','Cultivation Manager','Grower','Viewer'];

  return (
    <div>
      <div className="two-col">
        <div className="card">
          <div className="card-header"><span className="card-title">User & Role</span></div>
          <div className="form-group" style={{marginBottom:12}}>
            <label>Current User Name</label>
            <input value={settings.userName||''} onChange={e=>setSettings(p=>({...p,userName:e.target.value}))} placeholder="Your name"/>
          </div>
          <div className="form-group">
            <label>Current Role</label>
            <select value={settings.role||'Admin'} onChange={e=>setSettings(p=>({...p,role:e.target.value}))}>
              {ROLES.map(r=><option key={r}>{r}</option>)}
            </select>
          </div>
          <div style={{marginTop:12,padding:'10px 12px',background:'var(--bg-panel)',borderRadius:8,fontSize:12}}>
            <div style={{color:'var(--text-muted)',marginBottom:6}}>Role Permissions:</div>
            <div style={{color:'var(--text-secondary)'}}>Admin / Managers: Full access (create, edit, delete)</div>
            <div style={{color:'var(--text-secondary)'}}>Grower: Create and edit batches/tasks</div>
            <div style={{color:'var(--yellow)'}}>Viewer: Read-only, no edits</div>
          </div>
        </div>
        <div className="card">
          <div className="card-header"><span className="card-title">Rooms / Areas</span></div>
          <div style={{marginBottom:12}}>
            {rooms.map(r=>(
              <div key={r} style={{display:'flex',justifyContent:'space-between',alignItems:'center',padding:'6px 0',borderBottom:'1px solid var(--border)'}}>
                <span style={{fontSize:13}}>{r}</span>
                <button className="btn btn-danger btn-xs" onClick={()=>setRooms(p=>p.filter(x=>x!==r))}>Remove</button>
              </div>
            ))}
          </div>
          <div style={{display:'flex',gap:8}}>
            <input value={newRoom} onChange={e=>setNewRoom(e.target.value)} placeholder="New room name" onKeyDown={e=>{if(e.key==='Enter'&&newRoom.trim()){setRooms(p=>[...p,newRoom.trim()]);setNewRoom('');}}}/>
            <button className="btn btn-primary" onClick={()=>{if(newRoom.trim()){setRooms(p=>[...p,newRoom.trim()]);setNewRoom('');}}}>Add</button>
          </div>
        </div>
      </div>
      <div className="card">
        <div className="card-header"><span className="card-title">About</span></div>
        <div style={{fontSize:13,color:'var(--text-secondary)',lineHeight:1.8}}>
          <strong style={{color:'var(--accent)'}}>Athena Propagation Planner</strong> — v1.0<br/>
          Built for commercial cannabis cultivation operations. Propagation-first scheduling with backward planning from harvest targets.<br/><br/>
          <strong>Core Logic:</strong> Harvest → Flip → Transplant → Rooted → Clone Cut<br/>
          All data is stored locally in your browser via localStorage. No data is sent to any server.
        </div>
      </div>
    </div>
  );
}

// ─── MAIN APP ─────────────────────────────────────────────────────────────────
function App() {
  const [strains, setStrains] = useLS('prop_strains', DEFAULT_STRAINS);
  const [batches, setBatches] = useLS('prop_batches', DEFAULT_BATCHES);
  const [tasks, setTasks] = useLS('prop_tasks', DEFAULT_TASKS);
  const [performance, setPerformance] = useLS('prop_performance', DEFAULT_PERFORMANCE);
  const [rooms, setRooms] = useLS('prop_rooms', DEFAULT_ROOMS);
  const [settings, setSettings] = useLS('prop_settings', { userName:'Alex', role:'Admin' });
  const [page, setPage] = useState('dashboard');

  const nav = [
    { id:'dashboard', icon:'🏠', label:'Dashboard' },
    { id:'strains',   icon:'🌿', label:'Strains' },
    { id:'batches',   icon:'📦', label:'Batches' },
    { id:'scheduler', icon:'⚡', label:'Scheduler' },
    { id:'tasks',     icon:'✅', label:'Tasks' },
    { id:'calendar',  icon:'📅', label:'Calendar' },
    { id:'reports',   icon:'📊', label:'Reports' },
    { id:'settings',  icon:'⚙️', label:'Settings' },
  ];

  // Bottom nav shows 5 primary items; "more" expands to full list
  const [moreOpen, setMoreOpen] = useState(false);
  const bottomNav = [
    { id:'dashboard', icon:'🏠', label:'Home' },
    { id:'batches',   icon:'📦', label:'Batches' },
    { id:'scheduler', icon:'⚡', label:'Schedule' },
    { id:'tasks',     icon:'✅', label:'Tasks' },
    { id:'more',      icon:'☰',  label:'More' },
  ];

  const pageTitle = nav.find(n=>n.id===page)?.label || '';
  const isViewer = settings.role === 'Viewer';

  const overdueTasks = tasks.filter(t=>t.status!=='done'&&t.dueDate&&t.dueDate<today()).length;
  const cloneCutsWeek = batches.filter(b=>b.nextCloneCut&&b.nextCloneCut>=today()&&b.nextCloneCut<=addDays(today(),7)).length;

  return (
    <div className="app">
      <div className="sidebar">
        <div className="sidebar-logo">
          <div style={{fontSize:22,marginBottom:4}}>🌱</div>
          <div className="sidebar-logo-title">Propagation Planner</div>
          <div className="sidebar-logo-sub">Athena Agriculture</div>
        </div>
        <div className="sidebar-nav">
          <div className="nav-section">
            {nav.map(n=>(
              <div key={n.id} className={`nav-item ${page===n.id?'active':''}`} onClick={()=>setPage(n.id)}>
                <span className="nav-icon">{n.icon}</span>
                <span>{n.label}</span>
                {n.id==='tasks' && overdueTasks>0 && <span style={{marginLeft:'auto',background:'var(--red)',color:'#fff',borderRadius:10,padding:'1px 6px',fontSize:10,fontWeight:700}}>{overdueTasks}</span>}
                {n.id==='scheduler' && cloneCutsWeek>0 && <span style={{marginLeft:'auto',background:'var(--yellow)',color:'#0f1420',borderRadius:10,padding:'1px 6px',fontSize:10,fontWeight:700}}>{cloneCutsWeek}</span>}
              </div>
            ))}
          </div>
        </div>
        <div style={{padding:'12px 16px',borderTop:'1px solid var(--border)',fontSize:12}}>
          <div style={{color:'var(--text-muted)',marginBottom:2}}>Logged in as</div>
          <div style={{fontWeight:600,color:'var(--text-primary)'}}>{settings.userName||'User'}</div>
          <div style={{marginTop:4}}><span className="role-badge" style={{fontSize:10}}>{settings.role}</span></div>
        </div>
      </div>

      {/* More menu overlay */}
      {moreOpen && (
        <div style={{position:'fixed',inset:0,zIndex:300,background:'rgba(0,0,0,0.6)'}} onClick={()=>setMoreOpen(false)}>
          <div style={{position:'absolute',bottom:70,left:0,right:0,background:'var(--bg-panel)',borderTop:'1px solid var(--border)',borderRadius:'16px 16px 0 0',padding:'16px 8px 8px'}} onClick={e=>e.stopPropagation()}>
            <div style={{textAlign:'center',fontSize:12,color:'var(--text-muted)',marginBottom:12}}>More</div>
            <div style={{display:'grid',gridTemplateColumns:'repeat(4,1fr)',gap:8}}>
              {[{id:'strains',icon:'🌿',label:'Strains'},{id:'calendar',icon:'📅',label:'Calendar'},{id:'reports',icon:'📊',label:'Reports'},{id:'settings',icon:'⚙️',label:'Settings'}].map(n=>(
                <div key={n.id} style={{display:'flex',flexDirection:'column',alignItems:'center',gap:4,padding:'12px 8px',background:'var(--bg-card)',borderRadius:10,cursor:'pointer',border:`1px solid ${page===n.id?'var(--accent)':'var(--border)'}`}}
                  onClick={()=>{setPage(n.id);setMoreOpen(false);}}>
                  <span style={{fontSize:24}}>{n.icon}</span>
                  <span style={{fontSize:11,color:page===n.id?'var(--accent)':'var(--text-secondary)',fontWeight:500}}>{n.label}</span>
                </div>
              ))}
            </div>
          </div>
        </div>
      )}

      <div className="main">
        <div className="topbar">
          <div className="topbar-title">{nav.find(n=>n.id===page)?.icon} {pageTitle}</div>
          <div className="topbar-right">
            {cloneCutsWeek>0&&<span className="topbar-alert" style={{background:'rgba(234,179,8,0.15)',color:'var(--yellow)',borderRadius:6,padding:'4px 10px',fontSize:12,fontWeight:600}}>✂️ {cloneCutsWeek} this week</span>}
            {isViewer && <span style={{background:'rgba(239,68,68,0.1)',color:'var(--red)',borderRadius:6,padding:'4px 10px',fontSize:12}}>👁 View Only</span>}
          </div>
        </div>
        <div className="content">
          {page==='dashboard' && <Dashboard batches={batches} tasks={tasks} strains={strains} performance={performance}/>}
          {page==='strains' && <Strains strains={strains} setStrains={isViewer?()=>{}:setStrains} performance={performance} batches={batches}/>}
          {page==='batches' && <Batches batches={batches} setBatches={isViewer?()=>{}:setBatches} strains={strains} rooms={rooms} performance={performance} setPerformance={isViewer?()=>{}:setPerformance}/>}
          {page==='scheduler' && <Scheduler strains={strains} batches={batches} setBatches={isViewer?()=>{}:setBatches}/>}
          {page==='tasks' && <Tasks tasks={tasks} setTasks={isViewer?()=>{}:setTasks} batches={batches} strains={strains}/>}
          {page==='calendar' && <CalendarView batches={batches} tasks={tasks} strains={strains}/>}
          {page==='reports' && <Reports batches={batches} strains={strains} performance={performance} tasks={tasks}/>}
          {page==='settings' && <Settings rooms={rooms} setRooms={setRooms} settings={settings} setSettings={setSettings}/>}
        </div>
      </div>

      {/* Bottom navigation — mobile portrait only */}
      <div className="bottom-nav">
        {bottomNav.map(n=>{
          const isMore = n.id==='more';
          const isActive = isMore ? moreOpen : page===n.id;
          const badge = n.id==='tasks' && overdueTasks>0 ? overdueTasks : n.id==='scheduler' && cloneCutsWeek>0 ? cloneCutsWeek : null;
          const badgeYellow = n.id==='scheduler';
          return (
            <div key={n.id} className={`bottom-nav-item ${isActive?'active':''}`}
              onClick={()=>isMore ? setMoreOpen(o=>!o) : (setPage(n.id), setMoreOpen(false))}>
              {badge && <span className={`bnav-badge ${badgeYellow?'yellow':''}`}>{badge}</span>}
              <span className="bnav-icon">{n.icon}</span>
              <span className="bnav-label">{n.label}</span>
            </div>
          );
        })}
      </div>
    </div>
  );
}

ReactDOM.createRoot(document.getElementById('root')).render(<App/>);
</script>
</body>
</html>