import React, { useEffect, useRef, useState } from 'react';
import { X, ChevronRight } from 'lucide-react';
import { usePayStore } from './store/pay';
import { createQrcode } from './modules/create-qrcode';
import Panda from '@/assets/panda.png';
import Button from '@mui/material/Button/Button';
export const App = () => {
  const [isAgreed, setIsAgreed] = useState(false);
  const qrcodeRef = useRef<HTMLImageElement>(null);
  const { getPayUrl, codeUrl, user, init, money, setMoney, subject, setSubject } = usePayStore();

  useEffect(() => {
    // getPayUrl({ money: money, subject: subject });
    init();
  }, []);
  useEffect(() => {
    if (qrcodeRef.current) {
      createQrcode(codeUrl, qrcodeRef.current);
    }
  }, [codeUrl]);
  let username = user?.nickname || user?.username || '--';
  if (username === 'root') {
    username = 'kevisual';
  }
  const redirectToPay = async () => {
    const res = await getPayUrl({ money: money, subject: subject });
    if (res.code === 200) {
      const newLink = res?.data?.form;
      if (newLink) {
        // window.location.href = newLink;
        window.open(newLink, '_blank');
      }
    }
  };
  return (
    <div className='min-h-screen bg-gray-50 flex items-center justify-center border-gray-200'>
      <div className='w-[600px] h-[400px] bg-white rounded-lg shadow-lg overflow-hidden'>
        {/* Header */}
        <div className='bg-white p-3 flex justify-between items-center border-b border-gray-200'>
          <div className='flex items-center gap-2'>
            <img src={user?.avatar ?? Panda} alt='User Avatar' className='w-8 h-8 rounded-full' />
            <div>
              <h2 className='text-base font-semibold'>{username}</h2>
              <span className='text-gray-500 text-xs'>会员：已过期</span>
            </div>
          </div>
          <div className='flex items-center gap-3 text-gray-600 text-sm'>
            <span>赠送好友</span>
            <span>积分兑换</span>
            <span>激活码开通</span>
            <X className='w-4 h-4' />
          </div>
        </div>

        {/* Main Content */}
        <div className='p-4 h-[calc(400px-56px)] overflow-y-auto'>
          {/* Membership Type */}
          <div className='flex items-center gap-2 mb-6'>
            <span className='bg-pink-100 text-pink-500 px-2 py-0.5 rounded text-xs'>会员</span>
            <div className='flex-1'></div>
            <button className='flex items-center text-gray-600 text-xs'>
              切换高级套餐
              <ChevronRight className='w-3 h-3' />
            </button>
          </div>

          {/* Payment QR Code */}
          <div className='bg-white border border-gray-200 rounded-lg p-4 text-center min-h-[200px] flex flex-col justify-center items-center'>
            <div className='text-2xl font-bold mb-3'>¥ {(money / 100).toFixed(2)}</div>
            {/* <QrCode className='w-32 h-32 mx-auto mb-2' /> */}
            {/* <img id='qrcode' className='w-32 h-32 mx-auto mb-2' ref={qrcodeRef} /> */}
            {/* <p className='text-gray-600 text-xs'>请使用支付宝扫码支付</p> */}
            <div className='flex justify-center items-center gap-2'>
              <div className='text-center px-4 py-2 cursor-pointer rounded-md shadow-md text-gray-600 text-xs border border-gray-300' onClick={redirectToPay}>
                提交订单
              </div>
            </div>
          </div>

          {/* Terms */}
          <div className='mt-4 text-xs text-gray-500 text-center flex items-center justify-center gap-1'>
            <input type='checkbox' id='terms' checked={isAgreed} onChange={(e) => setIsAgreed(e.target.checked)} className='w-3 h-3 accent-pink-500' />
            <label className='text-gray-300 underline' htmlFor='terms'>
              已阅读《会员服务协议》
            </label>
          </div>
        </div>
      </div>
    </div>
  );
};
