// shaiAcademy — Form primitives
// Shared components used across all form screens

const Field = ({ label, hint, error, success, required, children, span, style }) => (
  <div className={`fld ${span ? 'fld-span-' + span : ''}`} style={style}>
    {label && (
      <div className="fld-label">
        <span>{label} {required && <span className="req">*</span>}</span>
        {hint && !error && <span className="tiny">{hint}</span>}
      </div>
    )}
    {children}
    {error && <div className="fld-error"><Icon name="x" size={12}/> {error}</div>}
    {success && !error && <div className="fld-success"><Icon name="check" size={12}/> {success}</div>}
  </div>
);

const Input = ({ placeholder, value, mono, ok, err, prefix, suffix, type = 'text', ...rest }) => {
  const inp = <input type={type} className={`inp ${ok ? 'ok' : ''} ${err ? 'err' : ''}`} placeholder={placeholder} defaultValue={value} style={mono ? {fontFamily: 'var(--font-mono)'} : {}} {...rest}/>;
  if (prefix || suffix) {
    return (
      <div className="inp-group">
        {prefix && <span className="inp-addon">{prefix}</span>}
        {inp}
        {suffix && <span className="inp-addon inp-addon-right">{suffix}</span>}
      </div>
    );
  }
  return inp;
};

const Textarea = ({ placeholder, value, rows = 4, ...rest }) => (
  <textarea className="txa" rows={rows} placeholder={placeholder} defaultValue={value} {...rest}/>
);

const Select = ({ options, value, ...rest }) => (
  <select className="sel" defaultValue={value} {...rest}>
    {options.map(o => typeof o === 'string'
      ? <option key={o} value={o}>{o}</option>
      : <option key={o.value} value={o.value}>{o.label}</option>
    )}
  </select>
);

const RadioCard = ({ label, desc, selected, onClick, accent }) => (
  <div className={`radio-card ${selected ? 'selected' : ''} ${accent ? 'accent' : ''}`} onClick={onClick}>
    <span className="radio-dot"></span>
    <div>
      <div className="radio-card-label">{label}</div>
      {desc && <div className="radio-card-desc">{desc}</div>}
    </div>
  </div>
);

const Checkbox = ({ label, checked, onClick, desc }) => (
  <div className="chk-row" onClick={onClick}>
    <span className={`chk ${checked ? 'on' : ''}`}>
      {checked && <Icon name="check" size={12}/>}
    </span>
    <div>
      <div style={{fontSize: 14, fontWeight: 500, lineHeight: 1.3}}>{label}</div>
      {desc && <div className="tiny muted" style={{marginTop: 2}}>{desc}</div>}
    </div>
  </div>
);

const Switch = ({ on, onClick }) => (
  <span className={`swt ${on ? 'on' : ''}`} onClick={onClick}></span>
);

// Stepper shown in form sidebar
const FormSteps = ({ steps, current, onJump }) => (
  <div className="form-sidebar">
    {steps.map((s, i) => {
      const state = i < current ? 'done' : i === current ? 'active' : '';
      return (
        <div key={i} className={`form-step ${state}`} onClick={() => onJump && onJump(i)}>
          <span className="form-step-num">
            {i < current ? <Icon name="check" size={12}/> : (i + 1).toString().padStart(2, '0')}
          </span>
          <div className="form-step-label">
            {s.label}
            {s.hint && <span className="tiny">{s.hint}</span>}
          </div>
        </div>
      );
    })}
  </div>
);

// Section heading inside form body
const FormSection = ({ title, desc, children }) => (
  <div className="form-section">
    {title && <h2 className="form-section-title">{title}</h2>}
    {desc && <div className="form-section-desc">{desc}</div>}
    {children}
  </div>
);

// Sticky footer with autosave indicator
const FormFooter = ({ step, total, onPrev, onNext, nextLabel, saving, saved, onSubmit }) => (
  <div className="form-footer">
    <div className="form-footer-meta">
      <span className={`saving-dot ${saving ? 'saving' : ''}`}>
        {saving ? 'Guardando…' : saved || 'Borrador guardado'}
      </span>
      {total && (
        <span className="mono tiny">
          PASO {String((step || 0) + 1).padStart(2, '0')} / {String(total).padStart(2, '0')}
        </span>
      )}
    </div>
    <div className="form-footer-actions">
      {onPrev && <button className="btn btn-ghost" onClick={onPrev}>Atrás</button>}
      {onSubmit
        ? <button className="btn btn-accent" onClick={onSubmit}>{nextLabel || 'Enviar'} <Icon name="arrow_right" size={14}/></button>
        : <button className="btn btn-dark" onClick={onNext}>{nextLabel || 'Continuar'} <Icon name="arrow_right" size={14}/></button>}
    </div>
  </div>
);

// Form page header — title + meta (draft status, ID, etc.)
const FormHeader = ({ eyebrow, title, meta }) => (
  <div className="form-header">
    <div>
      <div className="eyebrow">{eyebrow}</div>
      <h1 className="form-title">{title}</h1>
    </div>
    {meta && <div className="form-header-meta">{meta}</div>}
  </div>
);

// File upload dropzone with fake preview
const Dropzone = ({ title, hint, icon = 'file' }) => (
  <div className="drop">
    <Icon name={icon} size={24} stroke={1.2}/>
    <div className="drop-title">{title || 'Arrastra archivos o haz clic para subir'}</div>
    <div className="drop-hint">{hint || 'PDF, JPG, PNG · hasta 10 MB cada uno'}</div>
  </div>
);

const FileTile = ({ name, size, progress, type = 'pdf' }) => {
  const iconMap = { pdf: 'file', img: 'file' };
  return (
    <div className="file-tile">
      <div className="file-preview" style={type === 'img' ? {background: 'var(--paper-3)'} : {background: 'var(--ink)', color: 'var(--paper)'}}>
        {type === 'img' ? <span className="tiny mono">IMG</span> : <span className="tiny mono" style={{fontWeight: 600}}>PDF</span>}
      </div>
      <div className="file-meta">
        <div className="file-name">{name}</div>
        <div className="file-size">{size}</div>
        {progress !== undefined && progress < 100 && (
          <div className="file-bar"><span style={{width: progress + '%'}}/></div>
        )}
      </div>
      <button className="btn btn-ghost btn-sm"><Icon name="x" size={12}/></button>
    </div>
  );
};

// DNI lookup preview (RENIEC style)
const DniResult = ({ name, nacimiento, verified = true }) => (
  <div className="dni-result">
    <Avatar name={name}/>
    <div style={{flex: 1, minWidth: 0}}>
      <div style={{fontWeight: 500, fontSize: 14}}>{name}</div>
      <div className="tiny muted">Nac. {nacimiento} · {verified ? 'RENIEC verificado' : 'sin verificar'}</div>
    </div>
    {verified && (
      <span className="badge badge-success" style={{background: 'oklch(0.55 0.14 145)', color: 'var(--paper)', borderColor: 'transparent'}}>
        <Icon name="check" size={10}/> Válido
      </span>
    )}
  </div>
);

// Fake signature
const SignaturePad = ({ signed, name }) => (
  <div className="sig-pad" style={signed ? {borderStyle: 'solid', borderColor: 'var(--ink)'} : {}}>
    <div className="sig-line"></div>
    <div className="sig-hint">FIRMA AQUÍ</div>
    {signed && (
      <svg viewBox="0 0 400 120" style={{position: 'absolute', inset: 0, padding: 12}}>
        <path d="M20,70 Q40,20 60,70 T100,60 Q130,30 160,70 L170,50 Q200,10 240,80 T300,60 L340,65" stroke="var(--ink)" strokeWidth="2.5" fill="none" strokeLinecap="round"/>
        <path d="M50,90 L180,92" stroke="var(--ink)" strokeWidth="1" fill="none"/>
      </svg>
    )}
    {signed && name && (
      <div style={{position: 'absolute', bottom: -22, left: 12, fontSize: 12, color: 'var(--ink-3)'}}>
        {name} · {new Date().toLocaleDateString('es-PE', {day: '2-digit', month: 'short', year: 'numeric'})}
      </div>
    )}
  </div>
);

// Review row (resumen)
const RevRow = ({ label, value, onEdit }) => (
  <div className="rev-row">
    <span className="rev-label">{label}</span>
    <span className="rev-value">{value}</span>
    <button className="btn btn-ghost btn-sm" onClick={onEdit}>Editar</button>
  </div>
);

// Quick calendar picker (static mockup)
const MiniCal = ({ selectedDate = 24 }) => {
  const days = [];
  for (let i = 1; i <= 30; i++) days.push(i);
  const weekDays = ['L', 'M', 'X', 'J', 'V', 'S', 'D'];
  return (
    <div className="card" style={{padding: 18}}>
      <div className="between" style={{marginBottom: 14}}>
        <div style={{fontWeight: 500, fontSize: 14}}>Abril 2026</div>
        <div className="row" style={{gap: 4}}>
          <button className="btn btn-ghost btn-sm" style={{padding: '4px 8px'}}><Icon name="chevron" size={12} style={{transform: 'rotate(180deg)'}}/></button>
          <button className="btn btn-ghost btn-sm" style={{padding: '4px 8px'}}><Icon name="chevron" size={12}/></button>
        </div>
      </div>
      <div className="cal-grid" style={{marginBottom: 6}}>
        {weekDays.map(d => <div key={d} className="tiny mono" style={{textAlign: 'center', color: 'var(--ink-3)', padding: 4}}>{d}</div>)}
      </div>
      <div className="cal-grid">
        {[null, null].map((_, i) => <div key={'e' + i}></div>)}
        {days.map(d => (
          <div key={d} className={`cal-day ${d === selectedDate ? 'sel' : ''} ${d === 18 ? 'today' : ''}`}>{d}</div>
        ))}
      </div>
    </div>
  );
};

const TimeSlots = ({ selected = '16:30' }) => {
  const slots = ['08:00', '09:00', '10:00', '11:00', '14:00', '15:00', '16:00', '16:30', '17:00', '18:00', '19:00'];
  const disabled = ['09:00', '17:00'];
  return (
    <div className="time-slots">
      {slots.map(t => {
        const dis = disabled.includes(t);
        const sel = t === selected;
        return <div key={t} className={`time-slot ${sel ? 'sel' : ''} ${dis ? 'dis' : ''}`}>{t}</div>;
      })}
    </div>
  );
};

Object.assign(window, {
  Field, Input, Textarea, Select,
  RadioCard, Checkbox, Switch,
  FormSteps, FormSection, FormFooter, FormHeader,
  Dropzone, FileTile, DniResult, SignaturePad, RevRow,
  MiniCal, TimeSlots,
});