'use client';

import { useState } from 'react';

const FACTORY_ADDRESS = process.env.NEXT_PUBLIC_FACTORY_ADDRESS || '';

const BASE_TOKENS = {
  USDC: '0xA0b86991c6218b36c1d19D4a2e9Eb0cE3606eB48',
  WETH: '0xC02aaA39b223FE8D0A0e5C4F27eAD9083C756Cc2',
};

export default function CreateEconomyForm({ account, signer }) {
  const [formData, setFormData] = useState({
    tokenName: '',
    tokenSymbol: '',
    nftName: '',
    nftSymbol: '',
    baseToken: BASE_TOKENS.USDC,
  });
  const [loading, setLoading] = useState(false);
  const [status, setStatus] = useState(null);
  const [addresses, setAddresses] = useState(null);

  const handleChange = (e) => {
    setFormData({ ...formData, [e.target.name]: e.target.value });
  };

  const handleSubmit = async (e) => {
    e.preventDefault();
    if (!signer) {
      setStatus({ type: 'error', message: 'Please connect your wallet first' });
      return;
    }

    setLoading(true);
    setStatus({ type: 'loading', message: 'Creating your creator economy...' });

    try {
      // Placeholder — wire up ethers contract call when factory is deployed
      setStatus({ type: 'success', message: 'Deploy factory contract first, then connect your wallet!' });
    } catch (error) {
      setStatus({ type: 'error', message: error.message || 'Failed to create economy' });
    } finally {
      setLoading(false);
    }
  };

  return (
    <section className="features" id="launch" style={{ paddingTop: '2rem' }}>
      <div className="section-header">
        <h2>Launch Your <span className="accent">Economy</span></h2>
        <p>Deploy your token, vault, and NFT collection in one transaction</p>
      </div>

      <div className="glass-card" style={{ maxWidth: '650px', margin: '0 auto' }}>
        <form onSubmit={handleSubmit} style={{ display: 'flex', flexDirection: 'column', gap: '1.25rem' }}>
          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '1.25rem' }}>
            <div>
              <label style={{ display: 'block', fontSize: '0.85rem', color: '#B8C4A8', marginBottom: '0.5rem' }}>Token Name</label>
              <input className="input-field" name="tokenName" value={formData.tokenName} onChange={handleChange} placeholder="e.g. MyBand Token" required />
            </div>
            <div>
              <label style={{ display: 'block', fontSize: '0.85rem', color: '#B8C4A8', marginBottom: '0.5rem' }}>Token Symbol</label>
              <input className="input-field" name="tokenSymbol" value={formData.tokenSymbol} onChange={handleChange} placeholder="e.g. BAND" required />
            </div>
          </div>

          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '1.25rem' }}>
            <div>
              <label style={{ display: 'block', fontSize: '0.85rem', color: '#B8C4A8', marginBottom: '0.5rem' }}>NFT Collection Name</label>
              <input className="input-field" name="nftName" value={formData.nftName} onChange={handleChange} placeholder="e.g. MyBand NFTs" required />
            </div>
            <div>
              <label style={{ display: 'block', fontSize: '0.85rem', color: '#B8C4A8', marginBottom: '0.5rem' }}>NFT Symbol</label>
              <input className="input-field" name="nftSymbol" value={formData.nftSymbol} onChange={handleChange} placeholder="e.g. MBNFT" required />
            </div>
          </div>

          <div>
            <label style={{ display: 'block', fontSize: '0.85rem', color: '#B8C4A8', marginBottom: '0.5rem' }}>Base Token</label>
            <select className="input-field" name="baseToken" value={formData.baseToken} onChange={handleChange}>
              <option value={BASE_TOKENS.USDC}>USDC (Recommended)</option>
              <option value={BASE_TOKENS.WETH}>WETH</option>
            </select>
          </div>

          <button
            type="submit"
            className="btn btn-primary"
            disabled={loading || !signer}
            style={{ width: '100%', justifyContent: 'center', marginTop: '0.5rem' }}
          >
            {loading ? (
              <span style={{ display: 'flex', alignItems: 'center', gap: '0.5rem' }}>
                <span style={{ width: '16px', height: '16px', border: '2px solid #050508', borderTopColor: 'transparent', borderRadius: '50%', animation: 'spin 0.8s linear infinite' }} />
                Deploying...
              </span>
            ) : (
              'Launch Economy'
            )}
          </button>
        </form>

        {!signer && (
          <p style={{ textAlign: 'center', color: '#B8C4A8', fontSize: '0.85rem', marginTop: '1rem' }}>
            Connect your wallet to launch a creator economy
          </p>
        )}

        {status && (
          <div className={`status-message status-${status.type}`} style={{ marginTop: '1rem' }}>
            {status.message}
          </div>
        )}

        {addresses && (
          <div style={{ marginTop: '1rem', padding: '1rem', background: 'rgba(200,255,0,0.05)', borderRadius: '12px', border: '1px solid rgba(200,255,0,0.2)' }}>
            <p style={{ color: '#C8FF00', fontWeight: 600, marginBottom: '0.5rem', fontSize: '0.9rem' }}>Deployed Contracts:</p>
            <div style={{ fontSize: '0.8rem', color: '#B8C4A8', display: 'flex', flexDirection: 'column', gap: '0.25rem' }}>
              <div><span style={{ color: '#C8FF00' }}>Token:</span> {addresses.token}</div>
              <div><span style={{ color: '#C8FF00' }}>Vault:</span> {addresses.vault}</div>
              <div><span style={{ color: '#C8FF00' }}>NFT:</span> {addresses.nftCollection}</div>
            </div>
          </div>
        )}
      </div>

      <style jsx>{`
        @keyframes spin {
          to { transform: rotate(360deg); }
        }
      `}</style>
    </section>
  );
}