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 | null;
  carouselUrls?: string[] | null;
  detailImageUrls?: string[] | null;
  aromaType: string;
  status: string;
};

type City = {
  id: string;
  code: string;
  name: string;
  status: string;
};

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

const CITY_STORAGE_KEY = 'dukang_selected_city';

export default function HomePage() {
  const [tab, setTab] = useState('QINGXIANG');
  const [products, setProducts] = useState<Product[]>([]);
  const [cities, setCities] = useState<City[]>([]);
  const [cityCode, setCityCode] = useState(() => localStorage.getItem(CITY_STORAGE_KEY) || '410100');
  const [toast, setToast] = useState('');

  useEffect(() => {
    request<City[]>('USER_H5', '/catalog/cities').then((list) => {
      setCities(list);
      if (!list.some((c) => c.code === cityCode) && list[0]) {
        setCityCode(list[0].code);
      }
    });
  }, []);

  useEffect(() => {
    if (!cityCode) return;
    localStorage.setItem(CITY_STORAGE_KEY, cityCode);
    request<Product[]>('USER_H5', `/catalog/products?cityCode=${encodeURIComponent(cityCode)}`).then(setProducts);
  }, [cityCode]);

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

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

  const selectedCity = cities.find((c) => c.code === cityCode);
  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>
            <select
              value={cityCode}
              onChange={(e) => setCityCode(e.target.value)}
              style={{ border: 'none', background: 'transparent', font: 'inherit', color: 'inherit' }}
            >
              {cities.map((c) => (
                <option key={c.code} value={c.code}>{c.name}</option>
              ))}
              {!cities.length && <option value={cityCode}>{selectedCity?.name ?? '郑州市'}</option>}
            </select>
          </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) => (
            <article key={p.id} className="home-product-card">
              <Link to={`/product/${p.id}`} className="home-product-link">
                <ProductCarousel images={getProductImages(p)} 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>
  );
}