// ============================================================
// Nuevo Proyecto - alta de proyecto con mismas características
// ============================================================
const NuevoProyecto = ({ onCreate, onClose }) => {
  const [form, setForm] = useState({
    nombre: '',
    metaLibros: 400,
    metaImagenes: 70000,
    fechaInicio: '2026-08-02',
    deadline: '',
    responsable: '',
    series: '',
    procesos: ['digitalizacion', 'edicion', 'control_calidad', 'conversion'],
    formatos: ['JPG', 'TIFF', 'PDF-C', 'PDF-BN', 'EPUB'],
    horariosCorte: '11:00, 13:00, 16:00, 18:00',
  });

  const [creado, setCreado] = useState(false);

  const set = (k, v) => setForm({ ...form, [k]: v });

  const puedeCrear = form.nombre && form.metaLibros && form.metaImagenes && form.deadline && form.responsable;

  const crearProyecto = () => {
    if (!puedeCrear) return;
    setCreado(true);
    // Simular guardado
    setTimeout(() => {
      onCreate && onCreate(form);
      onClose && onClose();
    }, 1600);
  };

  if (creado) {
    return (
      <div className="card">
        <div className="card-body" style={{ textAlign: 'center', padding: 60 }}>
          <div style={{ width: 60, height: 60, borderRadius: '50%', background: 'var(--success-soft)', color: 'var(--success)', display: 'inline-flex', alignItems: 'center', justifyContent: 'center', marginBottom: 16 }}>
            <Icon name="check" size={30}/>
          </div>
          <div className="text-serif" style={{ fontSize: 24, fontWeight: 600, letterSpacing: '-0.02em' }}>Proyecto creado</div>
          <div className="text-2 mt-8">{form.nombre}</div>
          <div className="text-sm text-3 mt-4">Meta: {fmtNum(form.metaLibros)} libros · {fmtNum(form.metaImagenes)} imágenes · Deadline {fmtDate(form.deadline)}</div>
          <div className="text-sm text-3 mt-16">Redirigiendo al dashboard del nuevo proyecto…</div>
        </div>
      </div>
    );
  }

  return (
    <div className="stack">
      <div className="card">
        <div className="card-header">
          <Icon name="plus_circle" size={16} style={{ color: 'var(--text-2)' }}/>
          <div>
            <div className="card-title">Nuevo proyecto de digitalización</div>
            <div className="card-subtitle">Crear un nuevo proyecto con las mismas características del proyecto actual</div>
          </div>
        </div>
        <div className="card-body">
          <div className="stack" style={{ gap: 24 }}>
            {/* Info general */}
            <div>
              <div className="detail-section-title mb-12">Información general</div>
              <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 16 }}>
                <div className="field">
                  <label className="field-label">Nombre del proyecto *</label>
                  <input className="input" placeholder="Ej. Fondo Editorial 2027" value={form.nombre} onChange={e => set('nombre', e.target.value)}/>
                </div>
                <div className="field">
                  <label className="field-label">Responsable *</label>
                  <select className="select" value={form.responsable} onChange={e => set('responsable', e.target.value)}>
                    <option value="">Seleccionar supervisor</option>
                    {APP_DATA.USUARIOS.filter(u => u.roles.includes('supervisor')).map(u =>
                      <option key={u.id} value={u.id}>{u.nombre}</option>
                    )}
                  </select>
                </div>
                <div className="field">
                  <label className="field-label">Fecha de inicio *</label>
                  <input type="date" className="input" value={form.fechaInicio} onChange={e => set('fechaInicio', e.target.value)}/>
                </div>
                <div className="field">
                  <label className="field-label">Deadline *</label>
                  <input type="date" className="input" value={form.deadline} onChange={e => set('deadline', e.target.value)}/>
                </div>
              </div>
            </div>

            {/* Metas */}
            <div>
              <div className="detail-section-title mb-12">Metas del proyecto</div>
              <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 16 }}>
                <div className="field">
                  <label className="field-label">Meta de libros *</label>
                  <input type="number" className="input" value={form.metaLibros} onChange={e => set('metaLibros', parseInt(e.target.value) || 0)}/>
                  <div className="field-help">Referencia: proyecto actual = 409 libros</div>
                </div>
                <div className="field">
                  <label className="field-label">Meta de imágenes *</label>
                  <input type="number" className="input" value={form.metaImagenes} onChange={e => set('metaImagenes', parseInt(e.target.value) || 0)}/>
                  <div className="field-help">Referencia: proyecto actual = 70,000 imágenes</div>
                </div>
              </div>
            </div>

            {/* Series */}
            <div>
              <div className="detail-section-title mb-12">Series o colecciones a digitalizar</div>
              <div className="field">
                <label className="field-label">Listado de series (una por línea)</label>
                <textarea
                  className="textarea"
                  placeholder="Clásicos de la Literatura Mexicana&#10;Biblioteca del Estudiante Universitario&#10;Colección Popular FCE..."
                  value={form.series}
                  onChange={e => set('series', e.target.value)}
                />
                <div className="field-help">La base de datos importará automáticamente los libros de cada serie con los campos: Núm. Cons, Serie, Título, Autor, Mención de responsabilidad, Pie de imprenta, Páginas, Clasificación, Código de barras.</div>
              </div>
            </div>

            {/* Procesos */}
            <div>
              <div className="detail-section-title mb-12">Procesos incluidos</div>
              <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 8 }}>
                {[
                  { k: 'digitalizacion', l: 'Digitalización', icon: 'camera' },
                  { k: 'edicion', l: 'Edición', icon: 'edit' },
                  { k: 'control_calidad', l: 'Control Calidad', icon: 'check_shield' },
                  { k: 'conversion', l: 'Conversión', icon: 'convert' },
                ].map(p => (
                  <div
                    key={p.k}
                    className={`check ${form.procesos.includes(p.k) ? 'checked' : ''}`}
                    onClick={() => {
                      const arr = form.procesos.includes(p.k)
                        ? form.procesos.filter(x => x !== p.k)
                        : [...form.procesos, p.k];
                      set('procesos', arr);
                    }}
                    style={{ justifyContent: 'flex-start', padding: 12 }}
                  >
                    <div className="check-box">
                      {form.procesos.includes(p.k) && <Icon name="check" size={12}/>}
                    </div>
                    <Icon name={p.icon} size={14}/>
                    <span>{p.l}</span>
                  </div>
                ))}
              </div>
            </div>

            {/* Formatos */}
            <div>
              <div className="detail-section-title mb-12">Formatos de conversión</div>
              <div style={{ display: 'grid', gridTemplateColumns: 'repeat(5, 1fr)', gap: 8 }}>
                {['JPG', 'TIFF', 'PDF-C', 'PDF-BN', 'EPUB'].map(f => (
                  <div
                    key={f}
                    className={`check ${form.formatos.includes(f) ? 'checked' : ''}`}
                    onClick={() => {
                      const arr = form.formatos.includes(f)
                        ? form.formatos.filter(x => x !== f)
                        : [...form.formatos, f];
                      set('formatos', arr);
                    }}
                    style={{ justifyContent: 'center', padding: 12 }}
                  >
                    <div className="check-box">
                      {form.formatos.includes(f) && <Icon name="check" size={12}/>}
                    </div>
                    <span>{f}</span>
                  </div>
                ))}
              </div>
            </div>

            {/* Horarios */}
            <div>
              <div className="detail-section-title mb-12">Horarios de corte para producción de edición</div>
              <div className="field">
                <label className="field-label">Horarios (jornada L-V 9:00-18:00 con comida 14:00-15:00)</label>
                <input className="input" value={form.horariosCorte} onChange={e => set('horariosCorte', e.target.value)}/>
                <div className="field-help">Predeterminado: 11:00, 13:00, 16:00, 18:00</div>
              </div>
            </div>
          </div>
        </div>
        <div style={{ padding: 16, borderTop: '1px solid var(--border)', display: 'flex', justifyContent: 'flex-end', gap: 8 }}>
          <button className="btn btn-ghost" onClick={onClose}>Cancelar</button>
          <button className="btn btn-primary btn-lg" onClick={crearProyecto} disabled={!puedeCrear}>
            <Icon name="plus" size={14}/>
            Crear proyecto
          </button>
        </div>
      </div>
    </div>
  );
};

Object.assign(window, { NuevoProyecto });