/* global React, DAY_TYPES, BLOCKS, EX_FIELDS, INITIAL_PROGRAMS,
   Eyebrow, Card, Pill, Button */
const { useState, useRef, useEffect } = React;

function ProgramScreen({ programs, setPrograms, memberId, tweaks }) {
  const [selectedDay, setSelectedDay] = useState('normal');
  const [selectedBlock, setSelectedBlock] = useState('snabbhet');
  const dt = DAY_TYPES.find(x => x.id === selectedDay);
  const block = programs[selectedDay][selectedBlock];

  const updateBlock = (patch) => {
    setPrograms(p => ({
      ...p,
      [selectedDay]: {
        ...p[selectedDay],
        [selectedBlock]: { ...p[selectedDay][selectedBlock], ...patch },
      }
    }));
  };
  const updateEx = (exId, patch) => {
    updateBlock({ exercises: block.exercises.map(e => e.id === exId ? { ...e, ...patch } : e) });
  };
  const removeEx = (exId) => {
    updateBlock({ exercises: block.exercises.filter(e => e.id !== exId) });
  };
  const addEx = () => {
    const newEx = { id: window._nextExId(), name: '', rundor: '', reps: '', vikt: '', tid: '', distans: '', vila: '', notering: '' };
    updateBlock({ exercises: [...block.exercises, newEx] });
  };

  const gridTemplate = EX_FIELDS.map(f => f.w).join(' ') + ' 32px';

  return (
    <div style={{ padding: '32px 32px 80px', maxWidth: 1400, margin: '0 auto' }}>
      <div style={{ marginBottom: 28 }}>
        <Eyebrow style={{ marginBottom: 10 }}>6 dagtyper · 4 block per dag · redigerbart</Eyebrow>
        <h1 style={{ margin: 0, fontFamily: 'var(--font-sans)', fontSize: 36, fontWeight: 500, letterSpacing: '-0.02em', lineHeight: 1.1 }}>
          Träningsprogram
        </h1>
        <p style={{ margin: '10px 0 0', maxWidth: 620, fontSize: 14, color: 'var(--fg-muted)' }}>
          Definiera övningar per dagtyp. Välj dagtyp i listan, växla mellan blocken (Snabbhet, Styrka, Kondition, Rörlighet) och fyll i aktivitet, rundor, reps, vikt, tid, distans och vila för varje övning.
        </p>
      </div>

      <div style={{ display: 'grid', gridTemplateColumns: '180px 1fr', gap: 20 }}>
        {/* Day type picker */}
        <div>
          <Eyebrow style={{ marginBottom: 10 }}>Dagtyp</Eyebrow>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 4 }}>
            {DAY_TYPES.map(d => {
              const sel = d.id === selectedDay;
              return (
                <button key={d.id} onClick={() => setSelectedDay(d.id)} style={{
                  display: 'flex', alignItems: 'center', gap: 10, padding: '10px 12px', textAlign: 'left', cursor: 'pointer',
                  border: '1px solid ' + (sel ? 'var(--ink-950)' : 'var(--border)'),
                  background: sel ? 'var(--ink-950)' : 'var(--bg-raised)',
                  color: sel ? '#fff' : 'var(--fg)', borderRadius: 4, fontFamily: 'var(--font-sans)',
                }}>
                  <span style={{ width: 8, height: 8, borderRadius: 999, background: d.dot, flexShrink: 0 }} />
                  <span style={{ fontSize: 13, fontWeight: sel ? 500 : 400 }}>{d.label}</span>
                </button>
              );
            })}
          </div>
        </div>

        {/* Right pane */}
        <Card pad={0}>
          {/* Header + block tabs */}
          <div style={{ padding: '18px 20px 0', borderBottom: '1px solid var(--border)' }}>
            <div style={{ display: 'flex', alignItems: 'baseline', gap: 12, marginBottom: 16 }}>
              <Eyebrow>Dagtyp</Eyebrow>
              <h2 style={{ margin: 0, fontFamily: 'var(--font-sans)', fontSize: 24, fontWeight: 500, letterSpacing: '-0.015em', display: 'flex', alignItems: 'center', gap: 8 }}>
                {dt.label}
                <span style={{ width: 8, height: 8, borderRadius: 999, background: dt.dot }} />
              </h2>
            </div>
            <div style={{ display: 'flex', gap: 0 }}>
              {BLOCKS.map(b => {
                const sel = b.key === selectedBlock;
                const count = programs[selectedDay][b.key].exercises.length;
                return (
                  <button key={b.key} onClick={() => setSelectedBlock(b.key)} style={{
                    padding: '10px 18px', cursor: 'pointer', background: 'transparent', border: 'none',
                    borderBottom: '2px solid ' + (sel ? 'var(--ink-950)' : 'transparent'),
                    color: sel ? 'var(--fg)' : 'var(--fg-muted)',
                    fontFamily: 'var(--font-sans)', fontSize: 13, fontWeight: sel ? 500 : 400,
                    marginBottom: -1, display: 'flex', alignItems: 'center', gap: 8,
                  }}>
                    {b.label}
                    <span style={{ fontFamily: 'var(--font-mono)', fontSize: 10, color: 'var(--fg-subtle)', fontVariantNumeric: 'tabular-nums' }}>
                      {count}
                    </span>
                  </button>
                );
              })}
            </div>
          </div>

          {/* Intro */}
          <div style={{ padding: '14px 16px', borderBottom: '1px solid var(--border-faint)' }}>
            <Eyebrow style={{ marginBottom: 6 }}>Intro / instruktion</Eyebrow>
            <input
              value={block.intro || ''}
              onChange={e => updateBlock({ intro: e.target.value })}
              placeholder="Kort instruktion för blocket (uppvärmning, vila, fokus…)"
              style={{
                width: '100%', padding: '6px 0', fontFamily: 'var(--font-sans)', fontSize: 14, color: 'var(--fg)',
                border: 'none', borderBottom: '1px solid var(--border)', background: 'transparent', outline: 'none',
              }}
            />
          </div>

          {/* Table header */}
          <div style={{
            padding: '10px 16px', display: 'grid', gridTemplateColumns: gridTemplate, gap: 6,
            borderBottom: '1px solid var(--border)', background: 'var(--ink-25)',
          }}>
            {EX_FIELDS.map(f => <div key={f.key}><Eyebrow>{f.label}</Eyebrow></div>)}
            <div />
          </div>

          {/* Rows */}
          {block.exercises.length === 0 && (
            <div style={{ padding: '32px 24px', textAlign: 'center', color: 'var(--fg-subtle)', fontSize: 13 }}>
              Inga övningar än. Lägg till den första nedan.
            </div>
          )}
          {block.exercises.map((e, i) => (
            <div key={e.id} style={{
              padding: '8px 16px', display: 'grid', gridTemplateColumns: gridTemplate, gap: 6,
              borderBottom: '1px solid var(--border-faint)', alignItems: 'center', columnGap: 6,
            }}>
              {EX_FIELDS.map(f => (
                <CellInput
                  key={f.key}
                  value={e[f.key]}
                  onChange={v => updateEx(e.id, { [f.key]: v })}
                  placeholder={f.placeholder}
                  mono={f.key !== 'name' && f.key !== 'notering'}
                />
              ))}
              <button
                onClick={() => removeEx(e.id)}
                title="Ta bort"
                style={{
                  width: 28, height: 28, border: '1px solid transparent', background: 'transparent',
                  borderRadius: 4, cursor: 'pointer', color: 'var(--fg-faint)',
                  display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
                }}
                onMouseEnter={ev => { ev.currentTarget.style.background = 'var(--danger-tint)'; ev.currentTarget.style.color = 'var(--danger)'; }}
                onMouseLeave={ev => { ev.currentTarget.style.background = 'transparent'; ev.currentTarget.style.color = 'var(--fg-faint)'; }}
              >
                <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
                  <polyline points="3 6 5 6 21 6" /><path d="M19 6l-1 14a2 2 0 0 1-2 2H8a2 2 0 0 1-2-2L5 6" /><path d="M10 11v6M14 11v6" />
                </svg>
              </button>
            </div>
          ))}

          <div style={{ padding: '12px 16px', display: 'flex', justifyContent: 'space-between', alignItems: 'center', gap: 12, flexWrap: 'wrap' }}>
            <div style={{ display: 'flex', gap: 8, alignItems: 'center' }}>
              <Button kind="secondary" size="sm" onClick={addEx}>
                <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round"><line x1="12" y1="5" x2="12" y2="19" /><line x1="5" y1="12" x2="19" y2="12" /></svg>
                Lägg till övning
              </Button>
              <Button kind="ghost" size="sm" disabled title="Kommer snart">
                <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M2 3h6a4 4 0 0 1 4 4v14a3 3 0 0 0-3-3H2z" /><path d="M22 3h-6a4 4 0 0 0-4 4v14a3 3 0 0 1 3-3h7z" /></svg>
                Välj från bibliotek
              </Button>
            </div>
            <span style={{ fontFamily: 'var(--font-mono)', fontSize: 11, color: 'var(--fg-subtle)', letterSpacing: '0.06em', textTransform: 'uppercase' }}>
              {block.exercises.length} övningar
            </span>
          </div>

          {/* Designer note */}
          <div style={{
            margin: '0 16px 16px', padding: '12px 14px',
            background: 'var(--warning-tint, #FCF6E6)',
            border: '1px dashed var(--warning, #B7791F)',
            borderRadius: 4, display: 'flex', gap: 10, alignItems: 'flex-start',
          }}>
            <div style={{
              width: 20, height: 20, flexShrink: 0, borderRadius: 999,
              background: 'var(--warning, #B7791F)', color: '#fff',
              display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
              fontFamily: 'var(--font-sans)', fontSize: 11, fontWeight: 600,
            }}>i</div>
            <div style={{ fontFamily: 'var(--font-sans)', fontSize: 12.5, color: 'var(--fg)', lineHeight: 1.5 }}>
              <strong style={{ fontWeight: 600 }}>Designernotering — övningsbibliotek (att bygga)</strong><br />
              Övningar bör väljas från ett kategoriserat bibliotek istället för att skrivas in som fri text. Föreslagna kategorier:
              <span style={{ display: 'inline-flex', flexWrap: 'wrap', gap: 4, marginTop: 6 }}>
                {['Sprint / acceleration', 'Bröst & axlar', 'Rygg & pull', 'Ben & knäböj', 'Höft & bål', 'Kondition / intervall', 'Mobilitet / rörlighet', 'Plyometri / hopp', 'Grepp', 'Agility / riktning'].map(c => (
                  <span key={c} style={{
                    padding: '2px 8px', borderRadius: 999,
                    background: 'rgba(255,255,255,0.7)', border: '1px solid var(--border)',
                    fontFamily: 'var(--font-mono)', fontSize: 10.5, color: 'var(--fg-muted)',
                    letterSpacing: '0.02em',
                  }}>{c}</span>
                ))}
              </span>
              <div style={{ marginTop: 8, color: 'var(--fg-muted)' }}>
                Varje övning i biblioteket har egna standardvärden för rundor/reps/tid, instruktionsbild/video och muskelgrupper. "Välj från bibliotek" öppnar en sökbar lista; "Lägg till övning" blir kvar för fritt skapande.
              </div>
            </div>
          </div>
        </Card>
      </div>
    </div>
  );
}

function CellInput({ value, onChange, placeholder, mono }) {
  return (
    <input
      value={value || ''}
      onChange={e => onChange(e.target.value)}
      placeholder={placeholder}
      style={{
        width: '100%', minWidth: 0, padding: '6px 8px',
        fontFamily: mono ? 'var(--font-mono)' : 'var(--font-sans)',
        fontSize: mono ? 12 : 13, color: 'var(--fg)',
        fontVariantNumeric: 'tabular-nums',
        border: '1px solid transparent', borderRadius: 3,
        background: 'transparent', outline: 'none',
        transition: 'background 80ms, border-color 80ms',
      }}
      onFocus={e => { e.currentTarget.style.background = '#fff'; e.currentTarget.style.borderColor = 'var(--signal)'; e.currentTarget.style.boxShadow = '0 0 0 3px rgba(14,133,67,0.18)'; }}
      onBlur={e => { e.currentTarget.style.background = 'transparent'; e.currentTarget.style.borderColor = 'transparent'; e.currentTarget.style.boxShadow = 'none'; }}
      onMouseEnter={e => { if (document.activeElement !== e.currentTarget) e.currentTarget.style.background = 'var(--ink-25)'; }}
      onMouseLeave={e => { if (document.activeElement !== e.currentTarget) e.currentTarget.style.background = 'transparent'; }}
    />
  );
}

window.ProgramScreen = ProgramScreen;