import React, { useState, useEffect } from 'react';
import { t } from '@/i18n';
import Taro from '@tarojs/taro';
import { getCouponDetail } from '../../services/coupon';
import type { CouponItem } from '../../services/coupon';
import logoIcon from '@/assets/images/logo_icon.png';

/**
 * E2. H5页面 - 券分享页 + 活动落地页 + 注册引导页
 *
 * 券信息展示 + 「打开App购买」/「小程序购买」引导
 */

// === 券分享页 ===
export const SharePage: React.FC = () => {
  const [coupon, setCoupon] = useState<CouponItem | null>(null);

  useEffect(() => {
    const params = Taro.getCurrentInstance().router?.params;
    const id = params?.id;
    if (id) {
      getCouponDetail(id)
        .then((data) => setCoupon(data))
        .catch(() => {});
    }
  }, []);

  const brandName = coupon?.brandName || 'Brand';
  const brandInitial = brandName[0] || 'G';
  const name = coupon?.name || '---';
  const price = coupon ? coupon.currentPrice.toFixed(2) : '0.00';
  const faceValue = coupon ? coupon.faceValue : 0;
  const savings = coupon ? (coupon.faceValue - coupon.currentPrice).toFixed(2) : '0.00';
  const discount = coupon ? ((coupon.currentPrice / coupon.faceValue) * 10).toFixed(1) + '折' : '--';
  const creditRating = coupon?.creditRating || '';

  return (
    <div style={{
      minHeight: '100vh',
      background: 'linear-gradient(180deg, #6C5CE7 0%, #F8F9FC 40%)',
      fontFamily: "'Inter', -apple-system, sans-serif",
    }}>
      {/* Header */}
      <div style={{ padding: '48px 24px 0', textAlign: 'center' }}>
        <div style={{
          display: 'inline-flex',
          alignItems: 'center',
          gap: 8,
          padding: '8px 16px',
          background: 'rgba(255,255,255,0.2)',
          borderRadius: 999,
          color: 'white',
          fontSize: 13,
        }}>
          <img src={logoIcon} style={{ width: 20, height: 20 }} alt="Genex" />
          <span>{t('share_from_genex')}</span>
        </div>
      </div>

      {/* Coupon Card */}
      <div style={{
        margin: '24px 20px',
        background: 'white',
        borderRadius: 20,
        boxShadow: '0 8px 32px rgba(0,0,0,0.12)',
        overflow: 'hidden',
      }}>
        {/* Image */}
        <div style={{
          height: 180,
          background: 'linear-gradient(135deg, #6C5CE7, #9B8FFF)',
          display: 'flex',
          alignItems: 'center',
          justifyContent: 'center',
        }}>
          <span style={{ fontSize: 64, opacity: 0.3 }}>🎫</span>
        </div>

        {/* Info */}
        <div style={{ padding: 24 }}>
          <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 8 }}>
            <div style={{
              width: 32, height: 32, borderRadius: 8,
              background: '#F1F3F8',
              display: 'flex', alignItems: 'center', justifyContent: 'center',
              fontSize: 14, fontWeight: 700, color: '#6C5CE7',
            }}>{brandInitial}</div>
            <span style={{ fontSize: 13, color: '#5C6478' }}>{brandName}</span>
            {creditRating && (
              <span style={{
                padding: '1px 6px', borderRadius: 999,
                background: 'rgba(0,196,140,0.1)',
                border: '1px solid rgba(0,196,140,0.3)',
                fontSize: 10, fontWeight: 700, color: '#00C48C',
              }}>{creditRating}</span>
            )}
          </div>

          <h2 style={{ fontSize: 20, fontWeight: 600, color: '#141723', margin: '0 0 12px' }}>
            {name}
          </h2>

          <div style={{
            padding: 16,
            background: '#F3F1FF',
            borderRadius: 12,
            marginBottom: 16,
          }}>
            <div style={{ display: 'flex', alignItems: 'flex-end', gap: 8 }}>
              <span style={{ fontSize: 14, fontWeight: 700, color: '#6C5CE7' }}>$</span>
              <span style={{ fontSize: 32, fontWeight: 700, color: '#6C5CE7', lineHeight: 1 }}>{price}</span>
              <span style={{ fontSize: 13, color: '#A0A8BE', textDecoration: 'line-through' }}>${faceValue}</span>
              <span style={{
                padding: '2px 8px',
                background: 'linear-gradient(135deg, #6C5CE7, #9B8FFF)',
                color: 'white', fontSize: 11, fontWeight: 700, borderRadius: 999,
              }}>{discount}</span>
            </div>
            <div style={{ fontSize: 12, color: '#00C48C', marginTop: 6 }}>
              {t('coupon_price_save')} ${savings}
            </div>
          </div>

          {/* Info rows */}
          {[
            { label: t('coupon_valid_until'), value: coupon?.expiryDate ? coupon.expiryDate.split('T')[0].replace(/-/g, '/') : '--' },
            { label: t('coupon_store'), value: t('coupon_stores_count') },
          ].map((item, i) => (
            <div key={i} style={{
              display: 'flex',
              justifyContent: 'space-between',
              padding: '10px 0',
              borderBottom: '1px solid #F1F3F8',
              fontSize: 13,
            }}>
              <span style={{ color: '#5C6478' }}>{item.label}</span>
              <span style={{ color: '#141723', fontWeight: 500 }}>{item.value}</span>
            </div>
          ))}
        </div>
      </div>

      {/* CTA Buttons */}
      <div style={{ padding: '0 20px 32px' }}>
        <button style={{
          width: '100%',
          height: 52,
          background: '#6C5CE7',
          color: 'white',
          border: 'none',
          borderRadius: 12,
          fontSize: 16,
          fontWeight: 600,
          cursor: 'pointer',
          marginBottom: 12,
        }}>
          {t('share_open_app')}
        </button>
        <button style={{
          width: '100%',
          height: 52,
          background: 'white',
          color: '#6C5CE7',
          border: '1.5px solid #6C5CE7',
          borderRadius: 12,
          fontSize: 16,
          fontWeight: 600,
          cursor: 'pointer',
        }}>
          {t('share_miniapp_buy')}
        </button>
      </div>
    </div>
  );
};

// === 活动落地页 ===
export const ActivityPage: React.FC = () => {
  return (
    <div style={{
      minHeight: '100vh',
      background: '#F8F9FC',
      fontFamily: "'Inter', -apple-system, sans-serif",
    }}>
      {/* Activity Banner */}
      <div style={{
        height: 240,
        background: 'linear-gradient(135deg, #6C5CE7, #4834D4)',
        display: 'flex',
        flexDirection: 'column',
        justifyContent: 'center',
        alignItems: 'center',
        color: 'white',
      }}>
        <h1 style={{ fontSize: 28, fontWeight: 700, margin: 0 }}>{t('activity_new_user')}</h1>
        <p style={{ fontSize: 16, opacity: 0.8, margin: '8px 0 0' }}>{t('activity_first_order')}</p>
      </div>

      {/* Coupon Grid */}
      <div style={{ padding: 20 }}>
        <h3 style={{ fontSize: 18, fontWeight: 600, marginBottom: 16 }}>{t('activity_coupons')}</h3>
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 12 }}>
          {Array.from({ length: 4 }, (_, i) => (
            <div key={i} style={{
              background: 'white',
              borderRadius: 12,
              overflow: 'hidden',
              border: '1px solid #F1F3F8',
            }}>
              <div style={{
                height: 100,
                background: '#F3F1FF',
                display: 'flex',
                alignItems: 'center',
                justifyContent: 'center',
              }}>
                <span style={{ fontSize: 32, opacity: 0.4 }}>🎫</span>
              </div>
              <div style={{ padding: 10 }}>
                <div style={{ fontSize: 12, color: '#5C6478' }}>{t('activity_brand')} {i + 1}</div>
                <div style={{ fontSize: 16, fontWeight: 700, color: '#6C5CE7' }}>
                  ${(i + 1) * 8.5}
                </div>
                <div style={{ fontSize: 11, color: '#A0A8BE', textDecoration: 'line-through' }}>
                  ${(i + 1) * 10}
                </div>
              </div>
            </div>
          ))}
        </div>

        {/* CTA */}
        <button style={{
          width: '100%',
          height: 48,
          marginTop: 24,
          background: '#6C5CE7',
          color: 'white',
          border: 'none',
          borderRadius: 12,
          fontSize: 15,
          fontWeight: 600,
          cursor: 'pointer',
        }}>
          {t('activity_join_now')}
        </button>
      </div>
    </div>
  );
};

// === 注册引导页 ===
export const RegisterGuidePage: React.FC = () => {
  return (
    <div style={{
      minHeight: '100vh',
      background: 'white',
      fontFamily: "'Inter', -apple-system, sans-serif",
      display: 'flex',
      flexDirection: 'column',
      alignItems: 'center',
      justifyContent: 'center',
      padding: 40,
    }}>
      {/* Logo */}
      <div style={{
        width: 72, height: 72,
        borderRadius: 18,
        display: 'flex',
        alignItems: 'center',
        justifyContent: 'center',
        marginBottom: 24,
        boxShadow: '0 4px 16px rgba(108,92,231,0.3)',
        overflow: 'hidden',
      }}>
        <img src={logoIcon} style={{ width: 72, height: 72 }} alt="Genex" />
      </div>

      <h1 style={{ fontSize: 24, fontWeight: 700, color: '#141723', margin: '0 0 8px' }}>
        {t('register_join')}
      </h1>
      <p style={{ fontSize: 15, color: '#5C6478', margin: '0 0 40px', textAlign: 'center' }}>
        {t('register_slogan')}<br />
        {t('register_benefit')}
      </p>

      {/* Features */}
      {[
        { icon: '🎫', title: t('register_benefit_coupons'), desc: t('register_benefit_coupons_desc') },
        { icon: '💰', title: t('register_benefit_discount'), desc: t('register_benefit_discount_desc') },
        { icon: '🔒', title: t('register_benefit_safe'), desc: t('register_benefit_safe_desc') },
      ].map((f, i) => (
        <div key={i} style={{
          display: 'flex',
          alignItems: 'center',
          width: '100%',
          maxWidth: 320,
          padding: '14px 0',
        }}>
          <div style={{
            width: 44, height: 44, borderRadius: 12,
            background: '#F3F1FF',
            display: 'flex', alignItems: 'center', justifyContent: 'center',
            fontSize: 20, marginRight: 16, flexShrink: 0,
          }}>{f.icon}</div>
          <div>
            <div style={{ fontSize: 15, fontWeight: 600, color: '#141723' }}>{f.title}</div>
            <div style={{ fontSize: 12, color: '#5C6478' }}>{f.desc}</div>
          </div>
        </div>
      ))}

      <div style={{ width: '100%', maxWidth: 320, marginTop: 32 }}>
        <button style={{
          width: '100%', height: 52,
          background: '#6C5CE7', color: 'white',
          border: 'none', borderRadius: 12,
          fontSize: 16, fontWeight: 600, cursor: 'pointer',
          marginBottom: 12,
        }}>
          {t('register_now')}
        </button>
        <button style={{
          width: '100%', height: 52,
          background: 'transparent', color: '#6C5CE7',
          border: '1.5px solid #6C5CE7', borderRadius: 12,
          fontSize: 16, fontWeight: 600, cursor: 'pointer',
        }}>
          {t('register_login')}
        </button>
      </div>
    </div>
  );
};

export default SharePage;
