'use client';

import { useState, useEffect } from 'react';
import { useRouter } from 'next/navigation';

export default function Page4() {
  const router = useRouter();
  const [providers, setProviders] = useState(['']);
  const [medications, setMedications] = useState(['']);
  const [multiState, setMultiState] = useState<boolean | null>(null);
  const [expectedUsage, setExpectedUsage] = useState<'low' | 'medium' | 'high'>('medium');

  // Load saved data on mount
  useEffect(() => {
    const savedData = localStorage.getItem('page4Data');
    if (savedData) {
      try {
        const parsed = JSON.parse(savedData);
        if (parsed.providers) setProviders(parsed.providers);
        if (parsed.medications) setMedications(parsed.medications);
        if (parsed.multiState !== undefined) setMultiState(parsed.multiState);
        if (parsed.expectedUsage) setExpectedUsage(parsed.expectedUsage);
      } catch (e) {
        console.error('Error parsing page4 data:', e);
      }
    }
  }, []);

  const addProvider = () => setProviders([...providers, '']);
  const removeProvider = (i: number) => providers.length > 1 && setProviders(providers.filter((_, idx) => idx !== i));
  const updateProvider = (i: number, v: string) => {
    const p = [...providers]; p[i] = v; setProviders(p);
  };

  const addMed = () => setMedications([...medications, '']);
  const removeMed = (i: number) => medications.length > 1 && setMedications(medications.filter((_, idx) => idx !== i));
  const updateMed = (i: number, v: string) => {
    const m = [...medications]; m[i] = v; setMedications(m);
  };

  const handleSubmit = (e: React.FormEvent) => {
    e.preventDefault();
    // Save to localStorage
    const page4Data = {
      providers: providers.filter(p => p.trim() !== ''),
      medications: medications.filter(m => m.trim() !== ''),
      multiState: multiState ?? false,
      expectedUsage
    };
    localStorage.setItem('page4Data', JSON.stringify(page4Data));
    router.push('/page5');
  };

  const goBack = () => router.push('/page3');
  const goHome = () => router.push('/');

  return (
    <div className="min-h-screen bg-gradient-to-br from-sky-50 via-white to-blue-50">
      <nav className="sticky top-0 bg-white/80 backdrop-blur-md border-b border-white/50 z-50">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 h-20 flex items-center justify-between">
          <div className="flex items-center gap-3 cursor-pointer" onClick={goHome}>
            <div className="w-10 h-10 bg-gradient-to-br from-sky-500 to-blue-600 rounded-xl flex items-center justify-center shadow-lg">
              <svg className="w-6 h-6 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
                <path strokeLinecap="round" strokeLinejoin="round" d="M9 12.75L11.25 15 15 9.75m-3-7.036A11.959 11.959 0 013.598 6 11.99 11.99 0 003 9.749c0 5.592 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.31-.21-2.571-.598-3.751h-.152c-3.196 0-6.1-1.248-8.25-3.285z" />
              </svg>
            </div>
            <span className="text-xl font-bold text-gray-900">USA Health Insurance</span>
          </div>
          <span className="hidden md:block text-sm text-gray-600">Questions? Call: <span className="font-semibold text-sky-600">1-800-555-0123</span></span>
        </div>
      </nav>

      <main className="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
        <div className="bg-white/80 backdrop-blur-md rounded-2xl border border-white/50 shadow-lg p-8">
          <div className="text-center mb-8">
            <div className="w-16 h-16 bg-gradient-to-br from-sky-500 to-blue-600 rounded-2xl flex items-center justify-center mx-auto mb-4 shadow-lg">
              <svg className="w-8 h-8 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
                <path strokeLinecap="round" strokeLinejoin="round" d="M4.5 12.75l6 6 9-13.5" />
              </svg>
            </div>
            <h1 className="text-3xl font-bold text-gray-900 mb-2">Doctors & Medications</h1>
            <p className="text-gray-600">Tell us about your healthcare needs.</p>
          </div>

          <form onSubmit={handleSubmit} className="space-y-8">
            {/* Multi-State Question */}
            <div className="bg-white rounded-xl border border-gray-200 p-6 shadow-sm">
              <h3 className="font-semibold text-gray-900 mb-4">Do you spend 3+ months per year in a different state?</h3>
              <div className="flex gap-4 mb-3">
                <button
                  type="button"
                  onClick={() => setMultiState(true)}
                  className={`flex-1 py-3 px-4 rounded-xl font-medium transition-all ${
                    multiState === true
                      ? 'bg-sky-600 text-white shadow-md'
                      : 'bg-gray-100 text-gray-700 hover:bg-gray-200'
                  }`}
                >
                  Yes
                </button>
                <button
                  type="button"
                  onClick={() => setMultiState(false)}
                  className={`flex-1 py-3 px-4 rounded-xl font-medium transition-all ${
                    multiState === false
                      ? 'bg-sky-600 text-white shadow-md'
                      : 'bg-gray-100 text-gray-700 hover:bg-gray-200'
                  }`}
                >
                  No
                </button>
              </div>
              <p className="text-sm text-gray-500">
                This helps us recommend plans with national coverage if needed.
              </p>
            </div>

            {/* Expected Usage */}
            <div className="bg-white rounded-xl border border-gray-200 p-6 shadow-sm">
              <h3 className="font-semibold text-gray-900 mb-4">How much healthcare do you expect to use?</h3>
              <div className="grid grid-cols-3 gap-3">
                <button
                  type="button"
                  onClick={() => setExpectedUsage('low')}
                  className={`py-3 px-4 rounded-xl font-medium transition-all text-center ${
                    expectedUsage === 'low'
                      ? 'bg-sky-600 text-white shadow-md'
                      : 'bg-gray-100 text-gray-700 hover:bg-gray-200'
                  }`}
                >
                  <div className="text-lg mb-1">Low</div>
                  <div className="text-xs opacity-80">~$500/yr</div>
                </button>
                <button
                  type="button"
                  onClick={() => setExpectedUsage('medium')}
                  className={`py-3 px-4 rounded-xl font-medium transition-all text-center ${
                    expectedUsage === 'medium'
                      ? 'bg-sky-600 text-white shadow-md'
                      : 'bg-gray-100 text-gray-700 hover:bg-gray-200'
                  }`}
                >
                  <div className="text-lg mb-1">Medium</div>
                  <div className="text-xs opacity-80">~$2,500/yr</div>
                </button>
                <button
                  type="button"
                  onClick={() => setExpectedUsage('high')}
                  className={`py-3 px-4 rounded-xl font-medium transition-all text-center ${
                    expectedUsage === 'high'
                      ? 'bg-sky-600 text-white shadow-md'
                      : 'bg-gray-100 text-gray-700 hover:bg-gray-200'
                  }`}
                >
                  <div className="text-lg mb-1">High</div>
                  <div className="text-xs opacity-80">Max out-of-pocket</div>
                </button>
              </div>
            </div>

            {/* Providers Section */}
            <div className="bg-white rounded-xl border border-gray-200 p-6 shadow-sm">
              <h3 className="font-semibold text-gray-900 mb-4">Preferred Doctors</h3>
              <div className="space-y-3">
                {providers.map((p, i) => (
                  <div key={i} className="flex gap-2">
                    <input 
                      type="text" 
                      placeholder="Doctor name"
                      className="flex-1 px-4 py-3 border-2 border-gray-200 rounded-xl focus:border-sky-500 focus:outline-none"
                      value={p}
                      onChange={(e) => updateProvider(i, e.target.value)}
                    />
                    {providers.length > 1 && (
                      <button type="button" onClick={() => removeProvider(i)} className="px-3 text-red-500 hover:bg-red-50 rounded-lg">×</button>
                    )}
                  </div>
                ))}
              </div>
              <button type="button" onClick={addProvider} className="mt-3 text-sky-600 font-medium hover:text-sky-700">+ Add another doctor</button>
            </div>

            {/* Medications Section */}
            <div className="bg-white rounded-xl border border-gray-200 p-6 shadow-sm">
              <h3 className="font-semibold text-gray-900 mb-4">Current Medications</h3>
              <div className="space-y-3">
                {medications.map((m, i) => (
                  <div key={i} className="flex gap-2">
                    <input 
                      type="text" 
                      placeholder="Medication name"
                      className="flex-1 px-4 py-3 border-2 border-gray-200 rounded-xl focus:border-sky-500 focus:outline-none"
                      value={m}
                      onChange={(e) => updateMed(i, e.target.value)}
                    />
                    {medications.length > 1 && (
                      <button type="button" onClick={() => removeMed(i)} className="px-3 text-red-500 hover:bg-red-50 rounded-lg">×</button>
                    )}
                  </div>
                ))}
              </div>
              <button type="button" onClick={addMed} className="mt-3 text-sky-600 font-medium hover:text-sky-700">+ Add another medication</button>
            </div>

            <div className="flex gap-4 pt-4">
              <button type="button" onClick={goBack} className="flex-1 py-4 bg-white border-2 border-gray-200 text-gray-700 font-semibold rounded-xl hover:border-sky-300 transition-colors">← Back</button>
              <button type="submit" className="flex-1 py-4 bg-gradient-to-b from-sky-500 to-sky-600 text-white font-semibold rounded-xl shadow-lg hover:from-sky-400 hover:to-sky-500 transition-all">Get My Quotes →</button>
            </div>
          </form>
        </div>
      </main>
    </div>
  );
}