// ArtisanFlow — Device frame custom (look "outil de chantier")
// Plus sobre, bord angulaire, bandeau hazard en haut
// `fullBleed` : vrai sur viewport ≤768px — pas de mockup (plein écran, safe areas)

function AfPhoneFrame({ children, t, dark, offline, networkOnline = true, currency, onOpenSettings, fullBleed = false }) {
  const { Wifi, WifiOff, BatteryFull, Signal } = lucide;
  const noNetwork = !networkOnline;
  const showWifiOff = noNetwork || offline;

  const [timeStr, setTimeStr] = React.useState('');
  React.useEffect(() => {
    if (!fullBleed) return;
    const tick = () => setTimeStr(new Date().toLocaleTimeString('fr-FR', { hour: '2-digit', minute: '2-digit' }));
    tick();
    const id = setInterval(tick, 30000);
    return () => clearInterval(id);
  }, [fullBleed]);

  const safeTop = fullBleed ? 'max(6px, env(safe-area-inset-top, 0px))' : undefined;
  const safeH = fullBleed ? 40 : 44;

  return (
    <div style={fullBleed ? {
      width: '100%',
      height: '100%',
      maxWidth: '100%',
      borderRadius: 0,
      background: t.bg,
      padding: 0,
      boxShadow: 'none',
      position: 'relative',
      flex: 1,
      minHeight: 0,
      display: 'flex',
      flexDirection: 'column',
      overflow: 'hidden',
    } : {
      width: 390, height: 820, borderRadius: 42,
      background: '#0A0F18',
      padding: 10,
      boxShadow: '0 30px 60px rgba(0,0,0,0.4), 0 0 0 1px rgba(255,255,255,0.06), inset 0 0 0 1px rgba(255,255,255,0.04)',
      position: 'relative',
      flexShrink: 0,
    }}>
      {/* Screen */}
      <div style={fullBleed ? {
        width: '100%', height: '100%', minHeight: 0, borderRadius: 0, overflow: 'hidden',
        background: t.bg,
        position: 'relative',
        display: 'flex', flexDirection: 'column',
        flex: 1,
      } : {
        width: '100%', height: '100%', borderRadius: 32, overflow: 'hidden',
        background: t.bg,
        position: 'relative',
        display: 'flex', flexDirection: 'column',
      }}>
        {/* Status bar */}
        <div style={fullBleed ? {
          minHeight: safeH,
          display: 'flex', alignItems: 'center', justifyContent: 'space-between',
          padding: '0 16px',
          paddingTop: safeTop,
          background: t.bg, color: t.text,
          flexShrink: 0, zIndex: 10, position: 'relative',
        } : {
          height: 44, display: 'flex', alignItems: 'center', justifyContent: 'space-between',
          padding: '0 24px', paddingTop: 8,
          background: t.bg, color: t.text,
          flexShrink: 0, zIndex: 10, position: 'relative',
        }}>
          <span className="af-mono" style={{ fontSize: 14, fontWeight: 700 }}>
            {fullBleed ? timeStr : '9:41'}
          </span>
          {!fullBleed && (
            <div style={{
              position: 'absolute', top: 6, left: '50%', transform: 'translateX(-50%)',
              width: 110, height: 30, borderRadius: 20, background: '#000',
            }} />
          )}
          <div style={{ display: 'flex', gap: 6, alignItems: 'center', fontSize: 13 }}>
            {showWifiOff ? <WifiOff size={14} color={t.safety} strokeWidth={2.5}/> : <Wifi size={14} strokeWidth={2.5}/>}
            <Signal size={14} strokeWidth={2.5}/>
            <BatteryFull size={18} strokeWidth={2}/>
          </div>
        </div>

        {noNetwork && (
          <div style={{
            background: '#0D1520', color: t.safety,
            fontSize: 11, fontWeight: 800, letterSpacing: 0.6,
            padding: '4px 14px', textAlign: 'center',
            textTransform: 'uppercase', flexShrink: 0,
            borderTop: '2px solid ' + t.safety, borderBottom: '2px solid ' + t.safety,
          }}>
            ● Réseau indisponible · sync cloud / workers nécessitent Internet
          </div>
        )}
        {!noNetwork && offline && (
          <div style={{
            background: t.safety, color: '#0D1520',
            fontSize: 11, fontWeight: 800, letterSpacing: 0.8,
            padding: '4px 14px', textAlign: 'center',
            textTransform: 'uppercase', flexShrink: 0,
            borderTop: '2px solid #0D1520', borderBottom: '2px solid #0D1520',
          }}>
            ● Mode hors-ligne (aperçu) · Synchro en attente
          </div>
        )}

        {/* Content */}
        <div style={{ flex: 1, overflow: 'hidden', position: 'relative', minHeight: 0, display: 'flex', flexDirection: 'column' }}>
          {children}
        </div>

        {!fullBleed && (
          <div style={{
            position: 'absolute', bottom: 6, left: '50%', transform: 'translateX(-50%)',
            width: 120, height: 4, borderRadius: 2,
            background: dark ? 'rgba(255,255,255,0.4)' : 'rgba(21,32,43,0.35)',
            zIndex: 100, pointerEvents: 'none',
          }} />
        )}
      </div>
    </div>
  );
}

Object.assign(window, { AfPhoneFrame });