// AI Planner view — goals, alignment, weekly plan, morning brief
const { VISION, ALIGNMENT, AI_ROCK_SUGGESTIONS, WEEKLY_PRIORITIES, MORNING_BRIEF, AI_CHECKS } = window.NORWILL_PLANNER;

function AiPlanner({ persona }) {
  const [tab, setTab] = React.useState('overview'); // overview | alignment | weekly | brief
  const tabs = [
    { id: 'overview',  label: 'Agency Plan',        icon: 'target' },
    { id: 'alignment', label: 'Goal Alignment',     icon: 'link' },
    { id: 'weekly',    label: 'Weekly Planner',     icon: 'calendar' },
    { id: 'brief',     label: 'Morning Briefings',  icon: 'sun' },
  ];
  return (
    <div style={{ padding: 28, maxWidth: 1400 }}>
      <PlannerHeader/>
      <div style={{
        display: 'flex', gap: 2, padding: 4, background: 'var(--ink-50)',
        borderRadius: 11, width: 'fit-content', margin: '22px 0 24px',
        border: '1px solid var(--line)',
      }}>
        {tabs.map(t => {
          const I = Icon[t.icon];
          const active = tab === t.id;
          return (
            <button key={t.id} onClick={() => setTab(t.id)} style={{
              display: 'inline-flex', alignItems: 'center', gap: 7,
              padding: '8px 14px', borderRadius: 8, border: 'none',
              background: active ? 'var(--card)' : 'transparent',
              color: active ? 'var(--brand-700)' : 'var(--ink-600)',
              fontSize: 12.5, fontWeight: active ? 600 : 500, cursor: 'pointer',
              boxShadow: active ? '0 1px 2px rgba(15,23,42,0.08)' : 'none',
            }}>
              <I/>{t.label}
            </button>
          );
        })}
      </div>
      {tab === 'overview'  && <AgencyPlan/>}
      {tab === 'alignment' && <GoalAlignment/>}
      {tab === 'weekly'    && <WeeklyPlanner persona={persona}/>}
      {tab === 'brief'     && <MorningBriefings persona={persona}/>}
    </div>
  );
}

function PlannerHeader() {
  return (
    <div style={{
      display: 'flex', alignItems: 'center', gap: 18,
      padding: 22, borderRadius: 14,
      background: 'linear-gradient(120deg, #042930 0%, var(--brand-700) 55%, var(--brand-500) 100%)',
      color: '#fff', position: 'relative', overflow: 'hidden',
    }}>
      <div style={{ position: 'absolute', top: -60, right: -30, width: 240, height: 240,
        borderRadius: '50%', background: 'radial-gradient(circle, rgba(157,239,197,0.25), transparent 70%)' }}/>
      <div style={{ position: 'absolute', bottom: -40, right: 120, width: 160, height: 160,
        borderRadius: '50%', background: 'radial-gradient(circle, rgba(124,209,216,0.3), transparent 70%)' }}/>
      <div style={{
        width: 52, height: 52, borderRadius: 13,
        background: 'rgba(255,255,255,0.18)', border: '1px solid rgba(255,255,255,0.25)',
        display: 'flex', alignItems: 'center', justifyContent: 'center',
        flexShrink: 0, position: 'relative',
      }}><span style={{ transform: 'scale(1.6)' }}><Icon.sparkle/></span></div>
      <div style={{ flex: 1, position: 'relative' }}>
        <div style={{ fontSize: 11, letterSpacing: 0.1, textTransform: 'uppercase',
          fontWeight: 700, opacity: 0.8 }}>AI Planner · EOS-aware</div>
        <h1 style={{ margin: '4px 0 6px', fontSize: 26, fontWeight: 700, letterSpacing: -0.6 }}>
          Plan the agency. Schedule the week. Show up ready.
        </h1>
        <div style={{ fontSize: 13.5, opacity: 0.9, lineHeight: 1.5, maxWidth: 760 }}>
          Enter your 1-year plan once. Norwill AI breaks it into Rocks, aligns them to the right owner, drafts each person’s weekly priorities, and sends morning briefings that keep everyone pulling the same direction.
        </div>
      </div>
      <div style={{
        display: 'flex', gap: 16, position: 'relative',
      }}>
        {[
          { n: 5, l: 'Agency goals' },
          { n: 6, l: 'Active Rocks' },
          { n: 30, l: 'Weekly priorities' },
        ].map(s => (
          <div key={s.l} style={{
            padding: '12px 16px', borderRadius: 10,
            background: 'rgba(255,255,255,0.12)', border: '1px solid rgba(255,255,255,0.2)',
            minWidth: 90,
          }}>
            <div style={{ fontSize: 24, fontWeight: 700, letterSpacing: -0.5, lineHeight: 1 }}>{s.n}</div>
            <div style={{ fontSize: 10.5, opacity: 0.85, marginTop: 6, letterSpacing: 0.04, textTransform: 'uppercase', fontWeight: 600 }}>{s.l}</div>
          </div>
        ))}
      </div>
    </div>
  );
}

// ─── TAB 1: AGENCY PLAN ───────────────────────────────────────
function AgencyPlan() {
  return (
    <div style={{ display: 'grid', gridTemplateColumns: '1fr 340px', gap: 22, alignItems: 'start' }}>
      <div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
        <VisionCard/>
        <OneYearMeasurables/>
        <OneYearGoals/>
      </div>
      <AiChecksPanel/>
    </div>
  );
}

function VisionCard() {
  return (
    <div className="card" style={{ padding: 22 }}>
      <div style={{ display: 'flex', alignItems: 'center', gap: 10, marginBottom: 16 }}>
        <div style={{ fontSize: 10.5, letterSpacing: 0.08, textTransform: 'uppercase',
          fontWeight: 700, color: 'var(--brand-700)' }}>Vision / traction organizer</div>
        <span style={{ flex: 1 }}/>
        <button style={{ fontSize: 11.5, color: 'var(--ink-600)', background: 'var(--card-alt)',
          border: '1px solid var(--line)', borderRadius: 7, padding: '4px 10px', fontWeight: 500 }}>
          Edit
        </button>
      </div>
      <div style={{
        padding: '14px 16px', borderRadius: 10, background: 'var(--brand-50)',
        border: '1px dashed var(--brand-300)', marginBottom: 14,
      }}>
        <div style={{ fontSize: 10.5, color: 'var(--brand-700)', fontWeight: 700,
          letterSpacing: 0.06, textTransform: 'uppercase', marginBottom: 4 }}>10-year target</div>
        <div style={{ fontSize: 15, fontWeight: 600, color: 'var(--ink-900)', lineHeight: 1.35 }}>
          {VISION.tenYear}
        </div>
      </div>
      <div style={{ fontSize: 11, color: 'var(--ink-500)', fontWeight: 700,
        letterSpacing: 0.06, textTransform: 'uppercase', marginBottom: 10 }}>3-year picture</div>
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gap: 10 }}>
        {[
          { k: 'Revenue',        v: VISION.threeYear.revenue },
          { k: 'Clients',        v: VISION.threeYear.clients },
          { k: 'Caregivers',     v: VISION.threeYear.caregivers },
          { k: 'Accreditation',  v: VISION.threeYear.accreditation },
        ].map(x => (
          <div key={x.k} style={{
            padding: 12, borderRadius: 9, background: 'var(--card-alt)',
            border: '1px solid var(--line)',
          }}>
            <div style={{ fontSize: 10.5, color: 'var(--ink-500)', fontWeight: 600,
              letterSpacing: 0.04, textTransform: 'uppercase' }}>{x.k}</div>
            <div style={{ fontSize: 13, fontWeight: 600, color: 'var(--ink-900)', marginTop: 4, lineHeight: 1.35 }}>{x.v}</div>
          </div>
        ))}
      </div>
      <div style={{ marginTop: 12, padding: '10px 12px', borderRadius: 8,
        background: 'var(--ink-50)', fontSize: 12, color: 'var(--ink-600)', lineHeight: 1.5,
        fontStyle: 'italic' }}>"{VISION.threeYear.notes}"</div>
    </div>
  );
}

function OneYearMeasurables() {
  const p = VISION.oneYear;
  return (
    <div className="card" style={{ padding: 22 }}>
      <div style={{ display: 'flex', alignItems: 'baseline', gap: 10, marginBottom: 14 }}>
        <div>
          <div style={{ fontSize: 10.5, letterSpacing: 0.08, textTransform: 'uppercase',
            fontWeight: 700, color: 'var(--brand-700)' }}>1-year plan · ending {p.ending}</div>
          <div style={{ fontSize: 18, fontWeight: 700, letterSpacing: -0.3, marginTop: 4 }}>Measurables</div>
        </div>
        <span style={{ flex: 1 }}/>
        <div style={{
          padding: '4px 10px', borderRadius: 99, background: 'var(--brand-100)',
          color: 'var(--brand-700)', fontSize: 11, fontWeight: 700,
          letterSpacing: 0.04, textTransform: 'uppercase',
        }}>Revenue {p.revenue.current} / {p.revenue.goal}</div>
      </div>
      <div style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
        {p.measurables.map(m => (
          <div key={m.label} style={{
            display: 'grid', gridTemplateColumns: '1.4fr auto 1fr 60px',
            alignItems: 'center', gap: 14, padding: '10px 12px',
            background: 'var(--card-alt)', border: '1px solid var(--line)',
            borderRadius: 9,
          }}>
            <div style={{ fontSize: 13, fontWeight: 600, color: 'var(--ink-800)' }}>{m.label}</div>
            <div style={{ fontSize: 12, color: 'var(--ink-600)' }}>
              <span style={{ fontWeight: 700, color: 'var(--ink-900)' }}>
                {m.money ? '$' : ''}{m.current.toLocaleString()}
              </span>
              <span style={{ color: 'var(--ink-400)' }}> / {m.money ? '$' : ''}{m.goal.toLocaleString()}</span>
            </div>
            <div style={{ height: 6, background: 'var(--ink-100)', borderRadius: 99, overflow: 'hidden' }}>
              <div style={{
                width: Math.min(100, m.pct) + '%', height: '100%',
                background: m.pct >= 90 ? 'var(--good)' : m.pct >= 75 ? 'var(--warn)' : 'var(--bad)',
                borderRadius: 99,
              }}/>
            </div>
            <div style={{ fontSize: 12, fontWeight: 700, color: 'var(--ink-700)', textAlign: 'right' }}>{m.pct}%</div>
          </div>
        ))}
      </div>
    </div>
  );
}

function OneYearGoals() {
  return (
    <div className="card" style={{ padding: 22 }}>
      <div style={{ display: 'flex', alignItems: 'center', gap: 10, marginBottom: 14 }}>
        <div>
          <div style={{ fontSize: 10.5, letterSpacing: 0.08, textTransform: 'uppercase',
            fontWeight: 700, color: 'var(--brand-700)' }}>1-year plan</div>
          <div style={{ fontSize: 18, fontWeight: 700, letterSpacing: -0.3, marginTop: 4 }}>Goals</div>
        </div>
        <span style={{ flex: 1 }}/>
        <button style={{
          display: 'inline-flex', alignItems: 'center', gap: 6,
          background: 'var(--brand-700)', color: '#fff', border: 'none',
          padding: '7px 12px', borderRadius: 8, fontSize: 12, fontWeight: 600, cursor: 'pointer',
        }}><Icon.sparkle/>Re-parse with AI</button>
      </div>
      <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
        {VISION.oneYear.goals.map((g, i) => {
          const owner = PEOPLE.find(p => p.id === g.owner);
          const rockCount = ALIGNMENT.filter(a => a.goalId === g.id).length;
          return (
            <div key={g.id} style={{
              display: 'flex', alignItems: 'center', gap: 12,
              padding: '12px 14px', background: 'var(--card-alt)',
              border: '1px solid var(--line)', borderRadius: 9,
            }}>
              <div style={{
                width: 26, height: 26, borderRadius: 7, flexShrink: 0,
                background: 'var(--brand-100)', color: 'var(--brand-700)',
                display: 'flex', alignItems: 'center', justifyContent: 'center',
                fontSize: 12, fontWeight: 700,
              }}>{i + 1}</div>
              <div style={{ flex: 1, minWidth: 0 }}>
                <div style={{ fontSize: 13, fontWeight: 600, color: 'var(--ink-900)', lineHeight: 1.35 }}>{g.title}</div>
                <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginTop: 4,
                  fontSize: 11, color: 'var(--ink-500)' }}>
                  <span style={{ display: 'inline-flex', alignItems: 'center', gap: 5 }}>
                    <Avatar person={owner} size={14}/>{owner.name}
                  </span>
                  <span>·</span>
                  <span>{rockCount} Rock{rockCount === 1 ? '' : 's'}</span>
                </div>
              </div>
            </div>
          );
        })}
      </div>
    </div>
  );
}

function AiChecksPanel() {
  return (
    <div style={{ position: 'sticky', top: 80, display: 'flex', flexDirection: 'column', gap: 14 }}>
      <div className="card" style={{ padding: 16 }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 12 }}>
          <span style={{ display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
            width: 26, height: 26, borderRadius: 7,
            background: 'linear-gradient(135deg, var(--brand-700), var(--brand-500))', color: '#fff' }}>
            <Icon.sparkle/>
          </span>
          <div style={{ fontSize: 13, fontWeight: 700 }}>AI Alignment check</div>
        </div>
        <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
          {AI_CHECKS.map((c, i) => {
            const color = c.status === 'good' ? 'var(--good)' : c.status === 'warn' ? 'var(--warn)' : 'var(--bad)';
            const bg = c.status === 'good' ? 'var(--good-bg)' : c.status === 'warn' ? 'var(--warn-bg)' : 'var(--bad-bg)';
            return (
              <div key={i} style={{
                padding: '10px 12px', borderRadius: 8, background: bg, borderLeft: '3px solid ' + color,
              }}>
                <div style={{ fontSize: 12, fontWeight: 700, color: 'var(--ink-900)', display: 'flex', alignItems: 'center', gap: 6 }}>
                  {c.status === 'good' ? <Icon.check/> : <Icon.alert/>}
                  {c.label}
                </div>
                <div style={{ fontSize: 11.5, color: 'var(--ink-600)', marginTop: 4, lineHeight: 1.45 }}>{c.detail}</div>
              </div>
            );
          })}
        </div>
      </div>
      <div className="card" style={{ padding: 16,
        background: 'linear-gradient(160deg, var(--brand-50), var(--card))' }}>
        <div style={{ fontSize: 10.5, color: 'var(--brand-700)', fontWeight: 700,
          letterSpacing: 0.06, textTransform: 'uppercase' }}>Next AI action</div>
        <div style={{ fontSize: 13, fontWeight: 600, marginTop: 6, lineHeight: 1.35 }}>
          Draft Q3 Rocks from this plan
        </div>
        <div style={{ fontSize: 11.5, color: 'var(--ink-600)', marginTop: 6, lineHeight: 1.5 }}>
          I’ll propose 6 Rocks for next quarter, one owner each, linked to your 1-yr goals. You approve or edit.
        </div>
        <button style={{
          marginTop: 10, background: 'var(--brand-700)', color: '#fff', border: 'none',
          padding: '7px 12px', borderRadius: 7, fontSize: 12, fontWeight: 600,
          display: 'inline-flex', alignItems: 'center', gap: 6, cursor: 'pointer',
        }}><Icon.sparkle/>Generate Q3 Rocks</button>
      </div>
    </div>
  );
}

Object.assign(window, { AiPlanner });