import { useEffect, useState } from 'react';
import { Link, useNavigate } from 'react-router-dom';
import { request } from '../lib/api';
import { isWechatEnv, weixinSdk } from '../lib/weixin';

function formatMoney(n: number) {
  return n.toLocaleString('zh-CN', { minimumFractionDigits: 0, maximumFractionDigits: 2 });
}

export default function HomePage() {
  const navigate = useNavigate();
  const [dash, setDash] = useState<Record<string, unknown> | null>(null);
  const [open, setOpen] = useState(true);

  useEffect(() => {
    request('SHOP_H5', '/shop/dashboard').then((d) => {
      setDash(d);
      setOpen(String((d.store as Record<string, unknown>)?.status) === 'OPEN');
    });
  }, []);

  const store = dash?.store as Record<string, unknown> | undefined;
  const recent = (dash?.recentRecords as Array<Record<string, unknown>>) || [];
  const openTime = String(store?.openTime || '10:00');
  const closeTime = String(store?.closeTime || '22:00');

  async function handleScan() {
    if (isWechatEnv()) {
      try {
        await weixinSdk.init();
        const token = await weixinSdk.scanQrCode();
        if (token) {
          navigate(`/redeem?token=${encodeURIComponent(token)}`);
          return;
        }
      } catch {
        /* fall through to manual redeem page */
      }
    }
    navigate('/redeem');
  }

  return (
    <div className="shop-home-page">
      <header className="shop-home-header">
        <h1 className="app-page-title">门店管理中心</h1>
      </header>

      <div className="shop-home-content">
        <section className="shop-home-hero">
          <div className="shop-home-hero-store">
            <span className="material-symbols-outlined shop-fill-icon">store</span>
            <h2>{String(store?.name || '门店')}</h2>
          </div>
          <div className="shop-home-stats">
            <div className="shop-home-stat">
              <p className="shop-home-stat-label">今日核销笔数</p>
              <p className="shop-home-stat-value">{Number(dash?.todayCount || 0)}</p>
            </div>
            <div className="shop-home-stat">
              <p className="shop-home-stat-label">今日到账金额</p>
              <p className="shop-home-stat-value">
                <span style={{ fontSize: 18 }}>¥</span>
                {formatMoney(Number(dash?.todayAmount || 0))}
              </p>
            </div>
          </div>
        </section>

        <section className="shop-home-scan">
          <button type="button" className="shop-home-scan-btn" onClick={handleScan}>
            <span className="material-symbols-outlined">qr_code_scanner</span>
          </button>
          <p className="shop-home-scan-label">扫码核销</p>
        </section>

        <section className="shop-home-status">
          <div className="shop-home-status-left">
            <div className={`shop-home-status-icon${open ? '' : ' closed'}`}>
              <span className="material-symbols-outlined shop-fill-icon">schedule</span>
            </div>
            <div>
              <p className="shop-home-status-title">营业状态</p>
              <p className="shop-home-status-sub">{open ? '当前正在营业中' : '当前已停止营业'}</p>
              <p className="shop-home-status-sub">营业时间: {openTime} - {closeTime}</p>
            </div>
          </div>
          <label className="shop-home-switch" onClick={() => navigate('/status')}>
            <input type="checkbox" checked={open} readOnly tabIndex={-1} />
            <span className="shop-home-switch-track" />
          </label>
        </section>

        <section>
          <div className="shop-home-records-head">
            <h3 className="shop-home-records-title">核销记录</h3>
            <Link to="/records" className="shop-home-records-link">
              查看全部
              <span className="material-symbols-outlined" style={{ fontSize: 16 }}>chevron_right</span>
            </Link>
          </div>
          <div className="shop-home-record-list">
            {recent.length === 0 && (
              <p className="shop-home-status-sub" style={{ textAlign: 'center', padding: '16px 0' }}>暂无核销记录</p>
            )}
            {recent.map((r) => (
              <div key={String(r.id)} className="shop-home-record-item">
                <div>
                  <p className="shop-home-record-time">核销时间</p>
                  <p className="shop-home-record-value">
                    {new Date(String(r.createdAt)).toLocaleString('zh-CN')}
                  </p>
                </div>
                <p className="shop-home-record-amount">¥{formatMoney(Number(r.amount))}</p>
              </div>
            ))}
          </div>
        </section>
      </div>
    </div>
  );
}