import React, { useState, useEffect } from 'react';
import { useNavigate } from 'react-router-dom';
import { Button } from './ui/button.js';

function SignUp() {
  const navigate = useNavigate();

  const [username, setUsername] = useState('');
  const [password, setPassword] = useState('');
  const [firstname, setFirstname] = useState('');
  const [lastname, setLastname] = useState('');
  const [email, setEmail] = useState('');
  const [zipcode, setZipcode] = useState('');
  const [state, setState] = useState('');
  const [area, setArea] = useState('');
  const [areas, setAreas] = useState([]);
  const [error, setError] = useState('');

  const states = [
    { name: 'Alabama', code: 'AL' }, { name: 'Alaska', code: 'AK' }, { name: 'Arizona', code: 'AZ' },
    { name: 'Arkansas', code: 'AR' }, { name: 'California', code: 'CA' }, { name: 'Colorado', code: 'CO' },
    { name: 'Connecticut', code: 'CT' }, { name: 'Delaware', code: 'DE' }, { name: 'District of Columbia', code: 'DC' },
    { name: 'Florida', code: 'FL' }, { name: 'Georgia', code: 'GA' }, { name: 'Hawaii', code: 'HI' },
    { name: 'Idaho', code: 'ID' }, { name: 'Illinois', code: 'IL' }, { name: 'Indiana', code: 'IN' },
    { name: 'Iowa', code: 'IA' }, { name: 'Kansas', code: 'KS' }, { name: 'Kentucky', code: 'KY' },
    { name: 'Louisiana', code: 'LA' }, { name: 'Maine', code: 'ME' }, { name: 'Maryland', code: 'MD' },
    { name: 'Massachusetts', code: 'MA' }, { name: 'Michigan', code: 'MI' }, { name: 'Minnesota', code: 'MN' },
    { name: 'Mississippi', code: 'MS' }, { name: 'Missouri', code: 'MO' }, { name: 'Montana', code: 'MT' },
    { name: 'Nebraska', code: 'NE' }, { name: 'Nevada', code: 'NV' }, { name: 'New Hampshire', code: 'NH' },
    { name: 'New Jersey', code: 'NJ' }, { name: 'New Mexico', code: 'NM' }, { name: 'New York', code: 'NY' },
    { name: 'North Carolina', code: 'NC' }, { name: 'North Dakota', code: 'ND' }, { name: 'Ohio', code: 'OH' },
    { name: 'Oklahoma', code: 'OK' }, { name: 'Oregon', code: 'OR' }, { name: 'Pennsylvania', code: 'PA' },
    { name: 'Rhode Island', code: 'RI' }, { name: 'South Carolina', code: 'SC' }, { name: 'South Dakota', code: 'SD' },
    { name: 'Tennessee', code: 'TN' }, { name: 'Texas', code: 'TX' }, { name: 'Utah', code: 'UT' },
    { name: 'Vermont', code: 'VT' }, { name: 'Virginia', code: 'VA' }, { name: 'Washington', code: 'WA' },
    { name: 'West Virginia', code: 'WV' }, { name: 'Wisconsin', code: 'WI' }, { name: 'Wyoming', code: 'WY' },
  ];

  useEffect(() => {
    const fetchAreas = async () => {
      if (!state) {
        setAreas([]);
        return;
      }
      try {
        const res = await fetch(`/api/areas?state=${state}`);
        const data = await res.json();
        setAreas(data.areas || []);
      } catch (err) {
        console.error('Error fetching areas:', err);
        setAreas([]);
      }
    };

    fetchAreas();
  }, [state]);

  const handleSignUp = async (e) => {
    e.preventDefault();
    setError('');

    const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]{2,}$/;
    const zipRegex = /^\d{5}$/;
    const passwordRegex = /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[!@#$%^&*]).{8,}$/;

    if (!username || !password || !firstname || !lastname || !email || !zipcode || !state || !area) {
      setError('All fields are required.');
      return;
    }
    if (!emailRegex.test(email)) {
      setError('Enter a valid email address.');
      return;
    }
    if (!zipRegex.test(zipcode)) {
      setError('ZIP code must be exactly 5 digits.');
      return;
    }
    if (!passwordRegex.test(password)) {
      setError('Password must include at least 8 characters, one uppercase, one lowercase, one number, and one special character.');
      return;
    }

    try {
      const response = await fetch('/api/register', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({
          userId: Math.floor(Math.random() * 1000000000),
          username, password, firstname, lastname, email, zipcode, state, area,
        }),
      });

      const data = await response.json();

      if (!response.ok) {
        setError(data.error || 'Registration failed. Please try again.');
        return;
      }

      navigate('/getting-started');
    } catch (err) {
      console.error(err);
      setError('An unexpected error occurred. Please try again later.');
    }
  };

  return (
    <div className="flex min-h-screen items-center justify-center bg-gray-100 p-4">
      <div className="w-full max-w-md bg-white p-6 rounded-lg shadow-lg">
        <h2 className="mb-4 text-2xl font-semibold text-center">Sign Up</h2>

        {error && (
          <div className="mb-4 p-2 text-sm text-red-600 bg-red-100 rounded">
            {error}
          </div>
        )}

        <form onSubmit={handleSignUp} className="space-y-3">
          <input className="w-full px-3 py-2 border border-gray-300 rounded-md" placeholder="Username" value={username} onChange={(e) => setUsername(e.target.value)} />
          <input className="w-full px-3 py-2 border border-gray-300 rounded-md" placeholder="Password" type="password" value={password} onChange={(e) => setPassword(e.target.value)} />
          <input className="w-full px-3 py-2 border border-gray-300 rounded-md" placeholder="First Name" value={firstname} onChange={(e) => setFirstname(e.target.value)} />
          <input className="w-full px-3 py-2 border border-gray-300 rounded-md" placeholder="Last Name" value={lastname} onChange={(e) => setLastname(e.target.value)} />
          <input className="w-full px-3 py-2 border border-gray-300 rounded-md" placeholder="Email" value={email} onChange={(e) => setEmail(e.target.value)} />
          <input className="w-full px-3 py-2 border border-gray-300 rounded-md" placeholder="Zip Code" value={zipcode} onChange={(e) => setZipcode(e.target.value)} />

          <select className="w-full px-3 py-2 border border-gray-300 rounded-md" value={state} onChange={(e) => setState(e.target.value)}>
            <option value="">Select State</option>
            {states.map((s) => <option key={s.code} value={s.code}>{s.name}</option>)}
          </select>

          <select className="w-full px-3 py-2 border border-gray-300 rounded-md" value={area} onChange={(e) => setArea(e.target.value)}>
            <option value="">Select Area</option>
            {areas.map((a, i) => <option key={i} value={a}>{a}</option>)}
          </select>

          <Button type="submit" className="w-full">
            Sign Up
          </Button>
        </form>
      </div>
    </div>
  );
}

export default SignUp;