// Public profile screen — link-in-bio page.
// Two layout variants via `layout` prop: 'bento' (reference-like) and 'stacked'.

const { useState: useS_p } = React;

function PublicProfile({ profile, products, onOpenShop, onOpenProduct, onEditClick, onShare, layout = 'bento', cardLayout = 'grid2', showEditHandles = false }) {
  const visible = products.filter(p => p.published);

  return (
    <div style={{ height: '100%', overflow: 'auto', paddingBottom: 100 }}>
      <ProfileHeader
        profile={profile}
        onShare={onShare}
        onEditClick={onEditClick}
        showEditHandles={showEditHandles}
      />

      {/* Socials + links */}
      {layout === 'bento' ? (
        <BentoLayout profile={profile} showEditHandles={showEditHandles} onEditClick={onEditClick}/>
      ) : (
        <StackedLayout profile={profile} showEditHandles={showEditHandles} onEditClick={onEditClick}/>
      )}

      {/* Shop section */}
      <SectionHeader
        title="Shop"
        action={
          <button onClick={onOpenShop} style={{
            border:'none', background:'transparent', color:HUUL_TOKENS.color.accent,
            fontSize:15, fontWeight:500, fontFamily:HUUL_TOKENS.font.stack, cursor:'pointer',
            display:'inline-flex', alignItems:'center', gap:2,
          }}>See all <IconChevronR size={14}/></button>
        }
      />

      <ProductGrid
        products={visible.slice(0, 4)}
        cardLayout={cardLayout}
        onOpenProduct={onOpenProduct}
      />

      <div style={{ height: 20 }}/>

      <div style={{ textAlign:'center', padding:'24px 20px 40px', fontSize:12, color:HUUL_TOKENS.color.ink3 }}>
        Made with <span style={{ fontWeight: 600, color: HUUL_TOKENS.color.ink2 }}>Huul</span> · huul.so/{profile.username}
      </div>
    </div>
  );
}

// ─────────────────────────────────────────────────────────────
function ProfileHeader({ profile, onShare, onEditClick, showEditHandles }) {
  return (
    <div style={{ padding: '54px 20px 24px', position: 'relative' }}>
      {/* top-right controls */}
      <div style={{
        position: 'absolute', top: 54, right: 20,
        display: 'flex', gap: 8, zIndex: 2,
      }}>
        <IconButton icon={<IconShare size={17}/>} onClick={onShare} bg="rgba(255,255,255,0.9)" />
        {showEditHandles && (
          <IconButton icon={<IconSettings size={17}/>} onClick={() => onEditClick?.('profile')} bg="rgba(255,255,255,0.9)" />
        )}
      </div>

      <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', textAlign: 'center' }}>
        <div style={{ position: 'relative' }}>
          <Avatar profile={profile} size={92}/>
          {showEditHandles && (
            <button onClick={() => onEditClick?.('profile')} style={{
              position:'absolute', right:-4, bottom:-4,
              width:30, height:30, borderRadius:15, border:'none',
              background:'#fff', color:HUUL_TOKENS.color.ink,
              display:'flex', alignItems:'center', justifyContent:'center',
              boxShadow:'0 2px 8px rgba(0,0,0,0.15)', cursor:'pointer',
            }}><IconEdit size={14}/></button>
          )}
        </div>
        <h1 style={{
          fontSize: 24, fontWeight: 700, letterSpacing: -0.6, margin: '14px 0 2px',
          display: 'inline-flex', alignItems: 'center', gap: 6,
        }}>
          {profile.businessName}
          {showEditHandles && <IconEdit size={14} style={{ color: HUUL_TOKENS.color.ink3 }}/>}
        </h1>
        <div style={{ fontSize: 13.5, color: HUUL_TOKENS.color.ink3, marginBottom: 8 }}>
          @{profile.username}
        </div>
        <p style={{
          fontSize: 16, color: HUUL_TOKENS.color.ink3, lineHeight: 1.45,
          margin: 0, maxWidth: 300,
        }}>{profile.bio}</p>
      </div>
    </div>
  );
}

// ─────────────────────────────────────────────────────────────
function SectionHeader({ title, action }) {
  return (
    <div style={{
      display: 'flex', alignItems: 'center', justifyContent: 'space-between',
      padding: '18px 24px 10px',
    }}>
      <div style={{ fontSize: 15, fontWeight: 600, color: HUUL_TOKENS.color.ink2, letterSpacing: -0.2 }}>{title}</div>
      {action}
    </div>
  );
}

// ─── Bento layout (reference-style) ───────────────────────────
function BentoLayout({ profile, showEditHandles, onEditClick }) {
  const socials = profile.socials?.length ? profile.socials : [];
  const links   = profile.links?.length ? profile.links : [];

  return (
    <>
      {socials.length > 0 && (
        <>
          <SectionHeader title="Socials" action={showEditHandles && (
            <GhostButton icon={<IconPlus size={14}/>} onClick={() => onEditClick?.('socials')} style={{height:32, padding:'0 10px', fontSize:13}}>Edit</GhostButton>
          )}/>
          <div style={{
            padding: '0 16px',
            display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gap: 12,
          }}>
            {socials.map(s => <SocialTile key={s.id} s={s}/>)}
          </div>
        </>
      )}

      {links.length > 0 && (
        <>
          <SectionHeader title="Links" action={showEditHandles && (
            <GhostButton icon={<IconPlus size={14}/>} onClick={() => onEditClick?.('links')} style={{height:32, padding:'0 10px', fontSize:13}}>Edit</GhostButton>
          )}/>
          <div style={{ padding: '0 16px', display: 'flex', flexDirection: 'column', gap: 10 }}>
            {links.map(l => <LinkBar key={l.id} link={l}/>)}
          </div>
        </>
      )}
    </>
  );
}

function StackedLayout({ profile, showEditHandles, onEditClick }) {
  const socials = profile.socials || [];
  const links = profile.links || [];
  return (
    <div style={{ padding: '8px 16px 0', display: 'flex', flexDirection: 'column', gap: 10 }}>
      {socials.map(s => (
        <LinkBar key={s.id} link={{ label: s.label, sub: s.handle, primary: false }} leading={<SocialGlyph icon={s.icon}/>}/>
      ))}
      {links.map(l => <LinkBar key={l.id} link={l}/>)}
    </div>
  );
}

// ─── Social bento tile ────────────────────────────────────────
function SocialTile({ s }) {
  const bg = HUUL_TOKENS.color[s.tile] || '#F1F1F3';
  return (
    <div style={{
      background: bg, borderRadius: 20, padding: 14,
      display: 'flex', flexDirection: 'column', gap: 8,
      minHeight: 120, position: 'relative', overflow: 'hidden',
      boxShadow: '0 1px 2px rgba(0,0,0,0.03)',
      cursor: 'pointer',
    }}>
      <div style={{
        width: 40, height: 40, borderRadius: 12, background: '#fff',
        display: 'flex', alignItems: 'center', justifyContent: 'center',
        boxShadow: '0 1px 3px rgba(0,0,0,0.06)',
      }}>
        <SocialGlyph icon={s.icon}/>
      </div>
      <div style={{ marginTop: 'auto' }}>
        <div style={{ fontSize: 15, fontWeight: 600, letterSpacing: -0.2 }}>{s.label}</div>
        <div style={{ fontSize: 12.5, color: HUUL_TOKENS.color.ink3, marginTop: 1 }}>{s.handle}</div>
      </div>
      <div style={{
        alignSelf: 'flex-start', marginTop: 8,
        background: HUUL_TOKENS.color.accent, color: '#fff',
        fontSize: 12, fontWeight: 600, padding: '5px 12px', borderRadius: 99,
      }}>Follow →</div>
    </div>
  );
}

function SocialGlyph({ icon, size=24 }) {
  switch(icon) {
    case 'IG': return <IconIG size={size}/>;
    case 'TT': return <IconTikTok size={size}/>;
    case 'X':  return <IconX_Brand size={size}/>;
    case 'FB': return <IconFB size={size}/>;
    case 'YT': return <IconYT size={size}/>;
    case 'LI': return <IconLI size={size}/>;
    default:   return <IconLink size={size}/>;
  }
}

// ─── Link bar ─────────────────────────────────────────────────
function LinkBar({ link, leading }) {
  const primary = link.primary;
  const [pressed, setPressed] = useS_p(false);
  return (
    <div
      onPointerDown={()=>setPressed(true)}
      onPointerUp={()=>setPressed(false)}
      onPointerLeave={()=>setPressed(false)}
      style={{
        background: primary ? HUUL_TOKENS.color.accent : '#fff',
        color: primary ? '#fff' : HUUL_TOKENS.color.ink,
        borderRadius: 16, padding: '14px 16px',
        display: 'flex', alignItems: 'center', gap: 12,
        boxShadow: primary ? HUUL_TOKENS.shadow.btn : HUUL_TOKENS.shadow.card,
        transform: pressed ? 'scale(0.985)' : 'scale(1)',
        transition: 'transform 140ms',
        cursor: 'pointer',
      }}>
      {leading && (
        <div style={{
          width: 34, height: 34, borderRadius: 10, background: primary ? 'rgba(255,255,255,0.18)' : '#F2F2F4',
          display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0,
        }}>{leading}</div>
      )}
      <div style={{ flex: 1, minWidth: 0 }}>
        <div style={{ fontSize: 16, fontWeight: 600, letterSpacing: -0.2 }}>{link.label}</div>
        {link.sub && <div style={{ fontSize: 13, opacity: primary ? 0.8 : 0.55, marginTop: 1 }}>{link.sub}</div>}
      </div>
      <IconArrowR size={18} color={primary ? '#fff' : HUUL_TOKENS.color.ink3}/>
    </div>
  );
}

window.PublicProfile = PublicProfile;
window.SectionHeader = SectionHeader;
window.SocialGlyph = SocialGlyph;