// Variation 1: "Clean Board" — Monday-inspired, colorful status chips, board layout
(function(){
const { useState } = React;

// ========== Shared Shell — עכשיו משתמש ב-AppShell ==========
const V1Shell = ({ children, active, onNav, onBack, title, subtitle, actions, projectNav }) => {
  if (typeof AppShell !== 'undefined') {
    return (
      <AppShell
        active={active}
        onNav={onNav}
        onBack={onBack}
        title={title}
        subtitle={subtitle}
        actions={actions}
        projectNav={projectNav}
      >
        {children}
      </AppShell>
    );
  }
  // fallback
  return (
    <div style={{ display: 'flex', height: '100%', direction: 'rtl' }}>
      <main style={{ flex: 1, overflow: 'auto' }}>{children}</main>
    </div>
  );
};

// ========== Projects List ==========
const StatusChip = ({ status, label }) => {
  const styles = {
    active: { bg: '#eff6ff', fg: '#1d4ed8', dot: '#3b82f6' },
    done: { bg: '#ecfdf5', fg: '#047857', dot: '#10b981' },
    attention: { bg: '#fffbeb', fg: '#b45309', dot: '#f59e0b' },
    delay: { bg: '#fef2f2', fg: '#b91c1c', dot: '#ef4444' },
  }[status] || { bg: '#f1f5f9', fg: '#475569', dot: '#94a3b8' };
  return (
    <span style={{
      display: 'inline-flex', alignItems: 'center', gap: 6,
      background: styles.bg, color: styles.fg, fontSize: 12, fontWeight: 600,
      padding: '4px 10px', borderRadius: 4, whiteSpace: 'nowrap',
    }}>
      <span style={{ width: 6, height: 6, background: styles.dot, borderRadius: 3 }}/>
      {label}
    </span>
  );
};

const ProgressBar = ({ value, status = 'active' }) => {
  const colors = {
    active: '#3b82f6',
    done: '#10b981',
    attention: '#f59e0b',
    delay: '#ef4444',
  };
  return (
    <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
      <div style={{ flex: 1, height: 6, background: '#f1f5f9', borderRadius: 3, overflow: 'hidden' }}>
        <div style={{ height: '100%', width: `${value}%`, background: colors[status], borderRadius: 3 }}/>
      </div>
      <span style={{ fontSize: 12, fontWeight: 600, color: 'var(--v1-ink)', minWidth: 32, textAlign: 'left' }}>{value}%</span>
    </div>
  );
};

const V1ProjectsList = ({ onOpenProject, onNewProject, onNav }) => {
  const [filter, setFilter] = useState('all');
  const [showBudget, setShowBudget] = useState(() => {
    return localStorage.getItem('ybp_show_budget') !== 'false';
  });
  const { isMobile, isLandscape } = useViewport();
  const toggleBudget = () => {
    const next = !showBudget;
    setShowBudget(next);
    localStorage.setItem('ybp_show_budget', String(next));
  };
  const projects = YBP_DATA.projects;
  const counts = {
    all: projects.length,
    active: projects.filter(p => p.status === 'active').length,
    attention: projects.filter(p => p.status === 'attention' || p.status === 'delay').length,
    done: projects.filter(p => p.status === 'done').length,
  };
  const filtered = filter === 'all' ? projects :
    filter === 'attention' ? projects.filter(p => p.status === 'attention' || p.status === 'delay') :
    projects.filter(p => p.status === filter);

  return (
    <V1Shell
      active="list"
      onNav={onNav}
      title="הפרויקטים שלי"
      subtitle={`${projects.length} פרויקטים פעילים • סה״כ תקציב ${fmtMoney(projects.reduce((s,p)=>s+p.budget, 0))}`}
      actions={
        <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
          <button onClick={toggleBudget} style={{
            background: showBudget ? '#f1f5f9' : '#fff',
            color: showBudget ? '#6b7280' : '#1f2937',
            border: '1px solid var(--v1-border)',
            padding: '7px 12px', borderRadius: 6, fontSize: 12.5, fontWeight: 600,
            cursor: 'pointer', fontFamily: 'inherit',
            display: 'flex', alignItems: 'center', gap: 5,
          }} title={showBudget ? 'הסתר תקציב' : 'הצג תקציב'}>
            {showBudget ? 'הסתר תקציב' : 'הצג תקציב'}
          </button>
          <button onClick={onNewProject} style={{
            background: 'var(--v1-accent)', color: '#fff', border: 'none',
            padding: '8px 14px', borderRadius: 6, fontSize: 13, fontWeight: 600, cursor: 'pointer',
            display: 'flex', alignItems: 'center', gap: 6, fontFamily: 'inherit',
          }}>
            <Icon name="plus" size={15} />
            פרויקט חדש
          </button>
        </div>
      }
    >
      {/* KPI Row — desktop only */}
      {!isMobile && (
        <div style={{ padding: '24px 28px 0', display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 14 }}>
          {[
            { label: 'פעילים', value: counts.active, color: '#3b82f6', trend: '+2 החודש' },
            { label: 'דורש תשומת לב', value: counts.attention, color: '#f59e0b', trend: 'דורש מעקב' },
            { label: 'הושלמו', value: counts.done, color: '#10b981', trend: 'שנת 2026' },
            { label: 'תקציב ממוצע', value: fmtMoney(Math.round(projects.reduce((s,p)=>s+p.budget,0)/projects.length)), color: '#6366f1', trend: 'לפרויקט' },
          ].map((k, i) => (
            <div key={i} style={{
              background: '#fff', border: '1px solid var(--v1-border)',
              borderRadius: 10, padding: '16px 18px', position: 'relative',
            }}>
              <div style={{ position: 'absolute', top: 0, right: 0, bottom: 0, width: 3, background: k.color, borderRadius: '0 10px 10px 0' }}/>
              <div style={{ fontSize: 12, color: 'var(--v1-ink-soft)', fontWeight: 500 }}>{k.label}</div>
              <div style={{ fontSize: 26, fontWeight: 700, margin: '4px 0 2px', letterSpacing: -0.5 }}>{k.value}</div>
              <div style={{ fontSize: 11.5, color: 'var(--v1-ink-soft)' }}>{k.trend}</div>
            </div>
          ))}
        </div>
      )}

      {/* Filter tabs — desktop only */}
      {!isMobile && (
        <div style={{ padding: '24px 28px 12px', display: 'flex', gap: 6, alignItems: 'center' }}>
          {[
            { k: 'all', label: 'הכל', n: counts.all },
            { k: 'active', label: 'פעילים', n: counts.active },
            { k: 'attention', label: 'דורש מעקב', n: counts.attention },
            { k: 'done', label: 'הושלמו', n: counts.done },
          ].map(t => (
            <button key={t.k} onClick={() => setFilter(t.k)} style={{
              background: filter === t.k ? 'var(--v1-sidebar)' : '#fff',
              color: filter === t.k ? '#fff' : 'var(--v1-ink)',
              border: '1px solid ' + (filter === t.k ? 'var(--v1-sidebar)' : 'var(--v1-border)'),
              padding: '7px 14px', borderRadius: 6,
              fontSize: 13, fontWeight: 500, cursor: 'pointer',
              fontFamily: 'inherit', display: 'flex', alignItems: 'center', gap: 5,
            }}>
              {t.label}
              <span style={{ opacity: 0.7, fontSize: 12 }}>{t.n}</span>
            </button>
          ))}
          <div style={{ flex: 1 }}/>
          <button style={{
            background: '#fff', border: '1px solid var(--v1-border)',
            padding: '7px 12px', borderRadius: 6, fontSize: 13, cursor: 'pointer',
            fontFamily: 'inherit', display: 'flex', alignItems: 'center', gap: 6,
          }}>
            <Icon name="filter" size={14}/>
            סינון נוסף
          </button>
        </div>
      )}

      {/* Projects — mobile cards / desktop table */}
      {isMobile ? (
        <div style={{
          padding: isLandscape ? '0 10px 10px' : '0 14px 20px',
          display: 'grid',
          gridTemplateColumns: isLandscape ? '1fr 1fr' : '1fr',
          gap: isLandscape ? 8 : 8,
        }}>
          {projects.map(p => {
            const statusColor = p.status === 'active' ? '#3b82f6' : p.status === 'done' ? '#10b981' : p.status === 'delay' ? '#ef4444' : '#f59e0b';
            return (
            <div key={p.id} onClick={() => onOpenProject(p.id)} style={{
              background: '#fff', borderRadius: 10,
              padding: isLandscape ? '10px 12px 8px' : '13px 14px 11px',
              border: '1px solid var(--v1-border)', cursor: 'pointer',
              boxShadow: '0 1px 3px rgba(0,0,0,0.05)',
              borderRight: `4px solid ${statusColor}`,
            }}>
              <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: isLandscape ? 6 : 8 }}>
                <ProjectPlaceholder kind={p.cover} style={{ width: isLandscape ? 32 : 38, height: isLandscape ? 32 : 38, borderRadius: 6, flexShrink: 0 }}/>
                <div style={{ flex: 1, minWidth: 0 }}>
                  <div style={{ fontWeight: 700, fontSize: isLandscape ? 13 : 15, color: 'var(--v1-ink)', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{p.name}</div>
                  <div style={{ fontSize: 11, color: 'var(--v1-ink-soft)', marginTop: 1, display: 'flex', alignItems: 'center', gap: 4 }}>
                    <span style={{ width: 5, height: 5, borderRadius: '50%', background: statusColor, display: 'inline-block', flexShrink: 0 }}/>
                    {p.statusLabel} · {p.client}
                  </div>
                </div>
                <span style={{ fontSize: 16, color: 'var(--v1-ink-soft)', flexShrink: 0 }}>›</span>
              </div>
              <ProgressBar value={p.progress} status={p.status}/>
              {!isLandscape && (
                <div style={{ display: 'flex', justifyContent: 'space-between', marginTop: 6, fontSize: 11, color: 'var(--v1-ink-soft)' }}>
                  <span>סיום: {p.endDate.slice(5)}{p.daysLeft > 0 ? ` · ${p.daysLeft} ימים` : ''}</span>
                  {p.openIssues > 0 && (
                    <span style={{ color: p.openIssues > 3 ? '#b91c1c' : '#b45309', fontWeight: 600 }}>⚠️ {p.openIssues}</span>
                  )}
                </div>
              )}
            </div>
          );
          })}
        </div>
      ) : (
        <div style={{ padding: '0 28px 28px' }}>
          <div style={{
            background: '#fff', border: '1px solid var(--v1-border)', borderRadius: 10,
            overflow: 'hidden',
          }}>
            <div style={{
              display: 'grid', gridTemplateColumns: showBudget ? '2.2fr 1fr 1.5fr 1fr 1fr 0.8fr 0.7fr' : '2.2fr 1fr 1.5fr 1fr 1fr 0.7fr',
              gap: 12, padding: '12px 20px', background: '#fafbfc',
              fontSize: 11.5, fontWeight: 600, color: 'var(--v1-ink-soft)', textTransform: 'uppercase',
              letterSpacing: 0.3, borderBottom: '1px solid var(--v1-border)',
            }}>
              <div>פרויקט</div>
              <div>סטטוס</div>
              <div>התקדמות</div>
              {showBudget && <div>תקציב</div>}
              <div>תאריך סיום</div>
              <div>צוות</div>
              <div>בעיות</div>
            </div>
            {filtered.map(p => (
              <div key={p.id} onClick={() => onOpenProject(p.id)} style={{
                display: 'grid', gridTemplateColumns: showBudget ? '2.2fr 1fr 1.5fr 1fr 1fr 0.8fr 0.7fr' : '2.2fr 1fr 1.5fr 1fr 1fr 0.7fr',
                gap: 12, padding: '14px 20px', borderBottom: '1px solid var(--v1-border)',
                alignItems: 'center', cursor: 'pointer', fontSize: 13,
                transition: 'background 0.1s',
              }}
              onMouseEnter={e => e.currentTarget.style.background = '#fafbfc'}
              onMouseLeave={e => e.currentTarget.style.background = '#fff'}>
                <div style={{ display: 'flex', alignItems: 'center', gap: 12, minWidth: 0 }}>
                  <ProjectPlaceholder kind={p.cover} style={{ width: 40, height: 40, borderRadius: 6, flexShrink: 0 }}/>
                  <div style={{ minWidth: 0 }}>
                    <div style={{ fontWeight: 600, whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>{p.name}</div>
                    <div style={{ fontSize: 11.5, color: 'var(--v1-ink-soft)', marginTop: 1, whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>{p.client}</div>
                  </div>
                </div>
                <div><StatusChip status={p.status} label={p.statusLabel}/></div>
                <div><ProgressBar value={p.progress} status={p.status}/></div>
                {showBudget && <div>
                  <div style={{ fontWeight: 600 }}>{fmtMoney(p.spent)}</div>
                  <div style={{ fontSize: 11, color: 'var(--v1-ink-soft)' }}>מתוך {fmtMoney(p.budget)}</div>
                </div>}
                <div>
                  <div>{p.endDate.slice(5)}</div>
                  <div style={{ fontSize: 11, color: p.daysLeft < 14 ? '#ef4444' : 'var(--v1-ink-soft)' }}>
                    {p.daysLeft === 0 ? '—' : p.daysLeft + ' ימים'}
                  </div>
                </div>
                <div style={{ display: 'flex', alignItems: 'center', gap: 4 }}>
                  <Icon name="users" size={13} color="var(--v1-ink-soft)"/>
                  <span style={{ fontWeight: 500 }}>{p.team}</span>
                </div>
                <div>
                  {p.openIssues > 0 ? (
                    <span style={{
                      display: 'inline-flex', alignItems: 'center', gap: 4,
                      background: p.openIssues > 3 ? '#fef2f2' : '#fffbeb',
                      color: p.openIssues > 3 ? '#b91c1c' : '#b45309',
                      padding: '3px 8px', borderRadius: 4, fontSize: 12, fontWeight: 600,
                    }}>
                      {p.openIssues}
                    </span>
                  ) : (
                    <span style={{ color: 'var(--v1-ink-soft)' }}>—</span>
                  )}
                </div>
              </div>
            ))}
          </div>
        </div>
      )}
    </V1Shell>
  );
};

window.V1ProjectsList = V1ProjectsList;
window.V1Shell = V1Shell;
window.V1StatusChip = StatusChip;
window.V1ProgressBar = ProgressBar;
})();