import { useEffect, useState } from 'react';
import { useNavigate } from 'react-router-dom';
import { useStoreSession } from '../contexts/StoreSessionContext';
import { request } from '../lib/api';

export default function MinePage() {
  const navigate = useNavigate();
  const { resetSession } = useStoreSession();
  const [store, setStore] = useState<Record<string, unknown> | null>(null);

  useEffect(() => {
    request('SHOP_H5', '/shop/store').then(setStore);
  }, []);

  const openTime = String(store?.openTime || '09:30');
  const closeTime = String(store?.closeTime || '22:00');

  return (
    <div className="shop-mine-page">
      <header className="shop-mine-header">
        <h1 className="app-page-title">我的</h1>
      </header>

      <div className="shop-mine-content">
        <h3 className="shop-mine-section-title">门店信息</h3>

        <div className="shop-mine-info-card">
          <div className="shop-mine-info-row">
            <div>
              <p className="shop-mine-info-label">门店名称</p>
              <p className="shop-mine-info-value name">{String(store?.name || '—')}</p>
            </div>
            <span className="material-symbols-outlined shop-mine-lock">lock</span>
          </div>
          <div className="shop-mine-info-row">
            <div>
              <p className="shop-mine-info-label">地理位置</p>
              <p className="shop-mine-info-value">{String(store?.address || '—')}</p>
            </div>
            <span className="material-symbols-outlined shop-mine-lock">lock</span>
          </div>
          <div className="shop-mine-info-row">
            <div>
              <p className="shop-mine-info-label">联系电话</p>
              <p className="shop-mine-info-value">{String(store?.phone || '—')}</p>
            </div>
            <span className="material-symbols-outlined shop-mine-lock">lock</span>
          </div>
          <div className="shop-mine-info-row">
            <div>
              <p className="shop-mine-info-label">营业时间</p>
              <p className="shop-mine-info-value">{openTime} - {closeTime}</p>
            </div>
            <span className="material-symbols-outlined shop-mine-lock">lock</span>
          </div>
        </div>

        <div className="shop-mine-help">
          <span className="material-symbols-outlined" style={{ fontSize: 16 }}>help</span>
          <p>如需修改信息请联系城市合伙人</p>
        </div>

        <button
          type="button"
          className="shop-mine-logout"
          onClick={() => { resetSession(); navigate('/login'); }}
        >
          <span className="material-symbols-outlined" style={{ fontSize: 20 }}>logout</span>
          退出登录
        </button>
      </div>
    </div>
  );
}