import { useState } from 'react';
import { 
  Users, 
  Home, 
  BarChart2, 
  Settings, 
  Search, 
  Globe, 
  LogOut,
  ChevronDown,
  Plus,
  Save,
  X,
  Camera
} from 'lucide-react';

// Add new CensusForm component
function CensusForm({ onClose }) {
  const [formData, setFormData] = useState({
    householdId: '',
    zone: '',
    kebele: '',
    houseNumber: '',
    gpsLocation: '',
    householdHead: {
      firstName: '',
      lastName: '',
      gender: '',
      dateOfBirth: '',
      nationalId: '',
      phoneNumber: '',
      occupation: '',
      educationLevel: ''
    },
    familyMembers: [],
    housingInfo: {
      ownershipStatus: '',
      constructionMaterial: '',
      numberOfRooms: '',
      waterSource: '',
      electricityAccess: '',
      toiletType: ''
    }
  });

  const handleSubmit = (e) => {
    e.preventDefault();
    // Handle form submission
    console.log('Form submitted:', formData);
  };

  return (
    <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
      <div className="bg-white rounded-xl w-full max-w-4xl max-h-[90vh] overflow-y-auto p-6">
        <div className="flex justify-between items-center mb-6">
          <h2 className="text-2xl font-bold text-gray-800">New Census Record</h2>
          <button onClick={onClose} className="p-2 hover:bg-gray-100 rounded-full">
            <X size={24} />
          </button>
        </div>

        <form onSubmit={handleSubmit} className="space-y-8">
          {/* Location Information */}
          <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
            <div>
              <label className="block text-sm font-medium text-gray-700 mb-2">
                Zone
              </label>
              <select 
                className="w-full p-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500"
                value={formData.zone}
                onChange={(e) => setFormData({...formData, zone: e.target.value})}
              >
                <option value="">Select Zone</option>
                <option value="zone1">Zone 1</option>
                <option value="zone2">Zone 2</option>
                <option value="zone3">Zone 3</option>
              </select>
            </div>

            <div>
              <label className="block text-sm font-medium text-gray-700 mb-2">
                Kebele
              </label>
              <input
                type="text"
                className="w-full p-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500"
                value={formData.kebele}
                onChange={(e) => setFormData({...formData, kebele: e.target.value})}
              />
            </div>

            <div>
              <label className="block text-sm font-medium text-gray-700 mb-2">
                House Number
              </label>
              <input
                type="text"
                className="w-full p-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500"
                value={formData.houseNumber}
                onChange={(e) => setFormData({...formData, houseNumber: e.target.value})}
              />
            </div>

            <div>
              <label className="block text-sm font-medium text-gray-700 mb-2">
                GPS Location
              </label>
              <div className="flex gap-2">
                <input
                  type="text"
                  className="flex-1 p-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500"
                  value={formData.gpsLocation}
                  onChange={(e) => setFormData({...formData, gpsLocation: e.target.value})}
                />
                <button 
                  type="button"
                  className="px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700"
                >
                  Get Location
                </button>
              </div>
            </div>
          </div>

          {/* Household Head Information */}
          <div>
            <h3 className="text-lg font-semibold text-gray-800 mb-4">Household Head Information</h3>
            <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
              <div>
                <label className="block text-sm font-medium text-gray-700 mb-2">
                  First Name
                </label>
                <input
                  type="text"
                  className="w-full p-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500"
                  value={formData.householdHead.firstName}
                  onChange={(e) => setFormData({
                    ...formData,
                    householdHead: {...formData.householdHead, firstName: e.target.value}
                  })}
                />
              </div>

              <div>
                <label className="block text-sm font-medium text-gray-700 mb-2">
                  Last Name
                </label>
                <input
                  type="text"
                  className="w-full p-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500"
                  value={formData.householdHead.lastName}
                  onChange={(e) => setFormData({
                    ...formData,
                    householdHead: {...formData.householdHead, lastName: e.target.value}
                  })}
                />
              </div>

              <div>
                <label className="block text-sm font-medium text-gray-700 mb-2">
                  Gender
                </label>
                <select 
                  className="w-full p-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500"
                  value={formData.householdHead.gender}
                  onChange={(e) => setFormData({
                    ...formData,
                    householdHead: {...formData.householdHead, gender: e.target.value}
                  })}
                >
                  <option value="">Select Gender</option>
                  <option value="male">Male</option>
                  <option value="female">Female</option>
                  <option value="other">Other</option>
                </select>
              </div>

              <div>
                <label className="block text-sm font-medium text-gray-700 mb-2">
                  Date of Birth
                </label>
                <input
                  type="date"
                  className="w-full p-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500"
                  value={formData.householdHead.dateOfBirth}
                  onChange={(e) => setFormData({
                    ...formData,
                    householdHead: {...formData.householdHead, dateOfBirth: e.target.value}
                  })}
                />
              </div>
            </div>
          </div>

          {/* Housing Information */}
          <div>
            <h3 className="text-lg font-semibold text-gray-800 mb-4">Housing Information</h3>
            <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
              <div>
                <label className="block text-sm font-medium text-gray-700 mb-2">
                  Ownership Status
                </label>
                <select 
                  className="w-full p-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500"
                  value={formData.housingInfo.ownershipStatus}
                  onChange={(e) => setFormData({
                    ...formData,
                    housingInfo: {...formData.housingInfo, ownershipStatus: e.target.value}
                  })}
                >
                  <option value="">Select Status</option>
                  <option value="owned">Owned</option>
                  <option value="rented">Rented</option>
                  <option value="other">Other</option>
                </select>
              </div>

              <div>
                <label className="block text-sm font-medium text-gray-700 mb-2">
                  Number of Rooms
                </label>
                <input
                  type="number"
                  className="w-full p-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500"
                  value={formData.housingInfo.numberOfRooms}
                  onChange={(e) => setFormData({
                    ...formData,
                    housingInfo: {...formData.housingInfo, numberOfRooms: e.target.value}
                  })}
                />
              </div>

              <div>
                <label className="block text-sm font-medium text-gray-700 mb-2">
                  Water Source
                </label>
                <select 
                  className="w-full p-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500"
                  value={formData.housingInfo.waterSource}
                  onChange={(e) => setFormData({
                    ...formData,
                    housingInfo: {...formData.housingInfo, waterSource: e.target.value}
                  })}
                >
                  <option value="">Select Water Source</option>
                  <option value="tap">Tap Water</option>
                  <option value="well">Well</option>
                  <option value="river">River</option>
                  <option value="other">Other</option>
                </select>
              </div>

              <div>
                <label className="block text-sm font-medium text-gray-700 mb-2">
                  Electricity Access
                </label>
                <select 
                  className="w-full p-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500"
                  value={formData.housingInfo.electricityAccess}
                  onChange={(e) => setFormData({
                    ...formData,
                    housingInfo: {...formData.housingInfo, electricityAccess: e.target.value}
                  })}
                >
                  <option value="">Select Access Type</option>
                  <option value="grid">Grid Connected</option>
                  <option value="solar">Solar Power</option>
                  <option value="none">No Access</option>
                </select>
              </div>
            </div>
          </div>

          {/* Photo Upload */}
          <div className="border-2 border-dashed border-gray-300 rounded-lg p-6 text-center">
            <div className="flex flex-col items-center">
              <Camera size={48} className="text-gray-400 mb-2" />
              <p className="text-sm text-gray-500">Upload household photo</p>
              <input type="file" accept="image/*" className="hidden" id="photo-upload" />
              <label 
                htmlFor="photo-upload" 
                className="mt-2 px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 cursor-pointer"
              >
                Select Photo
              </label>
            </div>
          </div>

          {/* Form Actions */}
          <div className="flex justify-end space-x-4">
            <button
              type="button"
              onClick={onClose}
              className="px-6 py-2 border border-gray-300 rounded-lg hover:bg-gray-50"
            >
              Cancel
            </button>
            <button
              type="submit"
              className="px-6 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 flex items-center space-x-2"
            >
              <Save size={20} />
              <span>Save Record</span>
            </button>
          </div>
        </form>
      </div>
    </div>
  );
}

// Update the main dashboard component to include the form
export default function CensusDashboard() {
  const [selectedLanguage, setSelectedLanguage] = useState('en');
  const [searchQuery, setSearchQuery] = useState('');
  const [showForm, setShowForm] = useState(false);

  const translations = {
    en: {
      dashboard: "Dashboard",
      search: "Search records...",
      totalPopulation: "Total Population",
      householdCount: "Household Count",
      pendingApprovals: "Pending Approvals",
      recentActivity: "Recent Activity",
      addNew: "Add New Record",
      demographics: "Demographics",
      settings: "Settings",
      logout: "Logout"
    },
    am: {
      dashboard: "ዳሽቦርድ",
      search: "መዝገቦችን ፈልግ...",
      totalPopulation: "ጠቅላላ ሕዝብ",
      householdCount: "የቤተሰብ ብዛት",
      pendingApprovals: "በመጠባበቅ ላይ ያሉ ማጽደቆች",
      recentActivity: "የቅርብ ጊዜ እንቅስቃሴ",
      addNew: "አዲስ መዝገብ ጨምር",
      demographics: "ዲሞግራፊክስ",
      settings: "ቅንብሮች",
      logout: "ውጣ"
    },
    or: {
      dashboard: "Daashboordii",
      search: "Galmee barbaadi...",
      totalPopulation: "Ummata Waliigalaa",
      householdCount: "Baay'ina Maatii",
      pendingApprovals: "Hayyama Eeggataa",
      recentActivity: "Gochaalee Dhiyoo",
      addNew: "Galmee Haaraa Ida'i",
      demographics: "Demograafiksii",
      settings: "Qindaa'ina",
      logout: "Ba'i"
    }
  };

  const t = translations[selectedLanguage];

  return (
    <div className="min-h-screen bg-gray-50">
      {/* Sidebar */}
      <div className="fixed left-0 top-0 h-full w-64 bg-white shadow-lg">
        <div className="p-6">
          <h1 className="text-2xl font-bold text-blue-600">Bale Robe Census</h1>
        </div>
        
        <nav className="mt-6">
          <div className="px-4 space-y-2">
            <button className="flex items-center space-x-3 w-full p-3 rounded-lg bg-blue-50 text-blue-600">
              <Home size={20} />
              <span>{t.dashboard}</span>
            </button>
            
            <button className="flex items-center space-x-3 w-full p-3 rounded-lg text-gray-600 hover:bg-gray-50">
              <Users size={20} />
              <span>{t.demographics}</span>
            </button>
            
            <button className="flex items-center space-x-3 w-full p-3 rounded-lg text-gray-600 hover:bg-gray-50">
              <BarChart2 size={20} />
              <span>Analytics</span>
            </button>
            
            <button className="flex items-center space-x-3 w-full p-3 rounded-lg text-gray-600 hover:bg-gray-50">
              <Settings size={20} />
              <span>{t.settings}</span>
            </button>
          </div>
        </nav>

        <div className="absolute bottom-0 left-0 right-0 p-4">
          <button className="flex items-center space-x-3 w-full p-3 rounded-lg text-red-600 hover:bg-red-50">
            <LogOut size={20} />
            <span>{t.logout}</span>
          </button>
        </div>
      </div>

      {/* Main Content */}
      <div className="ml-64 p-8">
        {/* Top Bar */}
        <div className="flex justify-between items-center mb-8">
          <div className="relative w-96">
            <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400" size={20} />
            <input
              type="text"
              placeholder={t.search}
              className="w-full pl-12 pr-4 py-2 rounded-lg border border-gray-200 focus:outline-none focus:ring-2 focus:ring-blue-500"
              value={searchQuery}
              onChange={(e) => setSearchQuery(e.target.value)}
            />
          </div>
          
          <div className="flex items-center space-x-4">
            <div className="relative">
              <button className="flex items-center space-x-2 px-4 py-2 rounded-lg border border-gray-200 hover:bg-gray-50">
                <Globe size={20} />
                <span>{selectedLanguage.toUpperCase()}</span>
                <ChevronDown size={16} />
              </button>
            </div>
          </div>
        </div>

        {/* Stats Cards */}
        <div className="grid grid-cols-1 md:grid-cols-3 gap-6 mb-8">
          <div className="bg-white p-6 rounded-xl shadow-sm border border-gray-100">
            <h3 className="text-gray-500 text-sm mb-2">{t.totalPopulation}</h3>
            <p className="text-3xl font-bold">127,842</p>
            <span className="text-green-500 text-sm">+2.4% from last month</span>
          </div>
          
          <div className="bg-white p-6 rounded-xl shadow-sm border border-gray-100">
            <h3 className="text-gray-500 text-sm mb-2">{t.householdCount}</h3>
            <p className="text-3xl font-bold">31,960</p>
            <span className="text-green-500 text-sm">+1.8% from last month</span>
          </div>
          
          <div className="bg-white p-6 rounded-xl shadow-sm border border-gray-100">
            <h3 className="text-gray-500 text-sm mb-2">{t.pendingApprovals}</h3>
            <p className="text-3xl font-bold">284</p>
            <span className="text-orange-500 text-sm">Requires attention</span>
          </div>
        </div>

        {/* Recent Activity & Add New Record */}
        <div className="flex justify-between items-center mb-6">
          <h2 className="text-xl font-semibold">{t.recentActivity}</h2>
          <button 
            onClick={() => setShowForm(true)}
            className="flex items-center space-x-2 px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700"
          >
            <Plus size={20} />
            <span>{t.addNew}</span>
          </button>
        </div>

        {/* Activity Table */}
        <div className="bg-white rounded-xl shadow-sm border border-gray-100 overflow-hidden">
          <table className="w-full">
            <thead className="bg-gray-50">
              <tr>
                <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">ID</th>
                <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">Name</th>
                <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">Location</th>
                <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">Status</th>
                <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">Date</th>
              </tr>
            </thead>
            <tbody className="divide-y divide-gray-200">
              {[1, 2, 3, 4, 5].map((item) => (
                <tr key={item} className="hover:bg-gray-50">
                  <td className="px-6 py-4 text-sm text-gray-900">#{String(item).padStart(4, '0')}</td>
                  <td className="px-6 py-4 text-sm text-gray-900">John Doe</td>
                  <td className="px-6 py-4 text-sm text-gray-900">Bale Robe, Zone 1</td>
                  <td className="px-6 py-4">
                    <span className="px-2 py-1 text-xs font-medium rounded-full bg-green-100 text-green-800">
                      Approved
                    </span>
                  </td>
                  <td className="px-6 py-4 text-sm text-gray-900">2024-01-20</td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>
        
        {/* Census Form Modal */}
        {showForm && <CensusForm onClose={() => setShowForm(false)} />}
      </div>
    </div>
  );
}