import { useEffect, useState } from 'react';
import { Link } from 'react-router-dom';
import { request } from '../lib/api';
import ProductCarousel from '../components/ProductCarousel';
import TabMainHeader from '../components/TabMainHeader';
import AppToast from '../components/AppToast';
import { getProductImages } from '../lib/product-images';
import CouponBadge from '@dukang/shared-ui/CouponBadge';

type Product = {
  id: string;
  name: string;
  subtitle: string;
  price: number;
  benefitDisplay: number;
  mainImageUrl: string;
  carouselUrls?: string[] | null;
  aromaType: string;
  status: string;
};

const AROMA_TABS = [
  { key: 'QINGXIANG', label: '清香型', open: true },
  { key: 'JIANGXIANG', label: '酱香型', open: false },
  { key: 'NONGXIANG', label: '浓香型', open: false },
];

export default function HomePage() {
  const [tab, setTab] = useState('QINGXIANG');
  const [products, setProducts] = useState<Product[]>([]);
  const [toast, setToast] = useState('');

  useEffect(() => {
    request<Product[]>('USER_H5', '/catalog/products').then(setProducts);
  }, []);

  function showToast(message: string) {
    setToast(message);
    window.setTimeout(() => setToast(''), 2200);
  }

  function onAromaTabClick(key: string, open: boolean) {
    if (!open) {
      showToast('暂未开放');
      return;
    }
    setTab(key);
  }

  const filtered = products.filter((p) => p.aromaType === tab);
  const onSale = tab === 'QINGXIANG';

  return (
    <div className="page home-page">
      <TabMainHeader
        title="杜康好客"
        extra={(
          <div className="tab-main-city">
            <span className="material-symbols-outlined">location_on</span>
            <span>郑州市</span>
          </div>
        )}
      />

      <nav className="home-aroma-nav">
        {AROMA_TABS.map((t) => (
          <button
            key={t.key}
            type="button"
            className={`home-aroma-tab${tab === t.key ? ' active' : ''}${!t.open ? ' muted' : ''}`}
            onClick={() => onAromaTabClick(t.key, t.open)}
          >
            {t.label}
          </button>
        ))}
      </nav>

      <section className="home-product-list">
        {!onSale && <div className="home-empty">该香型暂未上线，敬请期待</div>}
        {onSale &&
          filtered.map((p, index) => (
            <article key={p.id} className="home-product-card">
              <Link to={`/product/${p.id}`} className="home-product-link">
                <ProductCarousel images={getProductImages(index)} alt={p.name} />
                <div className="home-product-body">
                  <div className="home-product-row">
                    <h3 className="home-product-name">{p.name}</h3>
                    <span className="home-product-price">¥{p.price}</span>
                  </div>
                  <p className="home-product-sub">{p.subtitle}</p>
                  <div className="home-product-footer">
                    <CouponBadge amount={p.benefitDisplay} label="好客权益" />
                  </div>
                </div>
              </Link>
              <div className="home-product-actions">
                <Link to={`/product/${p.id}`} className="home-buy-btn">
                  立即购买
                </Link>
              </div>
            </article>
          ))}
      </section>

      <AppToast message={toast} />
    </div>
  );
}