// Shared UI primitives for SONARA registration prototype

const Icons = window.SonaraIcons;

function Logo() {
  return (
    <div className="brand-logo">
      <span className="mark"><Icons.soundwaveLogo size={18}/></span>
      Sonara
    </div>
  );
}

function BrandStepper({ stepIndex }) {
  const steps = [
    { label: "Account", desc: "Crea il tuo accesso" },
    { label: "Ruolo", desc: "Chi sei?" },
    { label: "Profilo", desc: "Le info chiave" },
    { label: "Verifica", desc: "Conferma email" },
    { label: "Pronto", desc: "Inizia su SONARA" },
  ];
  return (
    <div className="brand-stepper">
      {steps.map((s, i) => {
        const status = i < stepIndex ? "done" : i === stepIndex ? "active" : "";
        return (
          <div key={i} className={`brand-step ${status}`}>
            <span className="num">
              {i < stepIndex ? <Icons.check size={14}/> : i + 1}
            </span>
            <span style={{ display: "flex", flexDirection: "column" }}>
              <span style={{ fontWeight: 500, color: "inherit" }}>{s.label}</span>
              <span style={{ fontSize: 12, color: "var(--muted-foreground)", marginTop: 2 }}>{s.desc}</span>
            </span>
          </div>
        );
      })}
    </div>
  );
}

function BrandPanel({ stepIndex }) {
  return (
    <aside className="brand">
      <Logo/>
      <BrandStepper stepIndex={stepIndex}/>
      <div className="brand-bottom">
        <strong>"Diretto, music-first, zero fuffa."</strong><br/>
        Crea musica insieme. Senza limiti.
      </div>
    </aside>
  );
}

function ProgressBar({ stepIndex, totalSteps = 5, label }) {
  const pct = Math.min(100, ((stepIndex + 1) / totalSteps) * 100);
  return (
    <div>
      <div className="panel-progress"><span style={{ width: pct + "%" }}/></div>
      <div className="panel-progress-meta">
        <span>{label || `Step ${stepIndex + 1} di ${totalSteps}`}</span>
        <span className="dim">{Math.round(pct)}%</span>
      </div>
    </div>
  );
}

function Eyebrow({ children }) {
  return <div className="eyebrow-step">{children}</div>;
}

function Field({ label, optional, hint, children }) {
  return (
    <div className="field">
      {label && (
        <label className="field-label">
          <span>{label}</span>
          {optional && <span className="opt">Opzionale</span>}
        </label>
      )}
      {children}
      {hint && <div className="field-hint">{hint}</div>}
    </div>
  );
}

function Checkbox({ checked, onChange, children }) {
  return (
    <div className={`checkbox-row ${checked ? "checked" : ""}`} onClick={() => onChange(!checked)}>
      <span className="checkbox-box">{checked && <Icons.check size={12}/>}</span>
      <span>{children}</span>
    </div>
  );
}

function ChipMulti({ options, value, onChange, max }) {
  const toggle = (opt) => {
    if (value.includes(opt)) onChange(value.filter((v) => v !== opt));
    else if (!max || value.length < max) onChange([...value, opt]);
  };
  return (
    <div className="chip-grid">
      {options.map((opt) => (
        <button type="button" key={opt} className={`chip ${value.includes(opt) ? "selected" : ""}`} onClick={() => toggle(opt)}>
          {opt}
        </button>
      ))}
    </div>
  );
}

function Trust() {
  return (
    <div className="trust">
      <span><Icons.check size={12}/> Accesso anticipato gratuito</span>
      <span className="dot"/>
      <span><Icons.shield size={12}/> Nessuna carta richiesta</span>
      <span className="dot"/>
      <span>Cancella quando vuoi</span>
    </div>
  );
}

// Google / Apple inline brand glyphs
const GoogleGlyph = ({ size = 20 }) => (
  <svg width={size} height={size} viewBox="0 0 24 24">
    <path fill="#EA4335" d="M12 10.2v3.9h5.5c-.24 1.42-1.7 4.16-5.5 4.16-3.31 0-6.01-2.74-6.01-6.12s2.7-6.12 6.01-6.12c1.88 0 3.14.8 3.86 1.49l2.63-2.53C16.79 3.5 14.6 2.5 12 2.5 6.76 2.5 2.5 6.76 2.5 12s4.26 9.5 9.5 9.5c5.49 0 9.12-3.86 9.12-9.28 0-.62-.07-1.1-.16-1.52H12z"/>
    <path fill="#4285F4" d="M21.12 12.22c0-.62-.07-1.1-.16-1.52H12v3.9h5.5c-.11.65-.5 1.6-1.43 2.4l-.01.07 2.07 1.6.14.02c1.32-1.22 2.85-3.5 2.85-6.47z"/>
    <path fill="#FBBC05" d="M5.99 14.18a5.85 5.85 0 0 1-.32-1.86c0-.65.11-1.27.31-1.86l-.01-.13L3.86 8.7l-.07.03A9.49 9.49 0 0 0 2.5 12c0 1.53.37 2.97 1.03 4.27l2.46-2.09z"/>
    <path fill="#34A853" d="M12 18.26c-1.7 0-3.13-.56-4.17-1.51l-2.46 2.09A9.5 9.5 0 0 0 12 21.5c2.6 0 4.79-.86 6.39-2.34l-2.07-1.6c-.83.55-1.93.7-2.32.7z"/>
  </svg>
);
const AppleGlyph = ({ size = 20 }) => (
  <svg width={size} height={size} viewBox="0 0 24 24" fill="currentColor">
    <path d="M16.365 1.43c0 1.14-.42 2.18-1.18 3-.78.84-2.04 1.5-3.27 1.4-.13-1.13.43-2.31 1.16-3.05.81-.83 2.16-1.45 3.29-1.35zM20.5 17.06c-.6 1.36-.88 1.97-1.65 3.17-1.07 1.66-2.59 3.73-4.46 3.75-1.66.02-2.09-1.08-4.35-1.07-2.26.01-2.73 1.09-4.39 1.07-1.87-.02-3.31-1.89-4.38-3.55-3-4.66-3.32-10.14-1.46-13.05 1.31-2.06 3.39-3.27 5.34-3.27 1.99 0 3.24 1.09 4.88 1.09 1.59 0 2.56-1.09 4.86-1.09 1.74 0 3.59.95 4.9 2.59-4.31 2.36-3.61 8.51.71 10.36z"/>
  </svg>
);

Object.assign(window, {
  Logo, BrandStepper, BrandPanel, ProgressBar,
  Eyebrow, Field, Checkbox, ChipMulti, Trust,
  GoogleGlyph, AppleGlyph,
});