// components/Minter.tsx
import { useState, useEffect } from 'react';
import { ethers } from 'ethers';
import MyNFT from '../abi/MyNFT.json';

const CONTRACT_ADDRESS = "0x...";
const MINT_PRICE = ethers.parseEther("0.01");

export const Minter = () => {
  const [quantity, setQuantity] = useState(1);
  const [supply, setSupply] = useState({ total: 0, max: 10000 });
  const [price, setPrice] = useState(MINT_PRICE);
  const [loading, setLoading] = useState(false);
  const [txHash, setTxHash] = useState('');

  const provider = new ethers.BrowserProvider(window.ethereum);

  useEffect(() => {
    const loadSupply = async () => {
      const contract = new ethers.Contract(CONTRACT_ADDRESS, MyNFT, await provider.getSigner());
      const [minted, max, mintPrice] = await Promise.all([
        contract.totalMinted(),
        contract.maxSupply(),
        contract.mintPrice(),
      ]);
      setSupply({ total: Number(minted), max: Number(max) });
      setPrice(mintPrice);
    };
    loadSupply();
  }, []);

  const mint = async () => {
    setLoading(true);
    try {
      const signer = await provider.getSigner();
      const contract = new ethers.Contract(CONTRACT_ADDRESS, MyNFT, signer);
      
      const tx = await contract.mint(quantity, {
        value: price * BigInt(quantity),
      });
      
      setTxHash(tx.hash);
      await tx.wait();
      
      // 刷新供应量
      const newTotal = await contract.totalMinted();
      setSupply(s => ({ ...s, total: Number(newTotal) }));
    } finally {
      setLoading(false);
    }
  };

  const remaining = supply.max - supply.total;

  return (
    <div className="minter">
      <h2>Mint Your NFT</h2>
      <div className="supply">{supply.total} / {supply.max} 已铸造</div>
      
      <div className="quantity-selector">
        <button onClick={() => setQuantity(Math.max(1, q-1))}>-</button>
        <span>{quantity}</span>
        <button onClick={() => setQuantity(Math.min(10, q+1))}>+</button>
      </div>

      <div className="price">总计: {ethers.formatEther(price * BigInt(quantity))} ETH</div>

      <button 
        onClick={mint} 
        disabled={loading || remaining <= 0}
        className="mint-btn"
      >
        {loading ? '铸造中...' : remaining <= 0 ? '已售完' : '立即铸造'}
      </button>

      {txHash && (
        <a href={`https://etherscan.io/tx/${txHash}`} target="_blank">
          查看交易 →
        </a>
      )}
    </div>
  );
};