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

const { useState: uS2, useEffect: uE2 } = React;

// ==================== FILES ====================
function FilesView() {
  const [filter, setFilter] = uS2('all');
  const files = [
    { id: 1, name: 'Mockup-homepage-v3.png', type: 'image', size: '4.2 MB', date: 'hace 2h', new: true, img: 'https://images.unsplash.com/photo-1517694712202-14dd9538aa97?q=80&w=600' },
    { id: 2, name: 'Brief-estrategia.pdf', type: 'doc', size: '1.8 MB', date: 'hace 1d', icon: 'filePdf' },
    { id: 3, name: 'Logo-final-vectorial.svg', type: 'image', size: '124 KB', date: 'hace 1d', new: true, img: 'https://images.unsplash.com/photo-1460925895917-afdab827c52f?q=80&w=600' },
    { id: 4, name: 'Reel-presentacion.mp4', type: 'video', size: '38 MB', date: 'hace 3d', icon: 'fileVideo' },
    { id: 5, name: 'Sistema-tipografico.fig', type: 'doc', size: '6.1 MB', date: 'hace 4d', icon: 'fileFont' },
    { id: 6, name: 'Capturas-iteracion-2.zip', type: 'doc', size: '24 MB', date: 'hace 5d', icon: 'doc' },
    { id: 7, name: 'Pantallas-mobile.png', type: 'image', size: '2.4 MB', date: 'hace 6d', img: 'https://images.unsplash.com/photo-1551288049-bebda4e38f71?q=80&w=600' },
    { id: 8, name: 'Estrategia-q2.pdf', type: 'doc', size: '890 KB', date: 'hace 1 sem', icon: 'filePdf' }
  ];
  const shown = filter === 'all' ? files : files.filter(f => f.type === filter);

  return (
    <div className="view">
      <div className="section-head reveal">
        <div>
          <h1>Archivos del proyecto</h1>
          <div className="sub">Sincronizado con Google Drive · Actualizado hace 2 min</div>
        </div>
        <button className="btn-outline" style={{ width: 'auto' }}><Icon name="plus"/> Solicitar archivo</button>
      </div>

      <div className="files-toolbar reveal" style={{ '--reveal-delay': '60ms' }}>
        <div className="chip-group">
          {[
            { k: 'all', l: 'Todos' },
            { k: 'image', l: 'Diseños' },
            { k: 'doc', l: 'Documentos' },
            { k: 'video', l: 'Vídeo' }
          ].map(c => (
            <button key={c.k} className={`chip ${filter === c.k ? 'active' : ''}`} onClick={() => setFilter(c.k)}>{c.l}</button>
          ))}
        </div>
        <div className="search" style={{ width: 280 }}>
          <Icon name="search"/>
          <input placeholder="Buscar archivos..." />
        </div>
        <div className="toolbar-spacer"></div>
        <div className="chip-group">
          <button className="chip active">Grid</button>
          <button className="chip">Lista</button>
        </div>
      </div>

      <div className="files-grid reveal" style={{ '--reveal-delay': '120ms' }}>
        {shown.map(f => (
          <div key={f.id} className="file-card">
            <div className="preview" style={f.img ? { backgroundImage: `url(${f.img})` } : {}}>
              {!f.img && <Icon name={f.icon || 'doc'}/>}
              {f.new && <div className="new">NUEVO</div>}
              <div className="drive" title="Sincronizado con Drive">
                <Icon name="drive"/>
              </div>
            </div>
            <div className="info">
              <div className="name" title={f.name}>{f.name}</div>
              <div className="meta">{f.size} · {f.date}</div>
            </div>
          </div>
        ))}
      </div>
    </div>
  );
}

// ==================== MESSAGES ====================
function MessagesView() {
  const [activeConv, setActiveConv] = uS2(0);
  const [draft, setDraft] = uS2('');
  const conversations = [
    { who: 'Equipo AORYN', initials: 'AY', preview: 'Hemos subido los últimos mockups...', time: 'hace 2h', unread: 3, online: true },
    { who: 'María González', initials: 'MA', preview: 'Te paso el archivo en cuanto...', time: 'hace 1d', unread: 0, online: true },
    { who: 'Carlos Ruiz', initials: 'CR', preview: 'La revisión del backend está...', time: 'hace 2d', unread: 0, online: false }
  ];
  const messages = [
    { who: 'system', text: 'María actualizó el progreso a 72%', when: 'hoy · 09:14' },
    { who: 'team', name: 'María', role: 'Diseñadora', text: '¡Buenos días! Hemos subido los últimos mockups de la home. Échales un vistazo cuando puedas.', time: '09:21' },
    { who: 'team', name: 'María', role: 'Diseñadora', text: 'En especial el nuevo bloque de "Servicios" — creemos que mejora bastante la jerarquía.', time: '09:22' },
    { who: 'me', text: 'Genial, los miro esta mañana. ¿La paleta es la que comentamos en la última reunión?', time: '09:48' },
    { who: 'team', name: 'María', role: 'Diseñadora', text: 'Sí, exacto. Naranja → magenta → azul, mismo gradiente del logo. Está aplicado en CTAs y acentos.', time: '09:52' },
    { who: 'me', text: 'Perfecto. ¿Cuándo podríamos ver una primera versión en navegador?', time: '10:05' },
    { who: 'team', name: 'María', role: 'Diseñadora', text: 'Esta semana terminamos la integración API. Te aviso en cuanto haya algo testeable.', time: '10:07' },
    { who: 'typing', name: 'María' }
  ];

  const send = (e) => {
    e.preventDefault();
    if (!draft.trim()) return;
    setDraft('');
  };

  return (
    <div className="view">
      <div className="section-head" style={{ marginBottom: 20 }}>
        <h1>Mensajes</h1>
      </div>
      <div className="msg-layout reveal">
        <div className="conv-list">
          <div className="search" style={{ margin: 16, width: 'auto' }}>
            <Icon name="search"/>
            <input placeholder="Buscar..."/>
          </div>
          <div className="conv-tabs">
            <button className="active">Todos</button>
            <button>No leídos</button>
            <button>Archivados</button>
          </div>
          {conversations.map((c, i) => (
            <button key={i} className={`conv-item ${activeConv === i ? 'active' : ''}`} onClick={() => setActiveConv(i)}>
              <Avatar name={c.who}/>
              <div className="info">
                <div className="row1">
                  <span className="who">{c.who}</span>
                  <span className="time">{c.time}</span>
                </div>
                <div style={{ display: 'flex', alignItems: 'center' }}>
                  <span className="preview">{c.preview}</span>
                  {c.unread > 0 && <span className="badge">{c.unread}</span>}
                </div>
              </div>
            </button>
          ))}
        </div>

        <div className="chat-pane">
          <div className="chat-head">
            <div className="grp">
              <div className="av-stack">
                <Avatar name="María"/>
                <Avatar name="Carlos" tone="linear-gradient(135deg, #5B6BFF, #8B5CF6)"/>
                <Avatar name="Equipo" tone="linear-gradient(135deg, #10B981, #5B6BFF)"/>
              </div>
              <div>
                <div className="who">Equipo AORYN</div>
                <div className="status-line">3 personas · online</div>
              </div>
            </div>
            <div className="actions">
              <button className="icon-btn"><Icon name="video"/></button>
              <button className="icon-btn"><Icon name="info"/></button>
              <button className="icon-btn"><Icon name="more"/></button>
            </div>
          </div>

          <div className="chat-body">
            {messages.map((m, i) => {
              if (m.who === 'system') return <div key={i} className="msg-system"><Icon name="check" width="12" height="12"/>{m.text}</div>;
              if (m.who === 'typing') return (
                <div key={i} className="msg-row">
                  <Avatar name={m.name}/>
                  <div className="msg-bubble">
                    <div className="typing"><span></span><span></span><span></span></div>
                  </div>
                </div>
              );
              if (m.who === 'me') return (
                <div key={i} className="msg-row me">
                  <div className="msg-bubble">
                    {m.text}
                    <div className="msg-meta">{m.time} · <Icon name="check" width="10" height="10"/></div>
                  </div>
                </div>
              );
              return (
                <div key={i} className="msg-row">
                  <Avatar name={m.name}/>
                  <div>
                    <div className="who-tag">{m.name} · {m.role}</div>
                    <div className="msg-bubble">{m.text}<div className="msg-meta">{m.time}</div></div>
                  </div>
                </div>
              );
            })}
          </div>

          <form className="chat-input" onSubmit={send}>
            <button type="button" className="icon-btn"><Icon name="clip"/></button>
            <div className="field">
              <input value={draft} onChange={(e) => setDraft(e.target.value)} placeholder="Escribe un mensaje..."/>
              <button type="button" style={{ color: 'var(--fg-3)', padding: 4 }}><Icon name="smile"/></button>
            </div>
            <button type="submit" className="chat-send"><Icon name="send"/></button>
          </form>
        </div>
      </div>
    </div>
  );
}

// ==================== PROPOSALS ====================
function ProposalsView() {
  const [filter, setFilter] = uS2('all');
  const [showModal, setShowModal] = uS2(false);
  const props = [
    { id: 1, title: 'Añadir animación al header al hacer scroll', desc: 'Un fade-in sutil cuando el usuario hace scroll. Daría sensación más premium.', state: 'review', area: 'Diseño', priority: 'med', date: 'hace 1d' },
    { id: 2, title: 'Cambiar copy de la sección de servicios', desc: 'El texto actual es algo técnico. Propongo simplificarlo.', state: 'approved', area: 'Contenido', priority: 'low', date: 'hace 3d' },
    { id: 3, title: 'Integrar calendario de Calendly en contacto', desc: 'Para que los leads puedan reservar directamente.', state: 'implemented', area: 'Funcionalidad', priority: 'high', date: 'hace 1 sem' },
    { id: 4, title: 'Versión en inglés del sitio', desc: 'Estamos teniendo tráfico internacional. Sería bueno tener i18n.', state: 'review', area: 'Funcionalidad', priority: 'high', date: 'hace 2d' },
    { id: 5, title: 'Foto del equipo en about', desc: 'Tomaremos las fotos la semana que viene.', state: 'pending', area: 'Contenido', priority: 'low', date: 'hace 4d' }
  ];
  const shown = filter === 'all' ? props : props.filter(p => p.state === filter);
  const stateLabel = { pending: 'Pendiente', review: 'En revisión', approved: 'Aprobada', implemented: 'Implementada', rejected: 'Rechazada' };

  return (
    <div className="view">
      <div className="section-head reveal">
        <div>
          <h1>Tus propuestas</h1>
          <div className="sub">Sugiere cambios o nuevas ideas para tu proyecto</div>
        </div>
        <button className="btn-primary" style={{ width: 'auto' }} onClick={() => setShowModal(true)}>
          <Icon name="plus"/> Nueva propuesta
        </button>
      </div>

      <div className="prop-stats reveal" style={{ '--reveal-delay': '60ms' }}>
        <div className="stat-mini"><div className="lbl">Total enviadas</div><div className="val">12</div></div>
        <div className="stat-mini"><div className="lbl">En revisión</div><div className="val" style={{ color: 'var(--warn)' }}>3</div></div>
        <div className="stat-mini"><div className="lbl">Aprobadas</div><div className="val" style={{ color: 'var(--ok)' }}>7</div></div>
        <div className="stat-mini"><div className="lbl">Implementadas</div><div className="val" style={{ color: 'var(--accent-3)' }}>5</div></div>
      </div>

      <div className="files-toolbar reveal" style={{ '--reveal-delay': '120ms' }}>
        <div className="chip-group">
          {[
            { k: 'all', l: 'Todas' },
            { k: 'pending', l: 'Pendientes' },
            { k: 'review', l: 'En revisión' },
            { k: 'approved', l: 'Aprobadas' },
            { k: 'implemented', l: 'Implementadas' }
          ].map(c => (
            <button key={c.k} className={`chip ${filter === c.k ? 'active' : ''}`} onClick={() => setFilter(c.k)}>{c.l}</button>
          ))}
        </div>
      </div>

      <div className="prop-list reveal" style={{ '--reveal-delay': '180ms' }}>
        {shown.map(p => (
          <div key={p.id} className={`prop-card ${p.state}`}>
            <div className="status-bar"></div>
            <div>
              <h4>{p.title}</h4>
              <div className="desc">{p.desc}</div>
              <div className="tags">
                <span className="pill area">{p.area}</span>
                <span className={`pill ${p.priority}`}>Prioridad {p.priority === 'high' ? 'alta' : p.priority === 'med' ? 'media' : 'baja'}</span>
                <span className="pill">{p.date}</span>
              </div>
            </div>
            <div className="state">
              <span style={{ width: 8, height: 8, borderRadius: '50%', background: 'currentColor', boxShadow: '0 0 6px currentColor' }}></span>
              {stateLabel[p.state]}
            </div>
          </div>
        ))}
      </div>

      {showModal && (
        <div className="sheet-modal" style={{ position: 'fixed', inset: 0, zIndex: 50, background: 'var(--modal-bg)', backdropFilter: 'blur(16px)', display: 'flex', alignItems: 'center', justifyContent: 'center', padding: 24, animation: 'revealIn .3s' }} onClick={() => setShowModal(false)}>
          <div className="glass" style={{ width: '100%', maxWidth: 640, padding: 40 }} onClick={(e) => e.stopPropagation()}>
            <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'start', marginBottom: 8 }}>
              <h2 style={{ fontFamily: 'var(--font-display)', fontSize: 32, fontWeight: 400, letterSpacing: '-0.02em' }}>Nueva propuesta</h2>
              <button className="icon-btn" onClick={() => setShowModal(false)}><Icon name="x"/></button>
            </div>
            <div className="sub" style={{ color: 'var(--fg-2)', marginBottom: 28 }}>Describe tu idea o sugerencia. El equipo la revisará.</div>
            <div className="input-block" style={{ marginBottom: 18 }}>
              <label>Título</label>
              <input placeholder="Ej. Añadir filtro de búsqueda en blog"/>
            </div>
            <div className="input-block" style={{ marginBottom: 22 }}>
              <label>Descripción detallada</label>
              <textarea rows="4" placeholder="Cuéntanos en detalle..." style={{ width: '100%', padding: '12px 16px', background: 'rgba(255,255,255,0.03)', border: '1px solid var(--line)', borderRadius: 10, fontSize: 14, color: 'var(--fg)', outline: 'none', resize: 'vertical', fontFamily: 'inherit' }}></textarea>
            </div>
            <div className="input-block" style={{ marginBottom: 22 }}>
              <label>Prioridad</label>
              <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 10 }}>
                {[{k:'high',l:'Alta',c:'var(--err)'},{k:'med',l:'Media',c:'var(--warn)'},{k:'low',l:'Baja',c:'var(--ok)'}].map(o => (
                  <button key={o.k} type="button" style={{ padding: '14px', borderRadius: 12, border: '1px solid var(--line)', background: 'rgba(255,255,255,0.02)', color: 'var(--fg)', fontSize: 13, display: 'flex', alignItems: 'center', gap: 8, justifyContent: 'center' }}>
                    <span style={{ width: 8, height: 8, borderRadius: '50%', background: o.c }}></span>
                    {o.l}
                  </button>
                ))}
              </div>
            </div>
            <button className="btn-primary">Enviar propuesta <Icon name="arrow"/></button>
          </div>
        </div>
      )}
    </div>
  );
}

// ==================== SETTINGS ====================
function SettingsView({ user }) {
  const [tab, setTab] = uS2('profile');
  const [notifs, setNotifs] = uS2({ progress: true, messages: true, files: false, proposals: true, weekly: true });
  const tabs = [{k:'profile',l:'Perfil'},{k:'notifs',l:'Notificaciones'},{k:'security',l:'Seguridad'},{k:'company',l:'Empresa'}];

  return (
    <div className="view">
      <div className="section-head" style={{ marginBottom: 24 }}>
        <h1>Configuración</h1>
      </div>
      <div className="settings-layout">
        <div className="settings-tabs glass" style={{ padding: 16, height: 'fit-content' }}>
          {tabs.map(t => (
            <button key={t.k} className={`tab ${tab === t.k ? 'active' : ''}`} onClick={() => setTab(t.k)}>{t.l}</button>
          ))}
        </div>
        <div className="settings-panel glass">
          {tab === 'profile' && (
            <>
              <h2>Tu perfil</h2>
              <div className="sub">Información personal y preferencias</div>
              <div style={{ display: 'flex', alignItems: 'center', gap: 18, marginBottom: 28, padding: 18, borderRadius: 12, background: 'rgba(255,255,255,0.02)', border: '1px solid var(--line)' }}>
                <div className="avatar" style={{ width: 64, height: 64, fontSize: 22 }}>MG</div>
                <div style={{ flex: 1 }}>
                  <div style={{ fontWeight: 500, marginBottom: 4 }}>Foto de perfil</div>
                  <div style={{ fontSize: 12, color: 'var(--fg-2)' }}>JPG o PNG, máximo 2 MB</div>
                </div>
                <button className="btn-outline" style={{ width: 'auto' }}>Cambiar</button>
              </div>
              <div className="field-row">
                <div className="input-block"><label>Nombre</label><input defaultValue="María"/></div>
                <div className="input-block"><label>Apellidos</label><input defaultValue="González"/></div>
              </div>
              <div className="field-row">
                <div className="input-block"><label>Email</label><input defaultValue={user.email} type="email"/></div>
                <div className="input-block"><label>Teléfono</label><input defaultValue="+34 600 000 000"/></div>
              </div>
              <div className="field-row">
                <div className="input-block"><label>Cargo</label><input defaultValue="Directora de Marketing"/></div>
                <div className="input-block"><label>Empresa</label><input defaultValue="Tech Innovations S.L."/></div>
              </div>
              <div className="field-row">
                <div className="input-block"><label>Zona horaria</label>
                  <select defaultValue="cet"><option value="cet">Europa/Madrid (CET)</option><option>America/New_York</option></select>
                </div>
                <div className="input-block"><label>Idioma</label>
                  <select defaultValue="es"><option value="es">Español</option><option value="en">English</option></select>
                </div>
              </div>
              <button className="btn-primary" style={{ width: 'auto', marginTop: 14 }}>Guardar cambios</button>
            </>
          )}
          {tab === 'notifs' && (
            <>
              <h2>Notificaciones</h2>
              <div className="sub">Decide qué quieres recibir y cómo</div>
              {[
                { k: 'progress', t: 'Actualizaciones de progreso', d: 'Email cuando el progreso del proyecto cambia' },
                { k: 'messages', t: 'Nuevos mensajes', d: 'Email cuando el equipo te escribe' },
                { k: 'files', t: 'Nuevos archivos', d: 'Email cuando suben un archivo' },
                { k: 'proposals', t: 'Cambios en propuestas', d: 'Email cuando una propuesta cambia de estado' },
                { k: 'weekly', t: 'Resumen semanal', d: 'Email cada lunes con el resumen del proyecto' }
              ].map(n => (
                <div key={n.k} className="notif-row">
                  <div className="info">
                    <div className="title">{n.t}</div>
                    <div className="desc">{n.d}</div>
                  </div>
                  <button className={`toggle ${notifs[n.k] ? 'on' : ''}`} onClick={() => setNotifs({ ...notifs, [n.k]: !notifs[n.k] })}></button>
                </div>
              ))}
            </>
          )}
          {tab === 'security' && (
            <>
              <h2>Seguridad</h2>
              <div className="sub">Mantén tu cuenta protegida</div>
              <div className="field-row">
                <div className="input-block"><label>Contraseña actual</label><input type="password" placeholder="••••••••"/></div>
                <div className="input-block"><label>Nueva contraseña</label><input type="password" placeholder="••••••••"/></div>
              </div>
              <button className="btn-outline" style={{ width: 'auto', marginBottom: 28 }}>Actualizar contraseña</button>
              <div className="notif-row">
                <div className="info">
                  <div className="title">Autenticación de 2 factores</div>
                  <div className="desc">Añade una capa extra de seguridad con código por SMS o app</div>
                </div>
                <button className="toggle"></button>
              </div>
              <div className="notif-row">
                <div className="info">
                  <div className="title">Notificar inicios de sesión</div>
                  <div className="desc">Email cuando se accede desde un dispositivo nuevo</div>
                </div>
                <button className="toggle on"></button>
              </div>
            </>
          )}
          {tab === 'company' && (
            <>
              <h2>Empresa</h2>
              <div className="sub">Datos de tu empresa para facturación y contratos</div>
              <div className="field-row">
                <div className="input-block"><label>Razón social</label><input defaultValue="Tech Innovations S.L."/></div>
                <div className="input-block"><label>CIF</label><input defaultValue="B-12345678"/></div>
              </div>
              <div className="field-row">
                <div className="input-block"><label>Dirección</label><input defaultValue="Calle Mayor 123"/></div>
                <div className="input-block"><label>Ciudad</label><input defaultValue="Madrid"/></div>
              </div>
            </>
          )}
        </div>
      </div>
    </div>
  );
}

Object.assign(window, { FilesView, MessagesView, ProposalsView, SettingsView });