// Screen: Dashboard — Platform launcher

const DASHBOARD_AGENTS = [
  {
    id: 'ads',
    icon: 'megaphone',
    label: 'AI Agent Ads',
    platform: 'Ads Intelligence',
    tagline: 'Meta · Google · TikTok Ads',
    desc: 'Phân tích sản phẩm, xây dựng chân dung khách hàng, tạo content plan và tối ưu chiến dịch quảng cáo.',
    color: '#7B4FD4',
    color2: '#2E9DF7',
  },
  {
    id: 'media',
    icon: 'image',
    label: 'AI Agent Media',
    platform: 'Visual Creative Studio',
    tagline: 'Image · Video · Creative Flow',
    desc: 'Tạo ảnh quảng cáo chất lượng cao theo từng bước với AI — từ text-to-image đến biến đổi và chỉnh sửa ảnh.',
    color: '#F472B6',
    color2: '#A78BFA',
  },
  {
    id: 'ecom',
    icon: 'shopping-bag',
    label: 'AI Agent E-commerce',
    platform: 'E-commerce Intelligence',
    tagline: 'Shopee · Lazada · TikTok Shop',
    desc: 'Tối ưu listing sản phẩm, phân tích đối thủ, nghiên cứu từ khóa và tăng chuyển đổi trên các sàn TMĐT.',
    color: '#4ADE80',
    color2: '#66FCF1',
  },
];

const ScreenDashboard = ({ user, tier, lang, onSelectAgent, onLogout }) => {
  const T = (vi, en) => lang === 'en' ? en : vi;
  const [hovered, setHovered] = React.useState(null);

  const tierColor = { basic: '#66FCF1', pro: '#FBBF24', premium: '#A78BFA' }[tier] || '#66FCF1';

  return (
    <div style={{
      width: '100%', height: '100vh',
      background: 'var(--bg-base)', fontFamily: 'var(--font-body)',
      display: 'flex', flexDirection: 'column',
      position: 'relative', overflowY: 'auto', overflowX: 'hidden',
    }}>
      {/* Background glows */}
      <div style={{ position:'fixed', width:900, height:900, borderRadius:'50%', pointerEvents:'none', zIndex:0,
        background:'radial-gradient(circle,rgba(123,79,212,0.07) 0%,transparent 60%)',
        top:'-250px', right:'-200px' }} />
      <div style={{ position:'fixed', width:600, height:600, borderRadius:'50%', pointerEvents:'none', zIndex:0,
        background:'radial-gradient(circle,rgba(244,114,182,0.05) 0%,transparent 60%)',
        bottom:'-150px', left:'-100px' }} />

      {/* ── Header ── */}
      <header style={{
        display: 'flex', alignItems: 'center', justifyContent: 'space-between',
        padding: '0 36px', height: 60, flexShrink: 0,
        background: 'var(--bg-surface)',
        borderBottom: '1px solid var(--border)',
        position: 'relative', zIndex: 10,
      }}>
        <img src="/Logo flow.png" alt="Loij Flow"
          style={{ height: 32, display: 'block', objectFit: 'contain' }} />

        <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
          <div style={{
            padding: '3px 10px', borderRadius: 6,
            background: tierColor + '18', border: `1px solid ${tierColor}40`,
            fontSize: 10.5, fontWeight: 700, color: tierColor,
            letterSpacing: '0.06em', textTransform: 'uppercase',
          }}>
            {tier}
          </div>
          <div style={{
            display: 'flex', alignItems: 'center', gap: 8,
            padding: '6px 12px 6px 8px',
            background: 'var(--bg-elevated)', border: '1px solid var(--border)',
            borderRadius: 10,
          }}>
            <div style={{
              width: 28, height: 28, borderRadius: '50%',
              background: 'linear-gradient(135deg,#7B4FD4,#2E9DF7)',
              display: 'flex', alignItems: 'center', justifyContent: 'center',
              fontSize: 12, fontWeight: 800, color: '#fff', flexShrink: 0,
            }}>
              {user.charAt(0).toUpperCase()}
            </div>
            <span style={{ fontSize: 13, fontWeight: 600, color: 'var(--fg-primary)' }}>{user}</span>
          </div>
          <button onClick={onLogout} style={{
            display: 'flex', alignItems: 'center', gap: 6,
            padding: '8px 13px', borderRadius: 9,
            background: 'none', border: '1px solid var(--border)',
            color: 'var(--fg-muted)', cursor: 'pointer', fontSize: 12,
            transition: 'all 0.12s', fontFamily: 'var(--font-body)',
          }}
            onMouseEnter={e => { e.currentTarget.style.borderColor = 'rgba(248,113,113,0.4)'; e.currentTarget.style.color = '#F87171'; }}
            onMouseLeave={e => { e.currentTarget.style.borderColor = 'var(--border)'; e.currentTarget.style.color = 'var(--fg-muted)'; }}
          >
            <Icon name="log-out" size={13} color="currentColor" />
            {T('Đăng xuất', 'Log out')}
          </button>
        </div>
      </header>

      {/* ── Main ── */}
      <main style={{
        flex: 1, display: 'flex', flexDirection: 'column',
        alignItems: 'center', justifyContent: 'center',
        padding: '52px 40px 72px',
        position: 'relative', zIndex: 1,
      }}>
        {/* Welcome */}
        <div style={{ textAlign: 'center', marginBottom: 52 }}>
          <div style={{
            display: 'inline-flex', alignItems: 'center', gap: 8,
            padding: '5px 14px', borderRadius: 20,
            background: 'rgba(102,252,241,0.07)', border: '1px solid rgba(102,252,241,0.18)',
            fontSize: 12, fontWeight: 600, color: '#66FCF1',
            marginBottom: 18, letterSpacing: '0.02em',
          }}>
            <span style={{ width: 6, height: 6, borderRadius: '50%', background: '#66FCF1', boxShadow: '0 0 8px #66FCF1' }} />
            {T(`Xin chào, ${user}`, `Welcome, ${user}`)}
          </div>
          <h1 style={{
            fontSize: 36, fontWeight: 800, color: 'var(--fg-primary)',
            fontFamily: 'var(--font-display)', margin: '0 0 12px',
            letterSpacing: '-0.025em', lineHeight: 1.15,
          }}>
            {T('Chọn nền tảng AI', 'Choose your AI Platform')}
          </h1>
          <p style={{ fontSize: 14.5, color: 'var(--fg-secondary)', margin: 0, lineHeight: 1.7, maxWidth: 460 }}>
            {T(
              'Ba nền tảng AI chuyên biệt, mỗi nền tảng được tối ưu cho từng mảng công việc riêng.',
              'Three specialized AI platforms, each optimized for a specific domain.'
            )}
          </p>
        </div>

        {/* Platform cards */}
        <div style={{
          display: 'flex', gap: 20, flexWrap: 'wrap',
          justifyContent: 'center', maxWidth: 1040, width: '100%',
        }}>
          {DASHBOARD_AGENTS.map(agent => {
            const isHover = hovered === agent.id;

            return (
              <div
                key={agent.id}
                onMouseEnter={() => setHovered(agent.id)}
                onMouseLeave={() => setHovered(null)}
                onClick={() => onSelectAgent(agent.id)}
                style={{
                  width: 300, display: 'flex', flexDirection: 'column',
                  background: isHover
                    ? `linear-gradient(160deg, ${agent.color}0E 0%, var(--bg-surface) 55%)`
                    : 'var(--bg-surface)',
                  border: `1.5px solid ${isHover ? agent.color + '55' : 'var(--border)'}`,
                  borderRadius: 20, overflow: 'hidden',
                  cursor: 'pointer',
                  transition: 'all 0.22s ease',
                  boxShadow: isHover
                    ? `0 24px 64px ${agent.color}14, 0 0 0 1px ${agent.color}20`
                    : '0 2px 16px rgba(0,0,0,0.15)',
                  transform: isHover ? 'translateY(-4px)' : 'translateY(0)',
                  position: 'relative',
                }}
              >
                {/* Gradient top line */}
                <div style={{
                  position: 'absolute', top: 0, left: 0, right: 0, height: 2,
                  background: `linear-gradient(90deg, ${agent.color}, ${agent.color2})`,
                  opacity: isHover ? 1 : 0.5,
                  transition: 'opacity 0.22s',
                }} />

                {/* Icon + title row */}
                <div style={{ padding: '28px 24px 20px', display: 'flex', alignItems: 'flex-start', gap: 16 }}>
                  <div style={{
                    width: 56, height: 56, borderRadius: 16, flexShrink: 0,
                    background: `linear-gradient(135deg, ${agent.color}, ${agent.color2})`,
                    display: 'flex', alignItems: 'center', justifyContent: 'center',
                    boxShadow: isHover ? `0 8px 28px ${agent.color}40` : `0 4px 16px ${agent.color}25`,
                    transition: 'box-shadow 0.22s',
                  }}>
                    <Icon name={agent.icon} size={26} color="#fff" />
                  </div>
                  <div style={{ flex: 1, minWidth: 0, paddingTop: 3 }}>
                    <div style={{
                      fontSize: 17, fontWeight: 800, color: 'var(--fg-primary)',
                      fontFamily: 'var(--font-display)', letterSpacing: '-0.01em',
                      lineHeight: 1.2, marginBottom: 4,
                    }}>
                      {agent.label}
                    </div>
                    <div style={{
                      fontSize: 10.5, fontWeight: 700, color: agent.color,
                      letterSpacing: '0.05em', textTransform: 'uppercase',
                    }}>
                      {agent.platform}
                    </div>
                  </div>
                </div>

                {/* Divider */}
                <div style={{ height: 1, background: 'var(--border)', margin: '0 24px' }} />

                {/* Content */}
                <div style={{ padding: '18px 24px 22px', flex: 1, display: 'flex', flexDirection: 'column', gap: 10 }}>
                  <div style={{ fontSize: 10.5, color: 'var(--fg-muted)', letterSpacing: '0.04em', textTransform: 'uppercase', fontWeight: 600 }}>
                    {agent.tagline}
                  </div>
                  <div style={{ fontSize: 13, color: 'var(--fg-secondary)', lineHeight: 1.7, flex: 1 }}>
                    {agent.desc}
                  </div>
                  <button style={{
                    height: 42, borderRadius: 11, border: 'none', marginTop: 6,
                    background: isHover
                      ? `linear-gradient(135deg, ${agent.color}, ${agent.color2})`
                      : `linear-gradient(135deg, ${agent.color}99, ${agent.color2}99)`,
                    color: '#fff',
                    fontFamily: 'var(--font-body)', fontWeight: 700, fontSize: 13.5,
                    cursor: 'pointer',
                    display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 8,
                    transition: 'all 0.22s',
                    boxShadow: isHover ? `0 6px 22px ${agent.color}35` : 'none',
                  }}>
                    {T('Mở nền tảng', 'Open platform')}
                    <Icon name="arrow-right" size={14} color="#fff" />
                  </button>
                </div>
              </div>
            );
          })}
        </div>
      </main>

      <footer style={{
        textAlign: 'center', padding: '16px 40px', flexShrink: 0,
        borderTop: '1px solid var(--border)',
        fontSize: 11.5, color: 'var(--fg-muted)',
        position: 'relative', zIndex: 1,
      }}>
        Loij Flow · AI Marketing Suite · 2026
      </footer>
    </div>
  );
};

Object.assign(window, { ScreenDashboard });