import React, { useState } from 'react';
import { ChevronRight, Target, TrendingUp, Zap } from 'lucide-react';

// ============================================
// DARK ATHLETIC SIGNUP - Updated with app icon
// ============================================
export default function SignupDarkAthletic({ onComplete }) {
  const [form, setForm] = useState({ name: '', age: '', weight: '', feet: '', inches: '', goal: 'lose' });

  const handleSubmit = (e) => {
    e.preventDefault();
    if (!form.name || !form.weight) return;

    // --- THE CALCULATION YOU WERE MISSING ---
    const weight = parseInt(form.weight);
    const sedentary = weight * 11;       // 2200 for 200lb person
    const maintenance = sedentary + 300; // 2500 TDEE Average

    let initialGoal = maintenance;
    if (form.goal === 'lose') {
      initialGoal = maintenance - 500;   // DROPS IT TO 2000 FOR WEIGHT LOSS
    } else if (form.goal === 'gain') {
      initialGoal = maintenance + 300;   // 2800 FOR BULKING
    }

    if (onComplete) {
      onComplete({
        ...form,
        plan: form.goal,        // Maps 'lose' to 'plan' for the App logic
        baseGoal: initialGoal   // Sends the 2000 calorie number to the App
      });
    }
  };

  return (
    <div style={{
      minHeight: '100dvh', // Use dynamic viewport height
      height: 'auto',      // Allow it to shrink
      background: 'linear-gradient(180deg, #0a0a0a 0%, #171717 100%)',
      padding: '40px 20px',
      fontFamily: 'system-ui, sans-serif',
      color: '#fff',
      position: 'relative',
      overflow: 'hidden'
    }}>
      {/* Decorative grid lines */}
      <div style={{
        position: 'absolute',
        inset: 0,
        backgroundImage: `
          linear-gradient(rgba(255,255,255,0.02) 1px, transparent 1px),
          linear-gradient(90deg, rgba(255,255,255,0.02) 1px, transparent 1px)
        `,
        backgroundSize: '60px 60px',
        pointerEvents: 'none'
      }} />
      
      {/* Accent glow */}
      <div style={{
        position: 'absolute',
        top: '-20%',
        right: '-10%',
        width: '400px',
        height: '400px',
        background: 'radial-gradient(circle, rgba(37, 99, 235, 0.15) 0%, transparent 70%)',
        pointerEvents: 'none'
      }} />

      <div style={{ maxWidth: '400px', margin: '0 auto', position: 'relative', zIndex: 1 }}>
        {/* Logo - Using your app icon */}
        <div style={{ textAlign: 'center', marginBottom: '48px' }}>
          <img 
            src="/app-icon.png" 
            alt="Train Right"
            style={{
              width: '80px',
              height: '80px',
              margin: '0 auto 20px',
              borderRadius: '20px',
              boxShadow: '0 20px 40px rgba(0,0,0,0.4)'
            }}
          />
          <h1 style={{
            fontSize: '48px',
            fontWeight: '900',
            letterSpacing: '4px',
            margin: '0 0 8px 0',
            textTransform: 'uppercase'
          }}>TRAIN RIGHT</h1>
          <p style={{
            fontSize: '12px',
            letterSpacing: '3px',
            color: '#737373',
            textTransform: 'lowercase'
          }}>powered by dubllabs</p>
        </div>

        <form onSubmit={handleSubmit}>
          {/* Name Input */}
          <div style={{ marginBottom: '24px' }}>
            <label style={{
              display: 'block',
              fontSize: '11px',
              letterSpacing: '2px',
              color: '#737373',
              marginBottom: '8px'
            }}>YOUR NAME</label>
            <input
              value={form.name}
              onChange={e => setForm({...form, name: e.target.value})}
              maxLength={12}
              placeholder="ENTER NAME"
              style={{
                width: '100%',
                padding: '18px 20px',
                background: 'rgba(255,255,255,0.05)',
                border: '1px solid rgba(255,255,255,0.1)',
                borderRadius: '12px',
                color: '#fff',
                fontSize: '16px',
                letterSpacing: '2px',
                outline: 'none',
                transition: 'all 0.3s ease',
                boxSizing: 'border-box'
              }}
            />
          </div>

          {/* Age & Weight Row */}
          <div style={{ display: 'flex', gap: '16px', marginBottom: '24px' }}>
            <div style={{ flex: 1 }}>
              <label style={{
                display: 'block',
                fontSize: '11px',
                letterSpacing: '2px',
                color: '#737373',
                marginBottom: '8px'
              }}>AGE</label>
              <input
                type="number"
                value={form.age}
                onChange={e => setForm({...form, age: e.target.value})}
                placeholder="25"
                style={{
                  width: '100%',
                  padding: '18px 20px',
                  background: 'rgba(255,255,255,0.05)',
                  border: '1px solid rgba(255,255,255,0.1)',
                  borderRadius: '12px',
                  color: '#fff',
                  fontSize: '16px',
                  letterSpacing: '2px',
                  outline: 'none',
                  boxSizing: 'border-box'
                }}
              />
            </div>
            <div style={{ flex: 1 }}>
              <label style={{
                display: 'block',
                fontSize: '11px',
                letterSpacing: '2px',
                color: '#737373',
                marginBottom: '8px'
              }}>WEIGHT (LBS)</label>
              <input
                type="number"
                value={form.weight}
                onChange={e => setForm({...form, weight: e.target.value})}
                placeholder="180"
                style={{
                  width: '100%',
                  padding: '18px 20px',
                  background: 'rgba(255,255,255,0.05)',
                  border: '1px solid rgba(255,255,255,0.1)',
                  borderRadius: '12px',
                  color: '#fff',
                  fontSize: '16px',
                  letterSpacing: '2px',
                  outline: 'none',
                  boxSizing: 'border-box'
                }}
              />
            </div>
          </div>

          {/* Height Row */}
          <div style={{ marginBottom: '32px' }}>
            <label style={{
              display: 'block',
              fontSize: '11px',
              letterSpacing: '2px',
              color: '#737373',
              marginBottom: '8px'
            }}>HEIGHT</label>
            <div style={{ display: 'flex', gap: '16px' }}>
              <input
                type="number"
                value={form.feet}
                onChange={e => setForm({...form, feet: e.target.value})}
                placeholder="FT"
                style={{
                  flex: 1,
                  padding: '18px 20px',
                  background: 'rgba(255,255,255,0.05)',
                  border: '1px solid rgba(255,255,255,0.1)',
                  borderRadius: '12px',
                  color: '#fff',
                  fontSize: '16px',
                  letterSpacing: '2px',
                  outline: 'none',
                  boxSizing: 'border-box'
                }}
              />
              <input
                type="number"
                value={form.inches}
                onChange={e => setForm({...form, inches: e.target.value})}
                placeholder="IN"
                style={{
                  flex: 1,
                  padding: '18px 20px',
                  background: 'rgba(255,255,255,0.05)',
                  border: '1px solid rgba(255,255,255,0.1)',
                  borderRadius: '12px',
                  color: '#fff',
                  fontSize: '16px',
                  letterSpacing: '2px',
                  outline: 'none',
                  boxSizing: 'border-box'
                }}
              />
            </div>
          </div>

          {/* Goal Selection */}
          <div style={{ marginBottom: '40px' }}>
            <label style={{
              display: 'block',
              fontSize: '11px',
              letterSpacing: '2px',
              color: '#737373',
              marginBottom: '16px'
            }}>YOUR GOAL</label>
            <div style={{ display: 'flex', gap: '12px' }}>
              {[
                { key: 'lose', label: 'CUT', icon: TrendingUp },
                { key: 'maintain', label: 'MAINTAIN', icon: Target },
                { key: 'gain', label: 'BULK', icon: Zap }
              ].map(({ key, label, icon: Icon }) => (
                <button
                  key={key}
                  type="button"
                  onClick={() => setForm({...form, goal: key})}
                  style={{
                    flex: 1,
                    padding: '20px 12px',
                    background: form.goal === key 
                      ? 'linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%)' // Blue Gradient
                      : 'rgba(255,255,255,0.05)',
                    border: form.goal === key 
                      ? 'none'
                      : '1px solid rgba(255,255,255,0.1)',
                    borderRadius: '12px',
                    color: '#fff',
                    cursor: 'pointer',
                    transition: 'all 0.3s ease',
                    display: 'flex',
                    flexDirection: 'column',
                    alignItems: 'center',
                    gap: '8px'
                  }}
                >
                  <Icon size={24} />
                  <span style={{
                    fontSize: '13px',
                    letterSpacing: '2px',
                    fontWeight: '600'
                  }}>{label}</span>
                </button>
              ))}
            </div>
          </div>

          {/* Submit Button */}
          <button
            type="submit"
            style={{
              width: '100%',
              padding: '20px',
              background: 'linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%)', // Blue Gradient
              boxShadow: '0 20px 40px rgba(37, 99, 235, 0.3)', // Blue Shadow
              border: 'none',
              borderRadius: '12px',
              color: '#fff',
              fontSize: '18px',
              fontWeight: '700',
              letterSpacing: '4px',
              cursor: 'pointer',
              display: 'flex',
              alignItems: 'center',
              justifyContent: 'center',
              gap: '12px',
              transition: 'transform 0.2s ease'
            }}
          >
            START TRAINING
            <ChevronRight size={24} />
          </button>
        </form>
      </div>

      <style>{`
        input::placeholder { color: rgba(255,255,255,0.3); }
        /* Changed focus border to blue */
        input:focus { border-color: #2563eb !important; background: rgba(37, 99, 235, 0.1) !important; }
        button:hover { transform: translateY(-2px); }
        input[type=number]::-webkit-inner-spin-button,
        input[type=number]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
        input[type=number] { -moz-appearance: textfield; }
        
        /* NUCLEAR NO-SCROLL FIX */
        html, body {
          margin: 0;
          padding: 0;
          width: 100%;
          height: 100%;
          overflow: hidden !important;
          position: fixed;
          touch-action: none; /* Disables all browser-level scrolling/gestures */
        }

        #root {
          width: 100%;
          height: 100%;
          overflow-y: auto;
          -webkit-overflow-scrolling: touch;
          overscroll-behavior-y: none;
        }
      `}</style>
    </div>
  );
}