// screen-v2-training-plan.jsx
// Sezione "Piano di allenamento" lato atleta.
//
// Rispecchia la sezione "Cronologia obiettivi / Piano di allenamento"
// presente nel profilo atleta lato allenatore (screen-dashboard-coach.jsx),
// ma in modalità di sola lettura: l'atleta vede gli obiettivi definiti
// dal coach, divisi per stato, con i relativi esercizi e video.
//
// L'atleta NON può creare/eliminare obiettivi né cambiarne lo stato:
// quelle azioni restano del coach. Può però segnalare "Ho lavorato a
// questo obiettivo" → un soft-ping al coach (mock, niente backend).

// ── DATI MOCK ─────────────────────────────────────────────────────────────
// Stessa forma usata lato coach (vedi ACCEPTED_STUDENTS in screen-dashboard-coach.jsx).
// Qui rappresentano il piano dell'atleta loggato (Lorenzo / Luca).
const ATHLETE_OBJECTIVES = [
  {
    id: 'o0',
    text: 'Smorzata corta in difesa',
    duration: '2 settimane',
    createdAt: 'Oggi',
    status: 'in_corso',
    completedAt: null,
    exercises: [
      {
        id: 'o0_e1',
        text: 'Prova la smorzata su almeno 5 punti per set — preferibilmente su palle corte o medio-corte dell\'avversario.',
        video: null,
      },
    ],
  },
  {
    id: 'o1',
    text: 'Migliorare il rovescio in back',
    duration: '1 settimana',
    createdAt: '3 giorni fa',
    status: 'in_corso',
    completedAt: null,
    exercises: [
      {
        id: 'o1_e1',
        text: '30 ripetizioni di rovescio in back a sessione, partendo da palla semi-alta sul lato rovescio.',
        video: { title: 'Tecnica rovescio in back', source: 'youtube', url: 'https://youtube.com/watch?v=demo1' },
      },
    ],
  },
  {
    id: 'o2',
    text: 'Servizio kick consistente al 70%',
    duration: '1 mese',
    createdAt: '2 settimane fa',
    status: 'in_corso',
    completedAt: null,
    exercises: [
      {
        id: 'o2_e1',
        text: 'Lancia il servizio kick sul quadrato di vantaggio: obiettivo 7 su 10. Focalizzati sul pronation del polso.',
        video: { title: 'Allenamento servizio kick', source: 'youtube', url: 'https://youtu.be/qYrJm-Ef8oE' },
      },
      {
        id: 'o2_e2',
        text: 'Ripeti a secco il gesto del kick davanti allo specchio o a muro: 20 ripetizioni per sessione, senza palla.',
        video: null,
      },
    ],
  },
  {
    id: 'o3',
    text: 'Pattern dritto inside-out dopo 3 colpi neutri',
    duration: '2 settimane',
    createdAt: '1 mese fa',
    status: 'completato',
    completedAt: '5 giorni fa',
    exercises: [
      {
        id: 'o3_e1',
        text: 'Drill con il coach: scambio neutro 3 colpi, poi spostamento al centro e inside-out. Ripeti 15 volte per serie.',
        video: { title: 'Drill inside-out', source: 'youtube', url: 'https://youtu.be/810qemv2qbA' },
      },
      {
        id: 'o3_e2',
        text: 'In partita: identifica almeno 3 situazioni per set in cui applicare lo schema e fallo consapevolmente.',
        video: null,
      },
    ],
  },
  {
    id: 'o4',
    text: 'Volée di chiusura dopo approccio profondo',
    duration: '3 settimane',
    createdAt: '6 settimane fa',
    status: 'fallito',
    completedAt: '2 settimane fa',
    exercises: [
      {
        id: 'o4_e1',
        text: 'Drill approccio + prima volée: palla profonda sul lato dritto, approccio inside-in, volée di chiusura incrociata. 10 serie per sessione.',
        video: null,
      },
    ],
  },
];

// Filtri disponibili lato atleta — niente "Eliminati" (sono del cestino del coach).
const ATHLETE_OBJ_FILTERS = [
  { key: 'tutti',      label: 'Tutti',          dot: null },
  { key: 'in_corso',   label: 'In corso',       dot: 'var(--accent-strong)' },
  { key: 'completato', label: 'Completati',     dot: '#3a7a3e' },
  { key: 'fallito',    label: 'Non completati', dot: '#a85333' },
];

// Tonalità per la testata dei gruppi (allineate al coach view).
const V2_GROUP_TONES = {
  accent:  { dot: 'var(--accent-strong)', pillBg: 'var(--accent-soft)', pillFg: 'var(--accent-strong)' },
  success: { dot: '#3a7a3e', pillBg: 'rgba(58,122,62,0.16)',    pillFg: '#3a7a3e' },
  fail:    { dot: '#a85333', pillBg: 'rgba(168,83,51,0.14)',    pillFg: '#a85333' },
  neutral: { dot: 'var(--muted)', pillBg: 'var(--surface-deep)', pillFg: 'var(--muted)' },
};

// ── COMPONENTE PRINCIPALE ─────────────────────────────────────────────────
function V2TrainingPlan() {
  const [filter, setFilter] = React.useState('in_corso');
  // Set degli obiettivi per cui l'atleta ha già premuto "Segnala come fatto"
  const [signaled, setSignaled] = React.useState(() => new Set());

  const counts = {
    tutti:      ATHLETE_OBJECTIVES.length,
    in_corso:   ATHLETE_OBJECTIVES.filter((o) => o.status === 'in_corso').length,
    completato: ATHLETE_OBJECTIVES.filter((o) => o.status === 'completato').length,
    fallito:    ATHLETE_OBJECTIVES.filter((o) => o.status === 'fallito').length,
  };

  const inCorso     = ATHLETE_OBJECTIVES.filter((o) => o.status === 'in_corso');
  const completati  = ATHLETE_OBJECTIVES.filter((o) => o.status === 'completato');
  const falliti     = ATHLETE_OBJECTIVES.filter((o) => o.status === 'fallito');

  // Visibilità dei gruppi in base al filtro selezionato
  const showInCorso    = filter === 'tutti' || filter === 'in_corso';
  const showCompletati = filter === 'tutti' || filter === 'completato';
  const showFalliti    = filter === 'tutti' || filter === 'fallito';

  const signal = (id) => {
    setSignaled((prev) => {
      const next = new Set(prev);
      next.add(id);
      return next;
    });
  };

  return (
    <section style={{
      padding: 24, borderRadius: 24,
      background: 'var(--surface)', border: '1px solid var(--border)',
    }}>
      {/* Header */}
      <div style={{
        display: 'flex', alignItems: 'flex-start', justifyContent: 'space-between',
        gap: 12, marginBottom: 16, flexWrap: 'wrap',
      }}>
        <div style={{ flex: 1, minWidth: 0 }}>
          <p style={{
            margin: 0, fontSize: 11, fontWeight: 700,
            color: 'var(--accent-strong)', letterSpacing: '0.06em', textTransform: 'uppercase',
          }}>Cronologia obiettivi</p>
          <h2 style={{
            margin: '4px 0 0',
            fontFamily: '"Instrument Serif", Georgia, serif',
            fontSize: 24, fontWeight: 400, letterSpacing: '-0.01em',
            color: 'var(--ink)',
          }}>Piano di allenamento</h2>
          <p style={{
            margin: '4px 0 0', fontSize: 13, color: 'var(--muted)',
            letterSpacing: '-0.005em', lineHeight: 1.45, maxWidth: 560,
          }}>
            Gli obiettivi che il tuo coach ha definito per te. Aprili per vedere
            esercizi e video di riferimento.
          </p>
        </div>

        {/* Summary chip — quanti obiettivi attivi */}
        <div style={{
          display: 'inline-flex', alignItems: 'center', gap: 8,
          padding: '8px 14px', borderRadius: 999,
          background: 'var(--accent-soft)', color: 'var(--accent-strong)',
          border: '1px solid transparent',
          fontSize: 12, fontWeight: 600, letterSpacing: '-0.005em',
          flexShrink: 0,
        }}>
          <span style={{
            width: 8, height: 8, borderRadius: '50%',
            background: 'var(--accent-strong)',
            boxShadow: '0 0 0 3px rgba(255,255,255,0.6)',
          }} />
          <span>
            <strong style={{ fontVariantNumeric: 'tabular-nums' }}>{counts.in_corso}</strong>{' '}
            obiettiv{counts.in_corso === 1 ? 'o' : 'i'} attiv{counts.in_corso === 1 ? 'o' : 'i'}
          </span>
        </div>
      </div>

      {/* Filtri */}
      <V2ObjFilter value={filter} onChange={setFilter} counts={counts} />

      {/* Gruppi */}
      {showInCorso && (
        <V2ObjGroup
          title="In corso"
          subtitle={`Lavora a quest${inCorso.length === 1 ? "o" : "i"} prossim${inCorso.length === 1 ? "o" : "i"} ${inCorso.length === 1 ? 'allenamento' : 'allenamenti'}`}
          count={inCorso.length}
          tone="accent"
          empty="Il coach non ti ha ancora assegnato obiettivi attivi. Scrivigli per definire i prossimi passi."
          objectives={inCorso}
          signaled={signaled}
          onSignal={signal}
        />
      )}

      {showCompletati && (
        <V2ObjGroup
          title="Completati"
          subtitle="Obiettivi raggiunti con successo"
          count={completati.length}
          tone="success"
          empty="Nessun obiettivo completato — ancora. I prossimi finiranno qui."
          objectives={completati}
          signaled={signaled}
          onSignal={signal}
        />
      )}

      {showFalliti && (
        <V2ObjGroup
          title="Non completati"
          subtitle="Riprendere e capire cosa è mancato"
          count={falliti.length}
          tone="fail"
          empty="Nessun obiettivo non completato. Continua così."
          objectives={falliti}
          signaled={signaled}
          onSignal={signal}
          hideIfEmpty
        />
      )}

      {/* Footer note — come si modificano gli obiettivi */}
      <div style={{
        marginTop: 18, padding: '12px 14px', borderRadius: 12,
        background: 'var(--bg)', border: '1px dashed var(--border)',
        display: 'flex', alignItems: 'center', gap: 10,
        color: 'var(--muted)', fontSize: 12, letterSpacing: '-0.005em',
      }}>
        <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor"
             strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"
             style={{ flexShrink: 0 }}>
          <circle cx="12" cy="12" r="10" />
          <line x1="12" y1="8" x2="12" y2="12" />
          <line x1="12" y1="16" x2="12.01" y2="16" />
        </svg>
        <span>
          Il piano è gestito dal tuo coach. Vuoi proporre un cambio?{' '}
          <a href="#" style={{
            color: 'var(--accent-strong)', textDecoration: 'none',
            fontWeight: 600,
          }}>Scrivi al coach →</a>
        </span>
      </div>
    </section>
  );
}

// ── FILTRO ────────────────────────────────────────────────────────────────
function V2ObjFilter({ value, onChange, counts }) {
  return (
    <div
      role="tablist"
      aria-label="Filtra obiettivi"
      style={{
        display: 'flex', flexWrap: 'wrap', gap: 6,
        padding: 6, borderRadius: 14,
        background: 'var(--surface-deep)',
        border: '1px solid var(--border)',
        marginBottom: 4,
      }}
    >
      {ATHLETE_OBJ_FILTERS.map((it) => {
        const active = value === it.key;
        const count = counts[it.key] ?? 0;
        return (
          <button
            key={it.key}
            role="tab"
            aria-selected={active}
            onClick={() => onChange(it.key)}
            style={{
              display: 'inline-flex', alignItems: 'center', gap: 6,
              height: 32, padding: '0 12px',
              borderRadius: 10,
              background: active ? 'var(--bg)' : 'transparent',
              color: active ? 'var(--ink)' : 'var(--muted)',
              border: active ? '1px solid var(--border)' : '1px solid transparent',
              boxShadow: active ? '0 1px 2px rgba(0,0,0,0.04)' : 'none',
              fontFamily: 'inherit', fontSize: 13, fontWeight: active ? 600 : 500,
              cursor: 'pointer', letterSpacing: '-0.005em',
            }}
          >
            {it.dot && (
              <span style={{
                width: 7, height: 7, borderRadius: '50%',
                background: it.dot, flexShrink: 0,
              }} />
            )}
            <span>{it.label}</span>
            <span style={{
              padding: '0 6px', borderRadius: 999,
              background: active ? 'var(--surface-deep)' : 'transparent',
              color: active ? 'var(--ink)' : 'var(--muted)',
              fontSize: 11, fontWeight: 700,
              fontVariantNumeric: 'tabular-nums',
              minWidth: 18, textAlign: 'center',
            }}>{count}</span>
          </button>
        );
      })}
    </div>
  );
}

// ── GRUPPO ────────────────────────────────────────────────────────────────
function V2ObjGroup({ title, subtitle, count, tone, empty, objectives, signaled, onSignal, hideIfEmpty }) {
  if (objectives.length === 0 && hideIfEmpty) return null;
  if (objectives.length === 0) {
    return (
      <div style={{ marginTop: 18 }}>
        <V2GroupHeader title={title} subtitle={subtitle} count={0} tone={tone} />
        <div style={{
          padding: 16, borderRadius: 12,
          background: 'var(--bg)', border: '1px dashed var(--border)',
          color: 'var(--muted)', fontSize: 13, textAlign: 'center',
          letterSpacing: '-0.005em',
        }}>{empty}</div>
      </div>
    );
  }
  return (
    <div style={{ marginTop: 18 }}>
      <V2GroupHeader title={title} subtitle={subtitle} count={count} tone={tone} />
      <ul style={{
        margin: 0, padding: 0, listStyle: 'none',
        display: 'flex', flexDirection: 'column', gap: 10,
      }}>
        {objectives.map((o) => (
          <V2ObjCard
            key={o.id}
            objective={o}
            signaled={signaled.has(o.id)}
            onSignal={() => onSignal(o.id)}
          />
        ))}
      </ul>
    </div>
  );
}

function V2GroupHeader({ title, subtitle, count, tone }) {
  const t = V2_GROUP_TONES[tone] || V2_GROUP_TONES.neutral;
  return (
    <div style={{
      display: 'flex', alignItems: 'center', gap: 10,
      marginBottom: 10, paddingBottom: 8,
      borderBottom: '1px solid var(--border)',
    }}>
      <span style={{
        width: 8, height: 8, borderRadius: '50%',
        background: t.dot, flexShrink: 0,
      }} />
      <h4 style={{
        margin: 0, fontSize: 13, fontWeight: 700,
        color: 'var(--ink)', letterSpacing: '-0.005em',
      }}>{title}</h4>
      <span style={{
        padding: '1px 8px', borderRadius: 999,
        background: t.pillBg, color: t.pillFg,
        fontSize: 11, fontWeight: 700,
        fontVariantNumeric: 'tabular-nums',
      }}>{count}</span>
      {subtitle && (
        <span style={{
          fontSize: 12, color: 'var(--muted)',
          letterSpacing: '-0.005em',
          marginLeft: 'auto', textAlign: 'right',
        }}>{subtitle}</span>
      )}
    </div>
  );
}

// ── CARD OBIETTIVO ────────────────────────────────────────────────────────
function V2ObjCard({ objective, signaled, onSignal }) {
  const status = objective.status;
  const isInCorso = status === 'in_corso';
  const isCompletato = status === 'completato';
  const isFallito = status === 'fallito';

  const borderColor =
    isCompletato ? 'rgba(58,122,62,0.4)' :
    isFallito ? 'rgba(192,57,43,0.3)' :
    'var(--border)';

  // Esercizi richiudibili (per ridurre rumore nel feed atleta)
  const [open, setOpen] = React.useState(isInCorso); // attivi: aperti di default
  const exercises = objective.exercises || [];

  return (
    <li style={{
      padding: 16, borderRadius: 16,
      background: 'var(--bg)',
      border: `1px solid ${borderColor}`,
      display: 'flex', flexDirection: 'column', gap: 12,
    }}>
      {/* Top row: status + meta */}
      <div style={{
        display: 'flex', alignItems: 'center', justifyContent: 'space-between',
        gap: 10, flexWrap: 'wrap',
      }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 8, flexWrap: 'wrap' }}>
          <V2ObjBadge status={status} />
          <span style={{
            display: 'inline-flex', alignItems: 'center', gap: 4,
            padding: '3px 8px', borderRadius: 999,
            background: 'var(--surface-deep)', color: 'var(--ink)',
            fontSize: 11, fontWeight: 600, letterSpacing: '-0.005em',
          }}>
            <V2ClockIcon /> {objective.duration}
          </span>
          <span style={{ fontSize: 11, color: 'var(--muted)' }}>
            Assegnato {objective.createdAt}
            {objective.completedAt && ` · concluso ${objective.completedAt}`}
          </span>
        </div>
      </div>

      {/* Titolo obiettivo */}
      <p style={{
        margin: 0, fontSize: 15, fontWeight: 500,
        color: isFallito ? 'var(--muted)' : 'var(--ink)',
        letterSpacing: '-0.005em', lineHeight: 1.45,
        textDecoration: isFallito ? 'line-through' : 'none',
      }}>{objective.text}</p>

      {/* Esercizi (collapsible) */}
      {exercises.length > 0 && (
        <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
          <button
            type="button"
            onClick={() => setOpen((v) => !v)}
            style={{
              display: 'inline-flex', alignItems: 'center', gap: 6,
              background: 'transparent', border: 'none', padding: 0,
              cursor: 'pointer',
              fontFamily: 'inherit',
              fontSize: 10, fontWeight: 700, letterSpacing: '0.08em',
              textTransform: 'uppercase', color: 'var(--muted)',
              alignSelf: 'flex-start',
            }}
            aria-expanded={open}
          >
            <svg width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="currentColor"
                 strokeWidth="2.4" strokeLinecap="round" strokeLinejoin="round"
                 style={{ transform: open ? 'rotate(90deg)' : 'rotate(0deg)', transition: 'transform .15s ease' }}>
              <polyline points="9 18 15 12 9 6" />
            </svg>
            {exercises.length > 1 ? `${exercises.length} esercizi` : 'Esercizio'}
          </button>

          {open && exercises.map((ex, i) => (
            <div key={ex.id || i} style={{
              padding: '10px 12px', borderRadius: 12,
              background: 'var(--surface)', border: '1px solid var(--border)',
              display: 'flex', flexDirection: 'column', gap: 8,
            }}>
              <div style={{ display: 'flex', alignItems: 'flex-start', gap: 8 }}>
                <span style={{
                  width: 20, height: 20, borderRadius: '50%',
                  background: 'var(--surface-deep)', color: 'var(--muted)',
                  display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
                  fontSize: 9, fontWeight: 700, flexShrink: 0, marginTop: 1,
                }}>{i + 1}</span>
                <span style={{
                  fontSize: 13, color: 'var(--ink)',
                  letterSpacing: '-0.005em', lineHeight: 1.45,
                }}>{ex.text}</span>
              </div>
              {ex.video && <V2ObjVideoLink video={ex.video} />}
            </div>
          ))}
        </div>
      )}

      {/* Azione atleta (solo obiettivi in corso) */}
      {isInCorso && (
        <div style={{ display: 'flex', gap: 6, flexWrap: 'wrap' }}>
          <button
            onClick={onSignal}
            disabled={signaled}
            style={{
              display: 'inline-flex', alignItems: 'center', gap: 6,
              height: 32, padding: '0 12px',
              borderRadius: 999,
              background: signaled ? 'rgba(58,122,62,0.14)' : 'var(--bg)',
              color: signaled ? '#3a7a3e' : 'var(--ink)',
              border: `1px solid ${signaled ? 'rgba(58,122,62,0.3)' : 'var(--border)'}`,
              fontFamily: 'inherit', fontSize: 12, fontWeight: 600,
              cursor: signaled ? 'default' : 'pointer', letterSpacing: '-0.005em',
            }}
          >
            {signaled ? (
              <>
                <svg width="12" height="12" viewBox="0 0 12 12" fill="none">
                  <path d="M2 6.5l2.5 2.5L10 3.5" stroke="currentColor" strokeWidth="2.2"
                        strokeLinecap="round" strokeLinejoin="round" />
                </svg>
                Segnalato al coach
              </>
            ) : (
              <>
                <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor"
                     strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
                  <path d="M22 11.08V12a10 10 0 1 1-5.93-9.14" />
                  <polyline points="22 4 12 14.01 9 11.01" />
                </svg>
                Ho lavorato a questo obiettivo
              </>
            )}
          </button>
        </div>
      )}
    </li>
  );
}

// ── BADGE STATO ───────────────────────────────────────────────────────────
function V2ObjBadge({ status }) {
  const map = {
    in_corso:   { bg: 'var(--accent-soft)', fg: 'var(--accent-strong)', label: 'In corso' },
    completato: { bg: 'rgba(58,122,62,0.16)', fg: '#3a7a3e', label: '✓ Completato' },
    fallito:    { bg: 'rgba(192,57,43,0.12)', fg: '#a85333', label: '✗ Non completato' },
  };
  const m = map[status] || map.in_corso;
  return (
    <span style={{
      padding: '3px 10px', borderRadius: 999,
      background: m.bg, color: m.fg,
      fontSize: 10, fontWeight: 700,
      letterSpacing: '0.06em', textTransform: 'uppercase',
    }}>{m.label}</span>
  );
}

// ── VIDEO LINK ────────────────────────────────────────────────────────────
function V2ObjVideoLink({ video }) {
  const isYoutube = video.source === 'youtube';
  const href = video.source === 'upload' ? '#' : video.url;
  const Tag = video.source === 'upload' ? 'div' : 'a';
  return (
    <Tag
      href={href}
      target={video.source === 'upload' ? undefined : '_blank'}
      rel="noopener noreferrer"
      style={{
        display: 'flex', alignItems: 'center', gap: 12,
        padding: 10, borderRadius: 12,
        background: 'var(--surface-deep)', border: '1px solid var(--border)',
        color: 'var(--ink)', textDecoration: 'none',
      }}
    >
      <div style={{
        width: 56, height: 38, borderRadius: 8,
        background: 'linear-gradient(135deg, var(--accent) 0%, var(--accent-strong) 100%)',
        position: 'relative', flexShrink: 0,
        display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
        overflow: 'hidden',
      }}>
        <svg viewBox="0 0 100 60" preserveAspectRatio="none"
             style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', opacity: 0.25 }}>
          <g stroke="var(--accent-fg)" strokeWidth="0.6" fill="none">
            <rect x="10" y="6" width="80" height="48" />
            <line x1="10" y1="30" x2="90" y2="30" />
            <line x1="50" y1="6" x2="50" y2="54" />
          </g>
        </svg>
        <span style={{ color: 'rgba(255,255,255,0.95)', position: 'relative' }}>
          <svg width="18" height="18" viewBox="0 0 24 24" fill="currentColor">
            <polygon points="6 4 20 12 6 20 6 4" />
          </svg>
        </span>
      </div>
      <div style={{ flex: 1, minWidth: 0 }}>
        <div style={{
          fontSize: 13, fontWeight: 600, color: 'var(--ink)',
          letterSpacing: '-0.005em',
          whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis',
        }}>{video.title}</div>
        <div style={{
          display: 'inline-flex', alignItems: 'center', gap: 4, marginTop: 2,
          padding: '1px 7px', borderRadius: 999,
          background: isYoutube ? 'rgba(255,0,0,0.1)' : 'var(--bg)',
          color: isYoutube ? '#c00' : 'var(--muted)',
          fontSize: 9, fontWeight: 700,
          letterSpacing: '0.04em', textTransform: 'uppercase',
        }}>
          {isYoutube ? 'YouTube' : 'Caricato'}
        </div>
      </div>
      {video.source !== 'upload' && (
        <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor"
             strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"
             style={{ color: 'var(--muted)', flexShrink: 0 }}>
          <path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6" />
          <polyline points="15 3 21 3 21 9" />
          <line x1="10" y1="14" x2="21" y2="3" />
        </svg>
      )}
    </Tag>
  );
}

function V2ClockIcon() {
  return (
    <svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor"
         strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
      <circle cx="12" cy="12" r="10" />
      <polyline points="12 6 12 12 16 14" />
    </svg>
  );
}

Object.assign(window, { V2TrainingPlan });