// GS Car — Feed, Profile, Auth screens

const ScreenFeed = ({ onOpenAI }) => {
  const stories = [
    { name: '你', mine: true },
    { name: 'Kenji', avatar: 'KH' },
    { name: 'Sophia', avatar: 'SC' },
    { name: 'David', avatar: 'DW' },
    { name: 'Alex', avatar: 'AT' },
    { name: 'Joyce', avatar: 'JL' },
  ];
  return (
    <div className="screen screen-enter">
      <StatusBar />
      <div className="nav-bar">
        <div className="stage-label-mark"><span className="gs">GS</span><span className="dot">·</span><span className="car">CAR</span></div>
        <div className="nav-icons">
          <button onClick={onOpenAI} className="ai-pill-btn">
            <span className="ai-pill-glow" />
            <svg width="13" height="13" viewBox="0 0 24 24" fill="currentColor" style={{ position: 'relative', zIndex: 1 }}>
              <path d="M12 2l2 6 6 2-6 2-2 6-2-6-6-2 6-2 2-6z" />
              <circle cx="19" cy="5" r="1.5" />
              <circle cx="5" cy="19" r="1" />
            </svg>
            <span style={{ position: 'relative', zIndex: 1, fontSize: 11, fontWeight: 700, letterSpacing: '0.04em' }}>AI</span>
          </button>
          <button className="icon-btn"><Icons.Bell size={16} /></button>
        </div>
      </div>

      <div className="scroll" style={{ paddingBottom: 100 }}>
        {/* Stories */}
        <div className="hscroll" style={{ display: 'flex', gap: 14, padding: '8px 20px 16px' }}>
          {stories.map((s, i) => (
            <div key={i} style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 4 }}>
              <div style={{
                width: 60, height: 60, borderRadius: '50%',
                padding: 2,
                background: s.mine ? 'var(--bg-3)' : 'linear-gradient(135deg, var(--accent), var(--gold))',
                position: 'relative',
              }}>
                <div style={{
                  width: '100%', height: '100%', borderRadius: '50%',
                  background: 'var(--bg-0)', padding: 2,
                }}>
                  {s.mine ? (
                    <div style={{
                      width: '100%', height: '100%', borderRadius: '50%',
                      background: 'var(--bg-2)', display: 'grid', placeItems: 'center',
                      color: 'var(--ink-2)',
                    }}><Icons.Plus size={20} /></div>
                  ) : (
                    <Avatar name={s.avatar} size={52} />
                  )}
                </div>
              </div>
              <span style={{ fontSize: 10, color: 'var(--ink-2)' }}>{s.name}</span>
            </div>
          ))}
        </div>

        {/* Posts */}
        <div style={{ display: 'flex', flexDirection: 'column', gap: 4 }}>
          {DATA.posts.map(p => <Post key={p.id} post={p} />)}
        </div>
      </div>
    </div>
  );
};

const Post = ({ post }) => {
  const [liked, setLiked] = React.useState(false);
  return (
    <div style={{ background: 'var(--bg-0)', borderTop: '0.5px solid var(--line-soft)' }}>
      <div style={{ padding: '12px 16px', display: 'flex', alignItems: 'center', gap: 10 }}>
        <Avatar name={post.author.avatar} size={36} />
        <div style={{ flex: 1 }}>
          <div style={{ display: 'flex', alignItems: 'center', fontSize: 13, fontWeight: 600 }}>
            {post.author.name}{post.author.verified && <VerifiedDot size={12} color="var(--accent)" />}
          </div>
          <div style={{ fontSize: 10, color: 'var(--ink-3)' }}>{post.car} · {post.location}</div>
        </div>
        <span className="badge" style={{ background: 'var(--bg-3)', color: 'var(--ink-1)', fontSize: 8 }}>{post.tag}</span>
        <button onClick={() => setLiked(!liked)} style={{ color: liked ? 'var(--accent)' : 'var(--ink-1)', display: 'grid', placeItems: 'center', transition: 'color 0.15s, transform 0.15s', transform: liked ? 'scale(1.1)' : 'scale(1)' }}>
          <Icons.Heart size={18} fill={liked} />
        </button>
        <button><Icons.More size={16} /></button>
      </div>

      <div style={{
        height: 380, position: 'relative',
        background: post.gradient,
      }}>
        <svg width="80%" height="60%" viewBox="0 0 400 200" style={{
          position: 'absolute', top: '50%', left: '50%', transform: 'translate(-50%, -50%)',
        }}>
          <path d="M30,135 Q60,80 120,70 L160,50 Q200,40 240,40 L280,50 Q340,70 370,135 L380,160 L20,160 L30,135 Z"
            fill="rgba(0,0,0,0.7)" stroke="rgba(255,255,255,0.1)" strokeWidth="0.5" />
          <path d="M130,80 L170,55 Q200,48 230,55 L270,80 L255,105 L145,105 Z" fill="rgba(255,255,255,0.04)" />
          <circle cx="100" cy="155" r="22" fill="#000" stroke="rgba(255,255,255,0.15)" strokeWidth="0.5" />
          <circle cx="300" cy="155" r="22" fill="#000" stroke="rgba(255,255,255,0.15)" strokeWidth="0.5" />
        </svg>
        <div style={{
          position: 'absolute', bottom: 12, left: 12,
          fontFamily: 'var(--font-mono)', fontSize: 9,
          color: 'rgba(255,255,255,0.4)', letterSpacing: '0.15em', textTransform: 'uppercase',
        }}>{post.car} · placeholder</div>

        {/* Carousel dots — bottom center */}
        <div style={{
          position: 'absolute', bottom: 12, left: '50%', transform: 'translateX(-50%)',
          display: 'flex', gap: 4,
        }}>
          {[0,1,2,3].map(i => (
            <span key={i} style={{
              width: 5, height: 5, borderRadius: '50%',
              background: i === 0 ? '#fff' : 'rgba(255,255,255,0.45)',
            }} />
          ))}
        </div>
      </div>

      <div style={{ padding: '10px 16px 14px' }}>
        <div style={{ display: 'flex', gap: 16, alignItems: 'center', marginBottom: 8 }}>
          <button><Icons.Chat size={22} /></button>
          <button><Icons.Send size={22} /></button>
          <div style={{ flex: 1 }} />
          <button><Icons.Bookmark size={22} /></button>
        </div>
        <div style={{ fontSize: 12, fontWeight: 700 }}>{(post.likes + (liked ? 1 : 0)).toLocaleString()} likes</div>
        <div style={{ fontSize: 13, marginTop: 6, lineHeight: 1.4 }}>
          <b>{post.author.handle}</b> <span style={{ color: 'var(--ink-1)' }}>{post.caption}</span>
        </div>
        <div style={{ fontSize: 11, color: 'var(--ink-3)', marginTop: 6 }}>查看全部 {post.comments} 個留言 · {post.time}</div>
      </div>
    </div>
  );
};

const FloatAction = ({ icon, active, count, onClick }) => {
  const Icon = Icons[icon];
  return (
    <button onClick={onClick} style={{
      display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 2,
      color: '#fff',
    }}>
      <div style={{
        width: 38, height: 38, borderRadius: '50%',
        background: 'rgba(0,0,0,0.45)', backdropFilter: 'blur(12px)',
        WebkitBackdropFilter: 'blur(12px)',
        border: '0.5px solid rgba(255,255,255,0.12)',
        display: 'grid', placeItems: 'center',
        color: active ? 'var(--accent)' : '#fff',
        transition: 'transform 0.15s, color 0.15s',
        transform: active ? 'scale(1.08)' : 'scale(1)',
      }}>
        <Icon size={18} fill={active} />
      </div>
      {count !== undefined && (
        <span style={{
          fontSize: 10, fontWeight: 700,
          textShadow: '0 1px 4px rgba(0,0,0,0.6)',
          fontVariantNumeric: 'tabular-nums',
        }}>{count}</span>
      )}
    </button>
  );
};

const ScreenProfile = () => (
  <div className="screen screen-enter">
    <StatusBar />
    <div className="nav-bar">
      <div style={{ fontSize: 13, color: 'var(--ink-3)' }}>{DATA.user.handle}</div>
      <div className="nav-icons">
        <button className="icon-btn"><Icons.Settings size={16} /></button>
      </div>
    </div>
    <div className="scroll" style={{ paddingBottom: 100 }}>
      <div style={{ padding: '0 20px 16px', display: 'flex', alignItems: 'center', gap: 16 }}>
        <Avatar name="MA" size={84} gradient="linear-gradient(135deg, #e10a17, #c9a96a)" />
        <div style={{ flex: 1, display: 'flex', justifyContent: 'space-around' }}>
          <Stat n={DATA.user.posts} label="貼文" />
          <Stat n={DATA.user.followers.toLocaleString()} label="追蹤者" />
          <Stat n={DATA.user.following} label="追蹤中" />
        </div>
      </div>
      <div style={{ padding: '0 20px' }}>
        <div style={{ fontSize: 16, fontWeight: 700 }}>{DATA.user.name} <VerifiedDot size={14} color="var(--accent)" /></div>
        <div style={{ fontSize: 12, color: 'var(--ink-2)', marginTop: 2 }}>BMW M3 Comp · Porsche 911 Owner</div>
        <div style={{ fontSize: 12, color: 'var(--ink-1)', marginTop: 6, lineHeight: 1.4 }}>
          🏁 觀塘 · Track day enthusiast<br />
          📍 HK Sports Car Club member
        </div>
        <div style={{ display: 'flex', gap: 8, marginTop: 14 }}>
          <button className="btn-secondary" style={{ flex: 1, padding: '10px', fontSize: 12 }}>編輯個人檔案</button>
          <button className="btn-secondary" style={{ flex: 1, padding: '10px', fontSize: 12 }}>分享 Profile</button>
        </div>
      </div>

      {/* Garage */}
      <div style={{ padding: '20px 20px 12px' }}>
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
          <div className="meta">我的車庫 · 2 輛</div>
          <button style={{ fontSize: 11, color: 'var(--accent)', fontWeight: 600 }}>+ 加車</button>
        </div>
      </div>
      <div className="hscroll" style={{ display: 'flex', gap: 10, padding: '0 20px 16px' }}>
        {DATA.listings.slice(0, 2).map(l => (
          <div key={l.id} style={{ minWidth: 200, background: 'var(--bg-1)', borderRadius: 14, border: '1px solid var(--line)', overflow: 'hidden' }}>
            <CarHero listing={l} height={100} />
            <div style={{ padding: '10px 12px' }}>
              <div style={{ fontSize: 12, fontWeight: 700 }}>{l.year} {l.make}</div>
              <div style={{ fontSize: 10, color: 'var(--ink-3)' }}>{l.model}</div>
            </div>
          </div>
        ))}
      </div>

      {/* Tabs */}
      <div style={{ display: 'flex', borderTop: '0.5px solid var(--line)', borderBottom: '0.5px solid var(--line)' }}>
        {['貼文', '車盤', '收藏'].map((t, i) => (
          <button key={t} style={{
            flex: 1, padding: '12px',
            fontSize: 11, fontWeight: 600, letterSpacing: '0.05em',
            color: i === 0 ? 'var(--ink-0)' : 'var(--ink-3)',
            borderBottom: i === 0 ? '2px solid var(--accent)' : 'none',
            textTransform: 'uppercase',
          }}>{t}</button>
        ))}
      </div>

      {/* Grid */}
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 2 }}>
        {DATA.posts.concat(DATA.posts).slice(0, 9).map((p, i) => (
          <div key={i} style={{
            aspectRatio: '1', background: p.gradient,
            display: 'grid', placeItems: 'center',
            position: 'relative',
          }}>
            <svg width="70%" height="50%" viewBox="0 0 400 140">
              <path d="M30,95 Q50,55 110,45 L150,30 Q200,22 250,30 L290,45 Q350,55 370,95 L380,110 L30,110 Z" fill="rgba(0,0,0,0.6)" />
            </svg>
          </div>
        ))}
      </div>
    </div>
  </div>
);

const Stat = ({ n, label }) => (
  <div style={{ textAlign: 'center' }}>
    <div style={{ fontSize: 18, fontWeight: 700 }}>{n}</div>
    <div style={{ fontSize: 10, color: 'var(--ink-3)' }}>{label}</div>
  </div>
);

const ScreenAuth = ({ onSignIn }) => (
  <div className="screen screen-enter" style={{
    background: 'radial-gradient(ellipse 100% 60% at 50% 30%, rgba(225,10,23,0.15), var(--bg-0) 60%)',
  }}>
    <StatusBar />
    <div style={{ flex: 1, display: 'flex', flexDirection: 'column', justifyContent: 'space-between', padding: '40px 28px 40px' }}>
      <div>
        <div style={{ display: 'flex', alignItems: 'baseline', gap: 4 }}>
          <span style={{ fontSize: 56, fontWeight: 800, letterSpacing: '-0.04em', lineHeight: 1 }}>GS</span>
          <span style={{ fontSize: 56, fontWeight: 800, color: 'var(--accent)', letterSpacing: '-0.04em', lineHeight: 1 }}>·CAR</span>
        </div>
        <div style={{ fontSize: 13, color: 'var(--ink-2)', marginTop: 12, lineHeight: 1.5 }}>
          香港車主嘅一站式社區<br />
          <span style={{ color: 'var(--ink-3)' }}>Marketplace · Social · Services · AI</span>
        </div>
      </div>

      {/* Hero car */}
      <div style={{ position: 'relative', height: 240, margin: '20px -28px' }}>
        <svg width="100%" height="100%" viewBox="0 0 400 240">
          <defs>
            <radialGradient id="heroGlow" cx="50%" cy="60%">
              <stop offset="0%" stopColor="rgba(225,10,23,0.4)" />
              <stop offset="100%" stopColor="transparent" />
            </radialGradient>
            <linearGradient id="heroBody" x1="0" y1="0" x2="0" y2="1">
              <stop offset="0" stopColor="#1a1a22" />
              <stop offset="1" stopColor="#000" />
            </linearGradient>
          </defs>
          <rect width="400" height="240" fill="url(#heroGlow)" />
          <path d="M30,150 Q60,90 130,75 L170,55 Q210,45 250,55 L290,75 Q360,90 380,150 L385,180 L370,195 L30,195 L15,180 Z"
            fill="url(#heroBody)" stroke="rgba(255,255,255,0.12)" strokeWidth="0.5" />
          <path d="M140,90 L180,60 Q210,53 240,60 L275,90 L260,120 L150,120 Z" fill="rgba(255,255,255,0.06)" />
          <path d="M50,145 L350,145" stroke="rgba(225,10,23,0.6)" strokeWidth="2" />
          <circle cx="105" cy="190" r="28" fill="#08080a" stroke="rgba(255,255,255,0.2)" />
          <circle cx="105" cy="190" r="14" fill="#1a1a22" />
          <circle cx="295" cy="190" r="28" fill="#08080a" stroke="rgba(255,255,255,0.2)" />
          <circle cx="295" cy="190" r="14" fill="#1a1a22" />
          <ellipse cx="378" cy="138" rx="10" ry="3.5" fill="rgba(255,46,75,0.9)" />
          <ellipse cx="378" cy="138" rx="20" ry="8" fill="rgba(255,46,75,0.3)" />
        </svg>
      </div>

      <div style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
        <button onClick={onSignIn} className="btn-primary" style={{
          background: '#fff', color: '#000', padding: '15px',
        }}>
          <Icons.Apple size={18} /> 用 Apple 登入
        </button>
        <button className="btn-secondary" style={{ padding: '15px' }}>
          <Icons.Phone size={16} /> 用手機號 (+852)
        </button>
        <div style={{ fontSize: 10, color: 'var(--ink-3)', textAlign: 'center', marginTop: 8, lineHeight: 1.5 }}>
          繼續即表示同意《服務條款》及《私隱政策》<br />
          <span style={{ fontFamily: 'var(--font-mono)', letterSpacing: '0.1em' }}>v0.1.0 · MVP BUILD</span>
        </div>
      </div>
    </div>
  </div>
);

window.ScreenFeed = ScreenFeed;
window.ScreenProfile = ScreenProfile;
window.ScreenAuth = ScreenAuth;