/* BLOCKS F — premium style-agnostic Forms blocks (signin, field, toggle) */
(function(){
  const { cx, Slot, Glyph, G } = window;
  const B='inline-flex items-center justify-center gap-2 cursor-pointer select-none whitespace-nowrap';
  const head=(s,x='')=>cx(s.cls.display,s.cls.glow,x);
  const Lbl=({s,children})=>(<label className={cx('block text-xs font-semibold mb-1.5',s.cls.sub)}>{children}</label>);
  const SUCCESS='#22c55e', DANGER='#ef4444', WARNING='#f59e0b';

  const blocks=[
    /* ============ SIGNIN ============ */
    { id:'fF-signin-split', type:'forms', subtype:'signin', title:'Split image + form', w:2,
      Render:(s)=>(
        <div className={cx(s.cls.surface,'w-full max-w-[520px] overflow-hidden grid grid-cols-2')}>
          <Slot label="brand" className="h-full min-h-[260px]" style={{color:s.cls.accent}}/>
          <div className="p-6">
            <div className={head(s,'text-lg font-extrabold')}>Welcome back</div>
            <div className={cx('text-xs mt-1 mb-5',s.cls.muted)}>Sign in to continue to Empire</div>
            <div className="flex flex-col gap-3">
              <div>
                <Lbl s={s}>Email</Lbl>
                <input className={cx(s.cls.input,'w-full px-3 py-2 text-sm')} placeholder="you@empire.ui"/>
              </div>
              <div>
                <Lbl s={s}>Password</Lbl>
                <input type="password" className={cx(s.cls.input,'w-full px-3 py-2 text-sm')} placeholder="••••••••"/>
              </div>
            </div>
            <button className={cx(B,s.cls.btnPrimary,'w-full py-2.5 text-sm mt-5')}>Sign in<Glyph d={G.arrow} size={14}/></button>
            <div className={cx('text-[11px] text-center mt-3',s.cls.muted)}>New here? <span style={{color:s.cls.accent}}>Create account</span></div>
          </div>
        </div>) },

    { id:'fF-signin-magic', type:'forms', subtype:'signin', title:'Magic-link (email only)', w:1,
      Render:(s)=>(
        <div className={cx(s.cls.surface,'w-full max-w-[300px] p-6 text-center')}>
          <span className="w-12 h-12 rounded-full inline-flex items-center justify-center mx-auto" style={{background:s.cls.accent,color:'#fff'}}><Glyph d={G.bell} size={20}/></span>
          <div className={head(s,'text-lg font-extrabold mt-4')}>Sign in with email</div>
          <div className={cx('text-xs mt-1 mb-5',s.cls.muted)}>Enter your email and we'll send a secure sign-in link. No password required.</div>
          <div className="text-left">
            <Lbl s={s}>Email address</Lbl>
            <input className={cx(s.cls.input,'w-full px-3 py-2 text-sm')} placeholder="you@empire.ui"/>
          </div>
          <button className={cx(B,s.cls.btnPrimary,'w-full py-2.5 text-sm mt-4')}>Email me a link<Glyph d={G.arrow} size={14}/></button>
        </div>) },

    { id:'fF-signin-2fa', type:'forms', subtype:'signin', title:'2FA verification code', w:1,
      Render:(s)=>{
        const [code,setCode]=React.useState(['2','9','','']);
        return (
          <div className={cx(s.cls.surface,'w-full max-w-[300px] p-6 text-center')}>
            <div className={head(s,'text-lg font-extrabold')}>Two-factor auth</div>
            <div className={cx('text-xs mt-1 mb-5',s.cls.muted)}>Enter the 4-digit code from your authenticator app.</div>
            <div className="flex justify-center gap-2.5">
              {code.map((d,i)=>(
                <input key={i} value={d} maxLength={1} inputMode="numeric"
                  onChange={e=>setCode(a=>a.map((x,j)=>j===i?e.target.value.replace(/\D/g,'').slice(-1):x))}
                  className={cx(s.cls.input,'w-12 h-14 text-center text-xl font-bold')}
                  style={d?{boxShadow:`inset 0 0 0 1.5px ${s.cls.accent}`}:null}/>
              ))}
            </div>
            <button className={cx(B,s.cls.btnPrimary,'w-full py-2.5 text-sm mt-5')}>Verify code</button>
            <div className={cx('text-[11px] mt-3',s.cls.muted)}>Didn't get it? <span style={{color:s.cls.accent}}>Resend</span></div>
          </div>); } },

    { id:'fF-signin-sso', type:'forms', subtype:'signin', title:'Enterprise SSO', w:1,
      Render:(s)=>(
        <div className={cx(s.cls.surface,'w-full max-w-[300px] p-6')}>
          <div className={head(s,'text-lg font-extrabold')}>Sign in with SSO</div>
          <div className={cx('text-xs mt-1 mb-5',s.cls.muted)}>Use your organization's identity provider.</div>
          <Lbl s={s}>Work email or domain</Lbl>
          <div className="flex">
            <input className={cx(s.cls.input,'flex-1 px-3 py-2 text-sm rounded-r-none')} placeholder="acme.com"/>
            <span className={cx(s.cls.surface2,'px-3 py-2 text-sm font-medium flex items-center rounded-r-lg')} style={{color:s.cls.muted}}>@</span>
          </div>
          <button className={cx(B,s.cls.btnPrimary,'w-full py-2.5 text-sm mt-4')}>Continue with SSO<Glyph d={G.arrow} size={14}/></button>
          <div className={cx('text-[11px] text-center mt-3',s.cls.muted)}>Not an enterprise user? <span style={{color:s.cls.accent}}>Use password</span></div>
        </div>) },

    /* ============ FIELD ============ */
    { id:'fF-field-select', type:'forms', subtype:'field', title:'Native-styled select', w:1,
      Render:(s)=>(
        <div className={cx(s.cls.surface,'w-full max-w-[290px] p-6')}>
          <Lbl s={s}>Country</Lbl>
          <div className="relative">
            <select className={cx(s.cls.input,'w-full px-3 py-2 pr-9 text-sm appearance-none')} defaultValue="uk">
              <option value="uk">United Kingdom</option>
              <option value="us">United States</option>
              <option value="de">Germany</option>
              <option value="jp">Japan</option>
            </select>
            <span className={cx('absolute right-3 top-1/2 -translate-y-1/2 pointer-events-none',s.cls.muted)} style={{transform:'translateY(-50%) rotate(90deg)'}}><Glyph d={G.arrow} size={14}/></span>
          </div>
          <div className={cx('text-[11px] mt-1.5',s.cls.muted)}>Used for tax and billing region.</div>
        </div>) },

    { id:'fF-field-multiselect', type:'forms', subtype:'field', title:'Multiselect chips', w:1,
      Render:(s)=>{
        const all=['React','Vue','Svelte','Solid','Angular','Qwik'];
        const [sel,setSel]=React.useState(['React','Svelte']);
        const avail=all.filter(t=>!sel.includes(t));
        return (
          <div className={cx(s.cls.surface,'w-full max-w-[300px] p-6')}>
            <Lbl s={s}>Frameworks</Lbl>
            <div className={cx(s.cls.input,'w-full px-2 py-2 min-h-[42px] flex flex-wrap gap-1.5 items-center')}>
              {sel.length===0&&<span className={cx('text-sm px-1',s.cls.muted)}>Select frameworks…</span>}
              {sel.map(t=>(
                <span key={t} className={cx(s.cls.chip,'inline-flex items-center gap-1.5 px-2.5 py-1 text-xs')} style={{background:s.cls.accent,color:'#fff'}}>
                  {t}
                  <button onClick={()=>setSel(a=>a.filter(x=>x!==t))} className="opacity-80 hover:opacity-100"><Glyph d={G.plus} size={12} fill="none"/></button>
                </span>))}
            </div>
            {avail.length>0&&(
              <div className="flex flex-wrap gap-1.5 mt-2.5">
                {avail.map(t=>(
                  <button key={t} onClick={()=>setSel(a=>[...a,t])} className={cx(s.cls.chip,'inline-flex items-center gap-1 px-2.5 py-1 text-xs opacity-70 hover:opacity-100')}>
                    <Glyph d={G.plus} size={11}/>{t}
                  </button>))}
              </div>)}
          </div>); } },

    { id:'fF-field-date', type:'forms', subtype:'field', title:'Date field', w:1,
      Render:(s)=>(
        <div className={cx(s.cls.surface,'w-full max-w-[290px] p-6')}>
          <Lbl s={s}>Start date</Lbl>
          <div className="relative">
            <input className={cx(s.cls.input,'w-full px-3 py-2 pr-9 text-sm')} placeholder="DD / MM / YYYY" defaultValue="08 / 06 / 2026"/>
            <span className={cx('absolute right-3 top-1/2 -translate-y-1/2',s.cls.muted)}><Glyph d={G.bell} size={15}/></span>
          </div>
          <div className={cx('text-[11px] mt-1.5',s.cls.muted)}>Pick when your subscription begins.</div>
        </div>) },

    { id:'fF-field-upload', type:'forms', subtype:'field', title:'File upload dropzone', w:1,
      Render:(s)=>(
        <div className={cx(s.cls.surface,'w-full max-w-[300px] p-6')}>
          <Lbl s={s}>Upload assets</Lbl>
          <div className="w-full rounded-xl px-4 py-8 flex flex-col items-center text-center cursor-pointer transition"
            style={{border:`1.5px dashed ${s.cls.accent}`}}>
            <span className="w-11 h-11 rounded-full inline-flex items-center justify-center mb-3" style={{background:s.cls.accent,color:'#fff'}}><Glyph d={G.plus} size={20}/></span>
            <div className="text-sm font-semibold">Drop files or <span style={{color:s.cls.accent}}>browse</span></div>
            <div className={cx('text-[11px] mt-1',s.cls.muted)}>PNG, JPG or SVG — up to 10MB</div>
          </div>
        </div>) },

    { id:'fF-field-password', type:'forms', subtype:'field', title:'Password w/ strength', w:1,
      Render:(s)=>{
        const [v,setV]=React.useState('empire22');
        const score=Math.min(3,(v.length>=8?1:0)+(/[0-9]/.test(v)?1:0)+(/[^a-zA-Z0-9]/.test(v)?1:0));
        const lvl=[['Weak',DANGER],['Fair',WARNING],['Good',WARNING],['Strong',SUCCESS]][score];
        return (
          <div className={cx(s.cls.surface,'w-full max-w-[290px] p-6')}>
            <Lbl s={s}>Create password</Lbl>
            <input type="password" value={v} onChange={e=>setV(e.target.value)} className={cx(s.cls.input,'w-full px-3 py-2 text-sm')} placeholder="••••••••"/>
            <div className="flex gap-1.5 mt-2.5">
              {[0,1,2].map(i=>(
                <span key={i} className="flex-1 h-1.5 rounded-full transition" style={{background:i<score?lvl[1]:'rgba(128,128,128,.22)'}}/>))}
            </div>
            <div className="text-[11px] mt-1.5 font-medium" style={{color:lvl[1]}}>{lvl[0]} password</div>
          </div>); } },

    { id:'fF-field-floating', type:'forms', subtype:'field', title:'Floating-label input', w:1,
      Render:(s)=>{
        const [v,setV]=React.useState('');
        const [foc,setFoc]=React.useState(false);
        const up=foc||v.length>0;
        return (
          <div className={cx(s.cls.surface,'w-full max-w-[290px] p-6')}>
            <div className="relative">
              <input value={v} onFocus={()=>setFoc(true)} onBlur={()=>setFoc(false)} onChange={e=>setV(e.target.value)}
                className={cx(s.cls.input,'w-full px-3 pt-5 pb-1.5 text-sm')}
                style={foc?{boxShadow:`inset 0 0 0 1.5px ${s.cls.accent}`}:null}/>
              <label className="absolute left-3 pointer-events-none transition-all"
                style={up?{top:6,fontSize:10,color:s.cls.accent,fontWeight:600}:{top:'50%',transform:'translateY(-50%)',fontSize:13,color:s.cls.muted}}>
                Full name
              </label>
            </div>
            <div className={cx('text-[11px] mt-1.5',s.cls.muted)}>As it appears on your ID.</div>
          </div>); } },

    /* ============ TOGGLE ============ */
    { id:'fF-toggle-theme', type:'forms', subtype:'toggle', title:'Theme toggle', w:1,
      Render:(s)=>{
        const [dark,setDark]=React.useState(true);
        const sun='M12 3v2M12 19v2M3 12h2M19 12h2M5.6 5.6l1.4 1.4M17 17l1.4 1.4M18.4 5.6L17 7M7 17l-1.4 1.4M12 8a4 4 0 100 8 4 4 0 000-8z';
        const moon='M21 12.8A9 9 0 1111.2 3a7 7 0 009.8 9.8z';
        return (
          <div className={cx(s.cls.surface,'w-full max-w-[280px] p-6 flex items-center justify-between')}>
            <div>
              <div className="text-sm font-semibold">Appearance</div>
              <div className={cx('text-[11px] mt-0.5',s.cls.muted)}>{dark?'Dark':'Light'} theme</div>
            </div>
            <button onClick={()=>setDark(d=>!d)} className="w-[60px] h-8 rounded-full p-1 shrink-0 transition relative" style={dark?{background:s.cls.accent}:{background:'rgba(128,128,128,.3)'}}>
              <span className="block w-6 h-6 rounded-full bg-white inline-flex items-center justify-center transition" style={{transform:dark?'translateX(28px)':'none',boxShadow:'0 1px 3px rgba(0,0,0,.3)',color:dark?s.cls.accent:WARNING}}>
                <Glyph d={dark?moon:sun} size={14}/>
              </span>
            </button>
          </div>); } },

    { id:'fF-toggle-cardselect', type:'forms', subtype:'toggle', title:'Card select', w:1,
      Render:(s)=>{
        const opts=[['Monthly','£12 / mo','Billed each month'],['Yearly','£9 / mo','Billed annually · save 25%']];
        const [sel,setSel]=React.useState(1);
        return (
          <div className={cx(s.cls.surface,'w-full max-w-[300px] p-6')}>
            <div className={head(s,'text-sm font-extrabold mb-3')}>Billing cycle</div>
            <div className="grid grid-cols-2 gap-3">
              {opts.map(([n,p,d],i)=>(
                <button key={n} onClick={()=>setSel(i)} className="relative text-left p-3 rounded-xl transition"
                  style={i===sel?{boxShadow:`inset 0 0 0 1.5px ${s.cls.accent}`}:{boxShadow:'inset 0 0 0 1px rgba(128,128,128,.2)'}}>
                  {i===sel&&<span className="absolute top-2.5 right-2.5 w-4 h-4 rounded-full inline-flex items-center justify-center" style={{background:s.cls.accent,color:'#fff'}}><Glyph d={G.check} size={11}/></span>}
                  <div className={cx('text-[11px] font-semibold',s.cls.sub)}>{n}</div>
                  <div className="text-base font-extrabold mt-1">{p}</div>
                  <div className={cx('text-[10px] mt-1 leading-tight',s.cls.muted)}>{d}</div>
                </button>))}
            </div>
          </div>); } },
  ];
  blocks.forEach(b=>window.BLOCKS.push(b));
})();