"use client";

import { useState } from "react";
import { useRouter, usePathname } from "next/navigation";

export default function Coupon() {
  const router = useRouter();
  const pathname = usePathname();
  const [activeTab, setActiveTab] = useState("unused");

  const tabs = [
    { id: "unused", name: "未使用" },
    { id: "used", name: "已使用" },
    { id: "expired", name: "已过期" },
  ];

  const handleTabChange = (tabId) => {
    setActiveTab(tabId);
    router.replace(`/coupon?tab=${tabId}`);
  };

  const handleGoShopping = () => {
    router.push("/tab");
  };

  return (
    <div className="min-h-screen bg-gray-50">
      {/* 顶部标题 */}
      <div className="bg-white p-4">
        <h1 className="text-xl font-bold text-center">优惠券</h1>
      </div>

      {/* Tab切换栏 */}
      <div className="bg-white">
        <div className="flex border-b">
          {tabs.map((tab) => (
            <button
              key={tab.id}
              className={`flex-1 py-3 text-center ${
                activeTab === tab.id
                  ? "text-yellow-500 border-b-2 border-yellow-500"
                  : "text-gray-500"
              }`}
              onClick={() => handleTabChange(tab.id)}
            >
              {tab.name}
            </button>
          ))}
        </div>
      </div>

      {/* 空状态展示 */}
      <div className="flex flex-col items-center justify-center p-8">
        <div className="w-24 h-24 bg-gray-100 rounded-full flex items-center justify-center mb-4">
          <svg
            className="w-12 h-12 text-gray-400"
            fill="none"
            stroke="currentColor"
            viewBox="0 0 24 24"
          >
            <path
              strokeLinecap="round"
              strokeLinejoin="round"
              strokeWidth={2}
              d="M15 5v2m0 4v2m0 4v2M5 5a2 2 0 00-2 2v3a2 2 0 110 4v3a2 2 0 002 2h14a2 2 0 002-2v-3a2 2 0 110-4V7a2 2 0 00-2-2H5z"
            />
          </svg>
        </div>
        <p className="text-gray-500 text-center mb-4">暂无优惠券</p>
        <button
          onClick={handleGoShopping}
          className="bg-yellow-400 text-white px-8 py-2 rounded-full hover:bg-yellow-500 transition-colors"
        >
          去逛逛
        </button>
      </div>
    </div>
  );
}