// Shared components — Central da Vida

// ── Brand Logo "Mente Central" v3 ───────────────────────────
// Usa a logo oficial em PNG (assets/logo.png). Quando exibido sem texto,
// o crop CSS mostra apenas o ícone (brain + ring + satélites) escondendo
// o texto que vem na imagem. Quando withText, renderiza o título ao lado.
const BrandLogo = ({ size = 44, withText = false, animated = false, light = false }) => {
  const s = size;
  return (
    <div style={{ display: 'inline-flex', alignItems: 'center', gap: withText ? 14 : 0 }}>
      <img
        src="assets/logo-icon.png"
        alt="Central da Vida"
        width={s}
        height={s}
        style={{
          width: s,
          height: s,
          objectFit: 'contain',
          display: 'block',
          filter: 'drop-shadow(0 10px 28px rgba(37,99,235,0.55))',
          animation: animated ? 'float 3s ease-in-out infinite' : 'none',
          userSelect: 'none',
          WebkitUserDrag: 'none',
        }}
        draggable={false}
      />
      {withText && (
        <div style={{ display: 'flex', flexDirection: 'column', lineHeight: 1.05 }}>
          <div style={{
            fontFamily: 'Inter, system-ui, sans-serif',
            fontSize: Math.round(s * 0.46), fontWeight: 800,
            color: light ? '#0A0911' : CDV.text,
            letterSpacing: 2, textTransform: 'uppercase',
          }}>Central</div>
          <div style={{
            fontFamily: 'Inter, system-ui, sans-serif',
            fontSize: Math.round(s * 0.30), fontWeight: 700,
            color: light ? '#3B82F6' : '#93C5FD',
            letterSpacing: 3, textTransform: 'uppercase', marginTop: 2,
          }}>da Vida</div>
        </div>
      )}
    </div>
  );
};

// ── Status bar (custom, dark) ───────────────────────────────
const StatusBar = ({ time = '9:41' }) => (
  <div style={{
    display: 'flex', justifyContent: 'space-between', alignItems: 'center',
    padding: '18px 28px 6px', fontSize: 15, fontWeight: 600,
    color: CDV.text, letterSpacing: -0.3, position: 'relative', zIndex: 50,
  }}>
    <div>{time}</div>
    <div style={{ width: 110 }} />
    <div style={{ display: 'flex', gap: 6, alignItems: 'center' }}>
      <svg width="17" height="11" viewBox="0 0 17 11"><path d="M1 8h2v2H1zM5 6h2v4H5zM9 4h2v6H9zM13 1h2v9h-2z" fill={CDV.text}/></svg>
      <svg width="15" height="11" viewBox="0 0 15 11"><path d="M7.5 3a6 6 0 0 1 4.2 1.7l1-1A7.5 7.5 0 0 0 7.5 1.5 7.5 7.5 0 0 0 2.3 3.7l1 1A6 6 0 0 1 7.5 3z" fill={CDV.text}/><path d="M7.5 6a3 3 0 0 1 2.1.9l1-1A4.5 4.5 0 0 0 7.5 4.5a4.5 4.5 0 0 0-3.1 1.4l1 1A3 3 0 0 1 7.5 6z" fill={CDV.text}/><circle cx="7.5" cy="9" r="1.5" fill={CDV.text}/></svg>
      <div style={{ display: 'flex', alignItems: 'center', gap: 2 }}>
        <div style={{
          width: 22, height: 11, border: `1px solid ${CDV.text}`, borderRadius: 3,
          position: 'relative', opacity: 0.9,
        }}>
          <div style={{ position: 'absolute', inset: 1, width: 17, background: CDV.text, borderRadius: 1.5 }} />
        </div>
        <div style={{ width: 2, height: 4, background: CDV.text, opacity: 0.5, borderRadius: 1 }} />
      </div>
    </div>
  </div>
);

// ── Home indicator ─────────────────────────────────────────
const HomeIndicator = ({ light = false }) => {
  const isLightMode = CDV._mode === 'light';
  const bg = isLightMode
    ? 'rgba(0,0,0,0.40)'
    : (light ? 'rgba(255,255,255,0.95)' : 'rgba(255,255,255,0.75)');
  return (
    <div style={{
      position: 'absolute', bottom: 8, left: 0, right: 0, display: 'flex',
      justifyContent: 'center', zIndex: 60, pointerEvents: 'none',
    }}>
      <div style={{ width: 134, height: 5, borderRadius: 99, background: bg }} />
    </div>
  );
};

// ── Dynamic Island ─────────────────────────────────────────
const DynamicIsland = ({ children }) => (
  <div style={{
    position: 'absolute', top: 11, left: '50%', transform: 'translateX(-50%)',
    minWidth: 126, height: 37, borderRadius: 24, background: '#000',
    zIndex: 49, display: 'flex', alignItems: 'center', justifyContent: 'center',
    padding: children ? '0 18px' : 0, gap: 8,
    transition: 'all 0.3s ease', boxShadow: children ? '0 0 0 1px rgba(255,255,255,0.04)' : 'none',
  }}>
    {children}
  </div>
);

// ── Card ───────────────────────────────────────────────────
const Card = ({ children, style = {}, onClick, gradient = false, padding = 16, glow = false }) => (
  <div onClick={onClick} style={{
    background: gradient ? CDV.brandGrad : CDV.surface,
    border: `1px solid ${CDV.stroke}`,
    borderRadius: CDV.r.xl, padding,
    cursor: onClick ? 'pointer' : 'default',
    transition: 'transform .15s ease',
    boxShadow: glow ? '0 0 40px -10px rgba(177,151,252,0.4)' : 'none',
    ...style,
  }}>{children}</div>
);

// ── Sheet (modal coming from bottom) ────────────────────────
const Sheet = ({ open, onClose, children, title }) => {
  if (!open) return null;
  return (
    <div style={{
      position: 'absolute', inset: 0, zIndex: 90,
      animation: 'fadeIn .2s ease',
    }}>
      <div onClick={onClose} style={{
        position: 'absolute', inset: 0, background: 'rgba(0,0,0,0.6)',
        backdropFilter: 'blur(4px)', WebkitBackdropFilter: 'blur(4px)',
      }} />
      <div style={{
        position: 'absolute', left: 0, right: 0, bottom: 0,
        background: CDV.surface, borderTopLeftRadius: 28, borderTopRightRadius: 28,
        border: `1px solid ${CDV.stroke}`, borderBottom: 'none',
        maxHeight: '88%', overflow: 'auto',
        animation: 'slideUp .25s cubic-bezier(.2,.7,.2,1)',
      }}>
        <div style={{ display: 'flex', justifyContent: 'center', padding: '12px 0 4px' }}>
          <div style={{ width: 38, height: 4, borderRadius: 4, background: 'rgba(255,255,255,0.18)' }} />
        </div>
        {title && (
          <div style={{ padding: '12px 20px 4px', display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
            <div style={{ fontSize: 19, fontWeight: 600 }}>{title}</div>
            <button onClick={onClose} style={{
              background: CDV.surfaceHi, border: 'none', color: CDV.textDim,
              width: 32, height: 32, borderRadius: 99, fontSize: 18,
            }}>×</button>
          </div>
        )}
        {children}
      </div>
    </div>
  );
};

// ── Pill button ─────────────────────────────────────────────
const Pill = ({ children, color = CDV.brand, bg, onClick, style = {}, size = 'md' }) => {
  const sizes = { sm: { px: 10, py: 4, fs: 11 }, md: { px: 12, py: 5, fs: 12 } };
  const s = sizes[size];
  return (
    <span onClick={onClick} style={{
      display: 'inline-flex', alignItems: 'center', gap: 5,
      padding: `${s.py}px ${s.px}px`, borderRadius: 99,
      background: bg || (color + '22'), color,
      fontSize: s.fs, fontWeight: 600, letterSpacing: 0.1,
      ...style,
    }}>{children}</span>
  );
};

// ── Section header (with optional action) ──────────────────
const SectionHeader = ({ title, action, onAction, accent }) => (
  <div style={{ display: 'flex', alignItems: 'baseline', justifyContent: 'space-between', padding: '8px 4px 12px' }}>
    <div style={{ fontSize: 20, fontWeight: 700, letterSpacing: -0.4, color: CDV.text }}>
      {accent ? <span style={{ background: CDV.brandGrad, WebkitBackgroundClip: 'text', WebkitTextFillColor: 'transparent', backgroundClip: 'text' }}>{title}</span> : title}
    </div>
    {action && (
      <button onClick={onAction} style={{
        background: 'transparent', border: 'none', color: CDV.brand,
        fontSize: 14, fontWeight: 600, padding: 0,
      }}>{action}</button>
    )}
  </div>
);

// ── Checkbox with draw animation ───────────────────────────
const Checkbox = ({ checked, onChange, color = CDV.brand, size = 22 }) => (
  <div onClick={(e) => { e.stopPropagation(); onChange(!checked); }}
    style={{
      width: size, height: size, borderRadius: 8,
      border: checked ? `1.5px solid ${color}` : `1.5px solid ${CDV.textFaint}`,
      background: checked ? color : 'transparent',
      display: 'flex', alignItems: 'center', justifyContent: 'center',
      transition: 'all .2s', flexShrink: 0,
    }}>
    {checked && (
      <svg width={size - 8} height={size - 8} viewBox="0 0 16 16" fill="none">
        <path d="M3 8.5l3.5 3.5L13 5" stroke="#fff" strokeWidth="2.4" strokeLinecap="round" strokeLinejoin="round"
          style={{ strokeDasharray: 24, animation: 'drawCheck .3s ease forwards' }} />
      </svg>
    )}
  </div>
);

// ── Progress ring ──────────────────────────────────────────
const ProgressRing = ({ percent = 0, size = 56, stroke = 5, color = CDV.brand, bg = 'rgba(255,255,255,0.07)', children }) => {
  const r = (size - stroke) / 2;
  const c = 2 * Math.PI * r;
  const offset = c - (percent / 100) * c;
  return (
    <div style={{ position: 'relative', width: size, height: size, display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
      <svg width={size} height={size} style={{ transform: 'rotate(-90deg)' }}>
        <circle cx={size / 2} cy={size / 2} r={r} stroke={bg} strokeWidth={stroke} fill="none" />
        <circle cx={size / 2} cy={size / 2} r={r} stroke={color} strokeWidth={stroke} fill="none"
          strokeLinecap="round" strokeDasharray={c} strokeDashoffset={offset}
          style={{ transition: 'stroke-dashoffset .6s cubic-bezier(.2,.7,.2,1)' }} />
      </svg>
      <div style={{ position: 'absolute' }}>{children}</div>
    </div>
  );
};

// ── Linear progress ────────────────────────────────────────
const ProgressBar = ({ percent, color = CDV.brand, bg = 'rgba(255,255,255,0.06)', height = 6, gradient }) => (
  <div style={{ width: '100%', height, background: bg, borderRadius: 99, overflow: 'hidden' }}>
    <div style={{
      width: `${Math.min(100, percent)}%`, height: '100%',
      background: gradient || color, borderRadius: 99,
      transition: 'width .6s cubic-bezier(.2,.7,.2,1)',
    }} />
  </div>
);

// ── Icon tile ──────────────────────────────────────────────
const IconTile = ({ name, color, size = 38, bg, soft = true }) => (
  <div style={{
    width: size, height: size, borderRadius: size * 0.3,
    background: bg || (soft ? color + '22' : color),
    display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0,
    color: soft ? color : '#fff',
  }}>
    <Icon name={name} size={size * 0.5} />
  </div>
);

// ── Bottom tab nav ─────────────────────────────────────────
const BottomNav = ({ active, onChange, onAI }) => {
  const tabs = [
    { id: 'dashboard', icon: 'home', label: 'Início' },
    { id: 'tasks', icon: 'tasks', label: 'Tarefas' },
    { id: 'ai', icon: 'sparkle', label: 'IA', center: true },
    { id: 'finance', icon: 'wallet', label: 'Finanças' },
    { id: 'more', icon: 'grid', label: 'Mais' },
  ];
  return (
    <div style={{
      position: 'absolute', left: 12, right: 12, bottom: 22, zIndex: 40,
      height: 64, borderRadius: 28,
      background: 'rgba(20,19,28,0.78)',
      backdropFilter: 'blur(28px) saturate(180%)',
      WebkitBackdropFilter: 'blur(28px) saturate(180%)',
      border: `1px solid ${CDV.strokeHi}`,
      boxShadow: '0 12px 40px -12px rgba(0,0,0,0.6), inset 0 1px 0 rgba(255,255,255,0.04)',
      display: 'flex', alignItems: 'center', padding: '0 6px',
    }}>
      {tabs.map(t => {
        const isActive = active === t.id;
        if (t.center) {
          return (
            <button key={t.id} onClick={onAI || (() => onChange(t.id))} style={{
              flex: 1, height: 56, background: 'transparent', border: 'none',
              display: 'flex', justifyContent: 'center', alignItems: 'center',
              padding: 0,
            }}>
              <div style={{
                width: 48, height: 48, borderRadius: 16,
                background: CDV.brandGrad,
                boxShadow: '0 8px 24px -8px rgba(177,151,252,0.7), inset 0 1px 0 rgba(255,255,255,0.3)',
                display: 'flex', alignItems: 'center', justifyContent: 'center', color: '#fff',
                transform: isActive ? 'scale(1.04)' : 'scale(1)', transition: 'transform .2s',
              }}>
                <Icon name="sparkle" size={22} />
              </div>
            </button>
          );
        }
        return (
          <button key={t.id} onClick={() => onChange(t.id)} style={{
            flex: 1, height: 56, background: 'transparent', border: 'none',
            display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center',
            gap: 2, color: isActive ? CDV.text : CDV.textMuted, padding: 0,
          }}>
            <Icon name={t.icon} size={22} />
            <div style={{ fontSize: 10, fontWeight: 600, letterSpacing: 0.1 }}>{t.label}</div>
          </button>
        );
      })}
    </div>
  );
};

// ── Header (large title + actions) ──────────────────────────
const Header = ({ title, subtitle, onBack, right, big = true }) => (
  <div style={{ padding: '4px 22px 14px' }}>
    {(onBack || right) && (
      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 14 }}>
        {onBack ? (
          <button onClick={onBack} style={{
            background: CDV.surfaceHi, border: `1px solid ${CDV.stroke}`,
            width: 38, height: 38, borderRadius: 99, color: CDV.text,
            display: 'flex', alignItems: 'center', justifyContent: 'center',
          }}><Icon name="chevronLeft" size={20} /></button>
        ) : <div />}
        {right || <div />}
      </div>
    )}
    {subtitle && <div style={{ fontSize: 13, color: CDV.textDim, fontWeight: 500, marginBottom: 4 }}>{subtitle}</div>}
    {big ? (
      <div style={{ fontSize: 32, fontWeight: 700, letterSpacing: -0.6, color: CDV.text, lineHeight: 1.05 }}>{title}</div>
    ) : (
      <div style={{ fontSize: 20, fontWeight: 600, color: CDV.text }}>{title}</div>
    )}
  </div>
);

// ── Toast (small floating) ─────────────────────────────────
const Toast = ({ text, icon = 'check', visible }) => (
  <div style={{
    position: 'absolute', top: 60, left: '50%', transform: `translateX(-50%) translateY(${visible ? 0 : -20}px)`,
    opacity: visible ? 1 : 0, pointerEvents: 'none',
    background: 'rgba(20,19,28,0.92)', backdropFilter: 'blur(20px)', WebkitBackdropFilter: 'blur(20px)',
    border: `1px solid ${CDV.strokeHi}`, borderRadius: 99,
    padding: '8px 14px 8px 10px', display: 'flex', alignItems: 'center', gap: 8,
    fontSize: 13, fontWeight: 500, color: CDV.text,
    transition: 'all .25s cubic-bezier(.2,.7,.2,1)', zIndex: 100,
    boxShadow: '0 8px 32px rgba(0,0,0,0.4)',
  }}>
    <div style={{
      width: 22, height: 22, borderRadius: 99, background: CDV.brandGrad,
      display: 'flex', alignItems: 'center', justifyContent: 'center', color: '#fff',
    }}><Icon name={icon} size={14} /></div>
    {text}
  </div>
);

Object.assign(window, {
  StatusBar, HomeIndicator, DynamicIsland, Card, Sheet, Pill, SectionHeader,
  Checkbox, ProgressRing, ProgressBar, IconTile, BottomNav, Header, Toast,
  BrandLogo,
});