// PhotoClean UI Kit — core mobile screens
// Renders inside an iOS frame on a design canvas. Each screen is a Flutter
// mock: same layout, tokens, and copy you'd implement in lib/screens/*.
/* global React */

const { useState } = React;

// ── tokens ──────────────────────────────────────────────────────────
const T = {
  bg0: '#000', bg1: '#0A0A0C', bg2: '#121216', bg3: '#1A1A20',
  s1: 'rgba(255,255,255,0.04)', s2: 'rgba(255,255,255,0.07)',
  s3: 'rgba(255,255,255,0.10)',
  b1: 'rgba(255,255,255,0.06)', b2: 'rgba(255,255,255,0.10)',
  b3: 'rgba(255,255,255,0.16)',
  fg1: '#fff', fg2: 'rgba(255,255,255,0.72)',
  fg3: 'rgba(255,255,255,0.52)', fg4: 'rgba(255,255,255,0.32)',
  holoLin: 'linear-gradient(135deg, #6B4BFF 0%, #F05BE8 25%, #FF8A3D 50%, #5BE3FF 75%, #6B4BFF 100%)',
  holoConic: 'conic-gradient(from 200deg at 50% 50%, #6B4BFF, #4B7BFF, #5BE3FF, #6FF0B0, #FFE066, #FF8A3D, #F05BE8, #6B4BFF)',
  gDisc: 'linear-gradient(135deg,#F05BE8,#6B4BFF)',
  gLate: 'linear-gradient(135deg,#5BE3FF,#4B7BFF)',
  gMem:  'linear-gradient(135deg,#6FF0B0,#4B7BFF)',
  gCap:  'linear-gradient(135deg,#FFE066,#FF8A3D)',
  success:'#6FF0B0', info:'#5BE3FF', warn:'#FFE066', danger:'#FF5A7A', fav:'#FFD166',
  font: `'Syne', system-ui, sans-serif`,
};

// ── reusable bits ───────────────────────────────────────────────────
const Sparkle = ({ size = 10, top, left, right, bottom, o = 0.9 }) => (
  <div style={{
    position:'absolute', width:size, height:size, top, left, right, bottom,
    background:'#fff', opacity:o,
    clipPath:'polygon(50% 0%,55% 45%,100% 50%,55% 55%,50% 100%,45% 55%,0% 50%,45% 45%)',
    filter:'drop-shadow(0 0 6px rgba(255,255,255,0.55))', pointerEvents:'none',
  }}/>
);

const TabBar = ({ active = 'home' }) => {
  const items = [
    { id:'home',  label:'Home',      glyph:'◉' },
    { id:'fav',   label:'Favorites', glyph:'★' },
    { id:'stats', label:'Stats',     glyph:'◐' },
    { id:'set',   label:'Settings',  glyph:'⚙' },
  ];
  return (
    <div style={{
      position:'absolute', left:'50%', bottom:22, transform:'translateX(-50%)',
      width:'85%', height:64, borderRadius:32,
      background:'rgba(20,20,24,0.65)', backdropFilter:'blur(28px) saturate(1.4)',
      WebkitBackdropFilter:'blur(28px) saturate(1.4)',
      border:'1.5px solid rgba(255,255,255,0.12)',
      boxShadow:'0 20px 50px rgba(0,0,0,0.5)',
      display:'flex', alignItems:'center', justifyContent:'space-around', zIndex:20,
    }}>
      {items.map(i => {
        const sel = i.id === active;
        return (
          <div key={i.id} style={{display:'flex', flexDirection:'column', alignItems:'center', gap:4}}>
            <div style={{
              fontSize:20, width:28, height:28, display:'flex',
              alignItems:'center', justifyContent:'center',
              background: sel ? T.holoLin : 'transparent',
              WebkitBackgroundClip: sel ? 'text' : 'initial',
              backgroundClip: sel ? 'text' : 'initial',
              color: sel ? 'transparent' : T.fg3,
            }}>{i.glyph}</div>
            <div style={{fontSize:10, fontWeight:600, color: sel ? '#fff' : T.fg3}}>{i.label}</div>
          </div>
        );
      })}
    </div>
  );
};

// Fake photo = colored gradient rect (no real user images)
const Photo = ({ hue = 0, style = {} }) => {
  const palettes = [
    'linear-gradient(135deg,#F05BE8,#6B4BFF)',
    'linear-gradient(135deg,#5BE3FF,#4B7BFF)',
    'linear-gradient(135deg,#6FF0B0,#4B7BFF)',
    'linear-gradient(135deg,#FFE066,#FF8A3D)',
    'linear-gradient(135deg,#FF8A3D,#F05BE8)',
    'linear-gradient(135deg,#4B7BFF,#6FF0B0)',
    'linear-gradient(135deg,#6B4BFF,#5BE3FF)',
    'linear-gradient(135deg,#FFD166,#FF5A7A)',
    'linear-gradient(135deg,#0A0A0C,#23232B)',
  ];
  return <div style={{
    background: palettes[hue % palettes.length],
    ...style,
  }}/>;
};

Object.assign(window, { T, Sparkle, TabBar, Photo });