// Nawi mobile app — screen recreations (Today, Inbox, Matrix, Calendar, Settings)
// Visual recreation of the Flutter widgets — interactive click-thru, not real wiring.

const TODAY_TASKS = [
  { id: 1, title: 'Send Q3 deck to Salim',          priority: 'p1', done: false, quadrantColor: '#EF4444', meta: [{ label: 'May 18',  color: '#EF4444' }, { dot: '#0EA5E9', label: 'Work' }, { icon: 'notifications', label: '09:30' }] },
  { id: 2, title: 'Coffee with Layla',              priority: 'p3', done: false, quadrantColor: '#4D21FC', dueIs: 'today',  meta: [{ label: 'Today · 3 Ramadan', color: '#F59E0B' }, { dot: '#00D084', label: 'Personal' }] },
  { id: 3, title: 'Renew Iqama before MOI deadline',priority: 'p2', done: false, quadrantColor: '#F59E0B', meta: [{ label: 'Tomorrow' }, { dot: '#F59E0B', label: 'Errands' }, { icon: 'notifications', label: 'بعد المغرب' }] },
  { id: 4, title: 'Review Sara\u2019s PR',                  priority: 'p3', done: false, quadrantColor: '#4D21FC', meta: [{ label: '14:00' }, { dot: '#0EA5E9', label: 'Work' }] },
  { id: 5, title: 'Pay etimad invoice',             priority: 'p4', done: true,  quadrantColor: '#8A8D93', meta: [{ label: 'May 15' }, { dot: '#0EA5E9', label: 'Work' }] },
  { id: 6, title: 'Plan Eid trip with family',      priority: 'p3', done: false, quadrantColor: '#4D21FC', meta: [{ dot: '#00D084', label: 'Personal' }] },
];

const INBOX_TASKS = [
  { id: 11, title: 'Look into Tahaluf sponsorship', priority: 'p4', done: false, meta: [{ label: '3m ago', color: '#B0B3B8' }] },
  { id: 12, title: 'Reply to Nora about workshop',   priority: 'p3', done: false, meta: [{ label: '12m ago', color: '#B0B3B8' }] },
  { id: 13, title: 'Update onboarding copy (AR)',    priority: 'p4', done: false, meta: [{ label: '2h ago',  color: '#B0B3B8' }] },
  { id: 14, title: 'Read \u201cAtomic Habits\u201d ch. 4',         priority: 'p4', done: false, meta: [{ label: 'Yesterday', color: '#B0B3B8' }] },
];

// ─── Today screen ─────────────────────────────────────────────────
function TodayScreen({ tasks, onToggle, onTaskTap, isDark }) {
  const done = tasks.filter(t => t.done).length;
  return (
    <div style={{ flex: 1, overflow: 'auto', paddingBottom: 120 }}>
      <SectionHeader
        title="Today"
        subtitle={`${tasks.length - done} tasks · 3 Ramadan · 14:21`}
        isDark={isDark}
        trailing={<IconBtn name="search" />}
      />
      {tasks.map(t => (
        <TaskTile key={t.id} task={t} isDark={isDark} onToggle={onToggle} onTap={onTaskTap} />
      ))}
    </div>
  );
}

// ─── Inbox screen ─────────────────────────────────────────────────
function InboxScreen({ tasks, onToggle, isDark }) {
  return (
    <div style={{ flex: 1, overflow: 'auto', paddingBottom: 120 }}>
      <SectionHeader
        title="Inbox"
        subtitle={`${tasks.length} tasks waiting to be sorted`}
        isDark={isDark}
        trailing={<IconBtn name="filter_list" />}
      />
      {tasks.map(t => (
        <TaskTile key={t.id} task={t} isDark={isDark} onToggle={onToggle} />
      ))}
    </div>
  );
}

// ─── Matrix (Eisenhower 2×2) screen ───────────────────────────────
function MatrixScreen({ tasks, isDark }) {
  const fg1 = isDark ? '#EDEDED' : '#121316';
  const fg2 = isDark ? '#71747A' : '#8A8D93';
  const quadrants = [
    { id: 'do',        title: 'Do',        ar: 'افعل', color: '#EF4444', tint: isDark ? 'rgba(239,68,68,0.10)' : '#FEF2F2', border: 'rgba(239,68,68,0.25)' },
    { id: 'schedule',  title: 'Schedule',  ar: 'جدول', color: isDark ? '#8B6FFF' : '#4D21FC', tint: isDark ? 'rgba(106,66,255,0.10)' : '#F0ECFF', border: 'rgba(77,33,252,0.25)' },
    { id: 'delegate',  title: 'Delegate',  ar: 'فوض', color: '#C2410C', tint: isDark ? 'rgba(245,158,11,0.10)' : '#FFF5E5', border: 'rgba(194,65,12,0.25)' },
    { id: 'eliminate', title: 'Eliminate', ar: 'احذف', color: isDark ? '#71747A' : '#8A8D93', tint: isDark ? 'rgba(138,141,147,0.10)' : '#F5F5F5', border: 'rgba(138,141,147,0.25)' },
  ];
  const tasksByQ = {
    do:        [{ title: 'Send Q3 deck to Salim', time: '09:30' }, { title: 'Approve hire requisition', time: '11:00' }],
    schedule:  [{ title: 'Plan Eid trip with family' }, { title: 'Review Sara\u2019s PR', time: '14:00' }, { title: 'Coffee with Layla', time: 'Today' }],
    delegate:  [{ title: 'Pull last week\u2019s metrics' }, { title: 'Update onboarding copy' }],
    eliminate: [{ title: 'Newsletter cleanup' }],
  };
  return (
    <div style={{ flex: 1, overflow: 'auto', paddingBottom: 120 }}>
      <SectionHeader title="Matrix" subtitle="Eisenhower priorities · 8 active" isDark={isDark} />
      <div style={{ padding: '0 12px', display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 10 }}>
        {quadrants.map(q => (
          <div key={q.id} style={{
            background: q.tint,
            border: `1px solid ${q.border}`,
            borderRadius: 16,
            padding: '12px 12px 10px',
            minHeight: 168,
            display: 'flex', flexDirection: 'column',
          }}>
            <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 8 }}>
              <div style={{ display: 'flex', alignItems: 'center', gap: 6 }}>
                <span style={{ fontSize: 12, fontWeight: 700, color: q.color, letterSpacing: '-0.1px' }}>{q.title}</span>
                <span style={{ fontSize: 11, color: q.color, opacity: 0.65, fontFamily: '"Almarai", Cairo, sans-serif' }}>{q.ar}</span>
              </div>
              <span style={{ fontSize: 10, fontWeight: 600, color: q.color, opacity: 0.75 }}>
                {tasksByQ[q.id].length}
              </span>
            </div>
            <div style={{ flex: 1, display: 'flex', flexDirection: 'column', gap: 6 }}>
              {tasksByQ[q.id].map((t, i) => (
                <div key={i} style={{
                  background: isDark ? '#111112' : '#FFFFFF',
                  borderRadius: 10,
                  border: isDark ? `1px solid #1F1F22` : 'none',
                  boxShadow: isDark ? 'none' : '0 1px 2px rgba(0,0,0,0.04)',
                  padding: '8px 10px',
                  textAlign: 'center',
                }}>
                  <div style={{ fontSize: 13, fontWeight: 500, color: fg1, lineHeight: 1.25 }}>{t.title}</div>
                  {t.time && <div style={{ fontSize: 11, color: fg2, marginTop: 2, lineHeight: 1.2 }}>{t.time}</div>}
                </div>
              ))}
            </div>
          </div>
        ))}
      </div>
    </div>
  );
}

// ─── Calendar (compact month view) ────────────────────────────────
function CalendarScreen({ isDark }) {
  const fg1 = isDark ? '#EDEDED' : '#121316';
  const fg2 = isDark ? '#71747A' : '#8A8D93';
  const divider = isDark ? '#1F1F22' : '#EBEBEB';
  // Build a month grid: 30 days starting on a Wed (placeholder layout)
  const days = Array.from({ length: 35 }, (_, i) => {
    const d = i - 2; // first row offsets
    return d >= 1 && d <= 31 ? d : null;
  });
  const today = 18;
  const eventDays = { 4: '#006C35', 5: '#2B9720', 18: '#4D21FC', 21: '#EF4444', 22: '#0EA5E9', 27: '#2B9720' };

  return (
    <div style={{ flex: 1, overflow: 'auto', paddingBottom: 120 }}>
      <SectionHeader
        title="May 2026"
        subtitle="Dhul-Qi’dah · 23 events this month"
        isDark={isDark}
        trailing={<IconBtn name="today" />}
      />
      <div style={{ padding: '0 16px' }}>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(7, 1fr)', gap: 4, marginBottom: 8 }}>
          {['S','M','T','W','T','F','S'].map((d, i) => (
            <div key={i} style={{
              textAlign: 'center', fontSize: 11, fontWeight: 600,
              color: fg2, letterSpacing: 0.5,
            }}>{d}</div>
          ))}
        </div>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(7, 1fr)', gap: 4 }}>
          {days.map((d, i) => {
            const isToday = d === today;
            const ev = eventDays[d];
            return (
              <div key={i} style={{
                aspectRatio: '1 / 1.2',
                background: isToday ? (isDark ? 'rgba(106,66,255,0.18)' : '#F0ECFF') : 'transparent',
                border: isToday ? `1px solid ${isDark ? 'rgba(106,66,255,0.35)' : 'rgba(77,33,252,0.25)'}` : 'none',
                borderRadius: 8,
                padding: '6px 4px',
                display: 'flex', flexDirection: 'column',
                alignItems: 'center', justifyContent: 'space-between',
              }}>
                <span style={{
                  fontSize: 14, fontWeight: isToday ? 700 : 500,
                  color: d ? (isToday ? (isDark ? '#8B6FFF' : '#4D21FC') : fg1) : fg2,
                  opacity: d ? 1 : 0.3,
                }}>{d || ''}</span>
                {ev && <span style={{ width: 5, height: 5, borderRadius: '50%', background: ev }} />}
              </div>
            );
          })}
        </div>
      </div>
      <div style={{ height: 1, background: divider, margin: '20px 16px' }} />
      <div style={{ padding: '0 16px' }}>
        <div style={{ fontSize: 12, fontWeight: 600, color: fg2, letterSpacing: 1.2, textTransform: 'uppercase', marginBottom: 12 }}>
          Today · 3 Ramadan
        </div>
        {[
          { name: 'Eid al-Fitr (preparing)', meta: '3 days away · Islamic', color: '#2B9720' },
          { name: 'Coffee with Layla',       meta: '09:00 · Personal',      color: '#00D084' },
          { name: 'Q3 review',               meta: '14:00 – 15:00 · Work',  color: '#0EA5E9' },
        ].map((e, i) => (
          <div key={i} style={{
            display: 'flex', alignItems: 'center', gap: 12,
            padding: '10px 0', borderBottom: i < 2 ? `1px solid ${divider}` : 'none',
          }}>
            <div style={{ width: 3, height: 32, background: e.color, borderRadius: 2 }} />
            <div style={{ flex: 1 }}>
              <div style={{ fontSize: 14, fontWeight: 500, color: fg1, lineHeight: 1.3 }}>{e.name}</div>
              <div style={{ fontSize: 12, color: fg2, marginTop: 2 }}>{e.meta}</div>
            </div>
          </div>
        ))}
      </div>
    </div>
  );
}

// ─── Settings ─────────────────────────────────────────────────────
function SettingsScreen({ isDark, onTheme, onTryPaywall }) {
  const fg1 = isDark ? '#EDEDED' : '#121316';
  const fg2 = isDark ? '#71747A' : '#8A8D93';
  const surface = isDark ? '#111112' : '#FFFFFF';
  const divider = isDark ? '#1F1F22' : '#EBEBEB';

  const Section = ({ title, children }) => (
    <div style={{ marginBottom: 24 }}>
      <div style={{
        fontSize: 12, fontWeight: 500,
        color: fg2, letterSpacing: 0.5, textTransform: 'uppercase',
        padding: '0 16px 8px',
      }}>{title}</div>
      <div style={{
        background: surface,
        border: `1px solid ${divider}`,
        borderRadius: 12,
        margin: '0 16px',
        boxShadow: isDark ? 'none' : '0 1px 2px rgba(0,0,0,0.04)',
      }}>{children}</div>
    </div>
  );
  const Row = ({ icon, label, value, last, onClick, control }) => (
    <Tap onClick={onClick} scale={1} style={{
      display: 'flex', alignItems: 'center',
      padding: '12px 16px',
      borderBottom: last ? 'none' : `1px solid ${divider}`,
      gap: 14,
    }}>
      <Icon name={icon} size={20} color={fg2} />
      <div style={{ flex: 1, fontSize: 15, color: fg1 }}>{label}</div>
      {control || (value && <div style={{ fontSize: 13, color: fg2 }}>{value}</div>)}
      {!control && onClick && <Icon name="chevron_right" size={20} color={fg2} />}
    </Tap>
  );
  const Switch = ({ on, onToggle }) => (
    <Tap onClick={(e) => { e.stopPropagation(); onToggle(); }} scale={1} style={{ width: 51, height: 31, padding: 0 }}>
      <div style={{
        width: 51, height: 31, borderRadius: 16,
        background: on ? (isDark ? '#6A42FF' : '#4D21FC') : (isDark ? '#1F1F22' : '#EBEBEB'),
        position: 'relative',
        transition: 'background 250ms',
      }}>
        <div style={{
          position: 'absolute', top: 2, left: on ? 22 : 2,
          width: 27, height: 27, borderRadius: '50%',
          background: 'white',
          boxShadow: '0 1px 2px rgba(0,0,0,0.2), 0 2px 6px rgba(0,0,0,0.1)',
          transition: 'left 250ms cubic-bezier(0.4,0,0.2,1)',
        }} />
      </div>
    </Tap>
  );

  return (
    <div style={{ flex: 1, overflow: 'auto', paddingBottom: 120 }}>
      <SectionHeader title="Settings" subtitle="Make Nawi yours" isDark={isDark} />

      {/* Premium card */}
      <div style={{
        margin: '0 16px 24px',
        padding: '18px 16px',
        background: isDark ? '#111112' : '#FFFFFF',
        border: `1px solid ${isDark ? 'rgba(106,66,255,0.28)' : 'rgba(77,33,252,0.18)'}`,
        borderRadius: 16,
        display: 'flex', alignItems: 'center', gap: 14,
        boxShadow: isDark ? 'none' : '0 1px 2px rgba(0,0,0,0.04)',
      }}>
        <div style={{
          width: 48, height: 48,
          background: isDark ? 'rgba(106,66,255,0.18)' : '#F0ECFF',
          border: `1px solid ${isDark ? 'rgba(106,66,255,0.28)' : 'rgba(77,33,252,0.18)'}`,
          borderRadius: 14,
          display: 'flex', alignItems: 'center', justifyContent: 'center',
        }}>
          <Icon name="workspace_premium" size={26} color={isDark ? '#8B6FFF' : '#4D21FC'} rounded />
        </div>
        <div style={{ flex: 1, minWidth: 0 }}>
          <div style={{ fontSize: 10, fontWeight: 600, color: isDark ? '#8B6FFF' : '#4D21FC', letterSpacing: 2.4, textTransform: 'uppercase' }}>Premium</div>
          <div style={{ fontSize: 15, fontWeight: 700, color: fg1, marginTop: 4, lineHeight: 1.25 }}>Unlock all features</div>
          <div style={{ fontSize: 12, color: fg2, marginTop: 2 }}>Sync, custom icons, advanced AI</div>
        </div>
        <Tap onClick={onTryPaywall} style={{
          background: isDark ? '#6A42FF' : '#4D21FC',
          color: 'white', borderRadius: 12,
          padding: '10px 16px',
          fontSize: 13, fontWeight: 600,
        }}>Try</Tap>
      </div>

      <Section title="Preferences">
        <Row icon="brightness_4" label="Dark mode" control={<Switch on={isDark} onToggle={onTheme} />} />
        <Row icon="language" label="Language" value="English · العربية" onClick={() => {}} />
        <Row icon="calendar_month" label="Calendar type" value="Dual (Hijri + Greg)" onClick={() => {}} />
        <Row icon="palette" label="Accent color" value="Ultraviolet" onClick={() => {}} last />
      </Section>

      <Section title="Smart input">
        <Row icon="psychology" label="Saudi parser (on-device LLM)" control={<Switch on={true} onToggle={() => {}} />} />
        <Row icon="auto_awesome" label="Duplicate detection" control={<Switch on={true} onToggle={() => {}} />} last />
      </Section>

      <Section title="Account">
        <Row icon="cloud_done" label="Cloud sync" value="In sync · 2m ago" onClick={() => {}} />
        <Row icon="logout" label="Sign out" onClick={() => {}} last />
      </Section>
    </div>
  );
}

// Export
Object.assign(window, {
  TODAY_TASKS, INBOX_TASKS,
  TodayScreen, InboxScreen, MatrixScreen, CalendarScreen, SettingsScreen,
});