/* AORYN Portal — views: Dashboard, Project, Files, Messages, Proposals, Settings */

const { useState: uS, useEffect: uE } = React;

// ==================== DASHBOARD ====================
function Dashboard({ setView }) {
  return (
    <div className="view">
      <div className="dash-hero reveal">
        <div>
          <h1>Hola, <span className="text-grad">María</span></h1>
          <div className="sub">Aquí está el estado actual de tu proyecto · {new Date().toLocaleDateString('es-ES', { weekday: 'long', day: 'numeric', month: 'long' })}</div>
        </div>
        <div className="next-card glass">
          <div className="lbl">Próximo hito</div>
          <div className="when">Reunión de revisión</div>
          <div className="what">Jueves 28 mayo · 10:00 (CET)</div>
        </div>
      </div>

      <div className="project-card glass reveal" style={{ '--reveal-delay': '60ms' }}>
        <div className="project-card-head">
          <div>
            <div className="eyebrow"><span className="dot"></span><span>Proyecto activo</span></div>
            <h2>Rediseño Web + Identidad</h2>
            <div className="deadline">Iniciado el 15 marzo · Entrega estimada 28 mayo</div>
          </div>
          <div className="pct">
            <span className="pct-num">72</span>%
            <span className="pct-sm">Completado</span>
          </div>
        </div>
        <div className="bar" style={{ '--pct': '72%' }}>
          <div className="fill"></div>
        </div>
        <div className="phase-now">
          <div className="dot-live"></div>
          <div className="info">
            <div className="lbl">Fase actual</div>
            <div className="name">Desarrollo Frontend</div>
            <div className="desc">Integración de componentes y conexión con backend en progreso.</div>
          </div>
        </div>
        <div className="stats-row">
          <div className="stat-mini"><div className="lbl">Días transcurridos</div><div className="val">52</div></div>
          <div className="stat-mini"><div className="lbl">Días restantes</div><div className="val">21</div></div>
          <div className="stat-mini"><div className="lbl">Hitos</div><div className="val">5<small>/8</small></div></div>
          <div className="stat-mini"><div className="lbl">Archivos entregados</div><div className="val">24</div></div>
        </div>
      </div>

      <div className="timeline-card glass reveal" style={{ '--reveal-delay': '120ms' }}>
        <div className="head">
          <h3>Cronología del proyecto</h3>
          <button className="chip active" onClick={() => setView('project')}>Ver detalle</button>
        </div>
        <div className="timeline" style={{ '--progress': '62%' }}>
          {[
            { n: 'Estrategia', date: '15 MAR', state: 'done' },
            { n: 'Investigación', date: '28 MAR', state: 'done' },
            { n: 'Diseño', date: '12 ABR', state: 'done' },
            { n: 'Desarrollo', date: 'EN CURSO', state: 'active' },
            { n: 'Testing', date: '20 MAY', state: 'pending' },
            { n: 'Lanzamiento', date: '28 MAY', state: 'pending' }
          ].map((p, i) => (
            <div key={i} className={`phase ${p.state}`}>
              <div className="circle">
                {p.state === 'done' ? <Icon name="check" width="14" height="14"/> : (i+1).toString().padStart(2,'0')}
              </div>
              <div className="name">{p.n}</div>
              <div className="date">{p.date}</div>
            </div>
          ))}
        </div>
      </div>

      <div className="grid-3">
        <div className="panel glass reveal" style={{ '--reveal-delay': '180ms' }}>
          <h3>Últimas actualizaciones<span className="count">7</span></h3>
          {[
            { who: 'María', initials: 'MA', text: 'subió 3 nuevos mockups al proyecto', when: 'hace 2h' },
            { who: 'Carlos', initials: 'CR', text: 'completó la fase de Diseño', when: 'hace 1d' },
            { who: 'Equipo', initials: 'AY', text: 'envió un nuevo mensaje al hilo', when: 'hace 2d' },
            { who: 'María', initials: 'MA', text: 'actualizó el progreso a 72%', when: 'hace 3d' }
          ].map((a, i) => (
            <div key={i} className="activity-item">
              <Avatar name={a.who} className="av"/>
              <div className="content">
                <div className="what"><strong>{a.who}</strong> {a.text}</div>
                <div className="when">{a.when}</div>
              </div>
            </div>
          ))}
          <a className="more">Ver todas <Icon name="arrow" width="12" height="12"/></a>
        </div>

        <div className="panel glass reveal" style={{ '--reveal-delay': '240ms' }}>
          <h3>Próximos hitos<span className="count">4</span></h3>
          {[
            { d: '20', m: 'May', t: 'Inicio QA', desc: 'Revisión cross-browser y mobile', p: 0 },
            { d: '24', m: 'May', t: 'Revisión de copys', desc: 'Aprobación final del contenido', p: 40 },
            { d: '28', m: 'May', t: 'Lanzamiento', desc: 'Deploy a producción', p: 0 },
            { d: '15', m: 'Jun', t: 'Post-launch review', desc: 'Análisis de métricas', p: 0 }
          ].map((m, i) => (
            <div key={i} className="milestone-item">
              <div className="date-chip">
                <div className="d">{m.d}</div>
                <div className="m">{m.m}</div>
              </div>
              <div>
                <div className="title">{m.t}</div>
                <div className="desc">{m.desc}</div>
                {m.p > 0 && <div className="mini-bar"><div className="f" style={{ width: `${m.p}%` }}></div></div>}
              </div>
            </div>
          ))}
        </div>

        <div className="panel glass reveal" style={{ '--reveal-delay': '300ms' }}>
          <h3>Archivos recientes<span className="count">24</span></h3>
          <div className="file-grid">
            {[
              { img: 'https://images.unsplash.com/photo-1517694712202-14dd9538aa97?q=80&w=400', new: true },
              { img: 'https://images.unsplash.com/photo-1460925895917-afdab827c52f?q=80&w=400', new: true },
              { img: 'https://images.unsplash.com/photo-1551288049-bebda4e38f71?q=80&w=400' },
              { img: 'https://images.unsplash.com/photo-1492619375914-88005aa9e8fb?q=80&w=400' }
            ].map((f, i) => (
              <div key={i} className="file-thumb" style={{ backgroundImage: `url(${f.img})` }} onClick={() => setView('files')}>
                {f.new && <div className="new">NUEVO</div>}
              </div>
            ))}
          </div>
          <a className="more" onClick={() => setView('files')}>Ver todos <Icon name="arrow" width="12" height="12"/></a>
        </div>
      </div>

      <div className="cta-banner glass reveal" style={{ '--reveal-delay': '360ms' }}>
        <div>
          <h3>¿Tienes alguna idea o cambio?</h3>
          <p>Cuéntanos qué tienes en mente. El equipo lo revisará y te responderá pronto.</p>
        </div>
        <button className="btn-primary" onClick={() => setView('proposals')}>
          Proponer cambio <Icon name="arrow"/>
        </button>
      </div>
    </div>
  );
}

// ==================== PROJECT DETAIL ====================
function ProjectView() {
  const [tab, setTab] = uS('phases');
  const [openPhase, setOpenPhase] = uS(4);
  return (
    <div className="view">
      <div className="proj-hero reveal" style={{ backgroundImage: 'url(https://images.unsplash.com/photo-1460925895917-afdab827c52f?q=80&w=2400)' }}>
        <div className="proj-hero-content">
          <div className="eyebrow"><span>Proyecto · Web design</span></div>
          <h1>Rediseño Web + Identidad</h1>
          <div className="proj-tags">
            <span className="tag">Branding</span>
            <span className="tag">UI/UX</span>
            <span className="tag">Desarrollo</span>
          </div>
        </div>
      </div>

      <div className="proj-progress glass reveal" style={{ '--reveal-delay': '60ms' }}>
        <div>
          <div className="proj-segments">
            <div className="seg done"></div>
            <div className="seg done"></div>
            <div className="seg done"></div>
            <div className="seg partial" style={{ '--p': '60%' }}></div>
            <div className="seg"></div>
            <div className="seg"></div>
          </div>
          <div className="lbl">5 de 8 hitos completados · Fase actual: Desarrollo Frontend</div>
        </div>
        <div className="pct" style={{ textAlign: 'right' }}>
          <span className="pct-num" style={{ fontFamily: 'var(--font-display)', fontSize: 56, background: 'var(--grad-brand)', WebkitBackgroundClip: 'text', backgroundClip: 'text', color: 'transparent' }}>72</span>
          <span style={{ fontSize: 28, color: 'var(--fg-2)' }}>%</span>
        </div>
      </div>

      <div className="tabs reveal" style={{ '--reveal-delay': '120ms' }}>
        {['Resumen', 'Fases', 'Entregables', 'Equipo', 'Actividad'].map((t, i) => (
          <button key={t} className={`tab ${tab === ['summary','phases','deliverables','team','activity'][i] ? 'active' : ''}`}
            onClick={() => setTab(['summary','phases','deliverables','team','activity'][i])}>{t}</button>
        ))}
      </div>

      {tab === 'phases' && (
        <div>
          {[
            { num: '01', title: 'Estrategia', state: 'done', date: 'Completada 22 marzo', tasks: [
              { t: 'Workshop inicial', done: true },
              { t: 'Auditoría de marca', done: true },
              { t: 'Definición de objetivos', done: true }
            ]},
            { num: '02', title: 'Investigación', state: 'done', date: 'Completada 5 abril', tasks: [
              { t: 'Análisis competitivo', done: true },
              { t: 'Entrevistas con usuarios', done: true }
            ]},
            { num: '03', title: 'Diseño', state: 'done', date: 'Completada 28 abril', tasks: [
              { t: 'Wireframes', done: true },
              { t: 'Sistema visual', done: true },
              { t: 'Mockups finales', done: true }
            ]},
            { num: '04', title: 'Desarrollo Frontend', state: 'current', date: '15 abril – Estimado 24 mayo · 60% completado', tasks: [
              { t: 'Setup del proyecto', done: true },
              { t: 'Componentes base', done: true },
              { t: 'Integración API', done: false, now: true },
              { t: 'Testing responsive', done: false },
              { t: 'Optimización performance', done: false }
            ]},
            { num: '05', title: 'Testing', state: 'pending', date: 'Estimado 20-26 mayo', tasks: [] },
            { num: '06', title: 'Lanzamiento', state: 'pending', date: 'Estimado 28 mayo', tasks: [] }
          ].map((p, i) => (
            <div key={i} className={`phase-acc ${p.state}`} data-open={openPhase === i ? 'true' : 'false'}>
              <button className="phase-acc-head" onClick={() => setOpenPhase(openPhase === i ? -1 : i)}>
                <div className="status">
                  {p.state === 'done' && <Icon name="check" width="14" height="14"/>}
                  {p.state === 'current' && <span className="live-dot"></span>}
                </div>
                <div className="info">
                  <div className="num">Fase {p.num}</div>
                  <div className="title">{p.title}</div>
                  <div className="meta">{p.date}</div>
                </div>
                {p.tasks.length > 0 && <Icon name="chevdown" className="chev" width="16" height="16"/>}
              </button>
              {p.tasks.length > 0 && (
                <div className="phase-acc-body">
                  <div className="phase-acc-content" style={{ paddingTop: 16 }}>
                    {p.tasks.map((t, k) => (
                      <div key={k} className={`subtask ${t.done ? 'done' : ''} ${t.now ? 'now' : ''}`}>
                        <div className="check">
                          {t.done && <Icon name="check" width="10" height="10"/>}
                        </div>
                        <div className="label">{t.t}</div>
                      </div>
                    ))}
                  </div>
                </div>
              )}
            </div>
          ))}
        </div>
      )}

      <button className="fab"><Icon name="plus"/></button>
    </div>
  );
}

Object.assign(window, { Dashboard, ProjectView });