'use client';

import React, { useState, useEffect } from 'react';
import { getMembers } from '@/lib/actions/members';
import { getCountries, getStates, getCities, getAreas } from '@/lib/actions/geography';
import { getCurrentAdmin } from '@/lib/actions/auth';
import { exportMembersCSV } from '@/lib/actions/import-export';
import Link from 'next/link';
import { Button } from '@/components/ui/Button';
import { Input } from '@/components/ui/Input';
import { Card } from '@/components/ui/Card';

export default function MembersDirectoryPage() {
  const [members, setMembers] = useState<any[]>([]);
  const [countries, setCountries] = useState<any[]>([]);
  const [states, setStates] = useState<any[]>([]);
  const [cities, setCities] = useState<any[]>([]);
  const [areas, setAreas] = useState<any[]>([]);

  // Search & Filter state
  const [search, setSearch] = useState('');
  const [selectedCountry, setSelectedCountry] = useState('');
  const [selectedState, setSelectedState] = useState('');
  const [selectedCity, setSelectedCity] = useState('');
  const [selectedArea, setSelectedArea] = useState('');
  const [selectedStatus, setSelectedStatus] = useState('');
  const [showArchived, setShowArchived] = useState(false);

  // Pagination state
  const [page, setPage] = useState(1);
  const [totalPages, setTotalPages] = useState(1);
  const [totalItems, setTotalItems] = useState(0);

  // Loading state
  const [isLoading, setIsLoading] = useState(true);
  const [currentUser, setCurrentUser] = useState<any | null>(null);
  const [isExporting, setIsExporting] = useState(false);

  useEffect(() => {
    async function loadUserAndGeos() {
      const u = await getCurrentAdmin();
      setCurrentUser(u);
      await loadGeographies();
    }
    loadUserAndGeos();
  }, []);

  useEffect(() => {
    loadMembersList();
  }, [search, selectedCountry, selectedState, selectedCity, selectedArea, selectedStatus, showArchived, page]);

  const handleExportCSV = async () => {
    setIsExporting(true);
    try {
      const csvContent = await exportMembersCSV(selectedCity || undefined);
      const blob = new Blob([csvContent], { type: 'text/csv;charset=utf-8;' });
      const url = URL.createObjectURL(blob);
      const link = document.createElement('a');
      link.setAttribute('href', url);
      link.setAttribute('download', `members_export_${new Date().toISOString().split('T')[0]}.csv`);
      link.style.visibility = 'hidden';
      document.body.appendChild(link);
      link.click();
      document.body.removeChild(link);
    } catch (err: any) {
      alert(err.message || 'Export failed.');
    } finally {
      setIsExporting(false);
    }
  };

  const loadGeographies = async () => {
    const co = await getCountries();
    setCountries(co);
  };

  const handleCountryChange = async (cId: string) => {
    setSelectedCountry(cId);
    setSelectedState('');
    setSelectedCity('');
    setSelectedArea('');
    setStates([]);
    setCities([]);
    setAreas([]);
    if (cId) {
      const list = await getStates(cId);
      setStates(list);
    }
  };

  const handleStateChange = async (sId: string) => {
    setSelectedState(sId);
    setSelectedCity('');
    setSelectedArea('');
    setCities([]);
    setAreas([]);
    if (sId) {
      const list = await getCities(sId);
      setCities(list);
    }
  };

  const handleCityChange = async (cityId: string) => {
    setSelectedCity(cityId);
    setSelectedArea('');
    setAreas([]);
    if (cityId) {
      const list = await getAreas(cityId);
      setAreas(list);
    }
  };

  const loadMembersList = async () => {
    setIsLoading(true);
    try {
      const filters = {
        search: search.trim() !== '' ? search : undefined,
        countryId: selectedCountry || undefined,
        stateId: selectedState || undefined,
        cityId: selectedCity || undefined,
        areaId: selectedArea || undefined,
        status: selectedStatus || undefined,
        isActive: !showArchived
      };

      const result = await getMembers(filters, page, 10);
      setMembers(result.items);
      setTotalPages(result.pagination.pages);
      setTotalItems(result.pagination.total);
    } catch (error) {
      console.error('Error fetching members:', error);
    } finally {
      setIsLoading(false);
    }
  };

  return (
    <div className="space-y-6">
      <div className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">
        <div>
          <h1 className="text-2xl md:text-3xl font-bold text-gray-900 font-sans">Members Directory</h1>
          <p className="mt-1 text-sm text-gray-500">Search and filter parivar member profiles in your active scopes.</p>
        </div>
        <div className="flex flex-col sm:flex-row gap-2 w-full sm:w-auto">
          {currentUser && currentUser.role !== 'AREA_INCHARGE' && (
            <Button
              onClick={handleExportCSV}
              isLoading={isExporting}
              variant="secondary"
              className="border-brand-primary text-brand-primary w-full sm:w-auto"
            >
              📥 Export CSV
            </Button>
          )}
          <Link href="/members/add" className="w-full sm:w-auto">
            <Button className="bg-brand-primary text-white w-full">
              + Register New Member
            </Button>
          </Link>
        </div>
      </div>

      {/* Directory layout with Filter sidebar and Result list */}
      <div className="grid grid-cols-1 lg:grid-cols-4 gap-6">
        {/* Left Filters Panel */}
        <Card className="p-6 h-fit space-y-4 lg:col-span-1">
          <h3 className="text-sm font-bold text-gray-900 uppercase tracking-wider border-b border-gray-150 pb-2">
            Filter Directory
          </h3>

          <div className="space-y-3">
            <div>
              <label className="block text-xs font-bold text-gray-500 mb-1">Search Keywords</label>
              <Input
                type="text"
                placeholder="ID, Name, Mobile..."
                value={search}
                onChange={(e) => { setSearch(e.target.value); setPage(1); }}
                className="w-full text-sm"
              />
            </div>

            <div>
              <label className="block text-xs font-bold text-gray-500 mb-1">Status Type</label>
              <select
                value={selectedStatus}
                onChange={(e) => { setSelectedStatus(e.target.value); setPage(1); }}
                className="w-full rounded-lg border border-gray-250 p-2 bg-white text-xs"
              >
                <option value="">All Statuses</option>
                <option value="Visitor">Visitor</option>
                <option value="Regular Attendee">Regular Attendee</option>
                <option value="Member">Member</option>
                <option value="Inactive">Inactive</option>
              </select>
            </div>

            <div>
              <label className="block text-xs font-bold text-gray-500 mb-1">Country</label>
              <select
                value={selectedCountry}
                onChange={(e) => handleCountryChange(e.target.value)}
                className="w-full rounded-lg border border-gray-250 p-2 bg-white text-xs"
              >
                <option value="">All Countries</option>
                {countries.map(c => <option key={c._id} value={c._id}>{c.name}</option>)}
              </select>
            </div>

            <div>
              <label className="block text-xs font-bold text-gray-500 mb-1">State</label>
              <select
                value={selectedState}
                onChange={(e) => handleStateChange(e.target.value)}
                className="w-full rounded-lg border border-gray-250 p-2 bg-white text-xs"
                disabled={!selectedCountry}
              >
                <option value="">All States</option>
                {states.map(s => <option key={s._id} value={s._id}>{s.name}</option>)}
              </select>
            </div>

            <div>
              <label className="block text-xs font-bold text-gray-500 mb-1">City</label>
              <select
                value={selectedCity}
                onChange={(e) => handleCityChange(e.target.value)}
                className="w-full rounded-lg border border-gray-250 p-2 bg-white text-xs"
                disabled={!selectedState}
              >
                <option value="">All Cities</option>
                {cities.map(c => <option key={c._id} value={c._id}>{c.name}</option>)}
              </select>
            </div>

            <div>
              <label className="block text-xs font-bold text-gray-500 mb-1">Area</label>
              <select
                value={selectedArea}
                onChange={(e) => { setSelectedArea(e.target.value); setPage(1); }}
                className="w-full rounded-lg border border-gray-250 p-2 bg-white text-xs"
                disabled={!selectedCity}
              >
                <option value="">All Areas</option>
                {areas.map(a => <option key={a._id} value={a._id}>{a.name}</option>)}
              </select>
            </div>

            <div className="flex items-center gap-2 pt-2">
              <input
                type="checkbox"
                id="archived"
                checked={showArchived}
                onChange={(e) => { setShowArchived(e.target.checked); setPage(1); }}
                className="rounded border-gray-300 text-brand-primary"
              />
              <label htmlFor="archived" className="text-xs font-bold text-gray-700 cursor-pointer">
                Show Archived / Inactive
              </label>
            </div>
          </div>
        </Card>

        {/* Right Members Grid/Table */}
        <div className="lg:col-span-3 space-y-4">
          {isLoading ? (
            <div className="text-center py-20 bg-white border border-gray-200 rounded-xl">
              <div className="animate-spin rounded-full h-10 w-10 border-b-2 border-brand-primary mx-auto"></div>
              <p className="mt-3 text-sm text-gray-500 font-semibold">Searching parivar directory...</p>
            </div>
          ) : members.length === 0 ? (
            <div className="text-center py-20 bg-white border border-gray-200 rounded-xl text-gray-500 font-medium">
              No matching parivar members found within your active geographical authorization bounds.
            </div>
          ) : (
            <>
              {/* Desktop View (Table) */}
              <div className="hidden sm:block gs-card overflow-hidden">
                <table className="min-w-full divide-y divide-gray-200 text-sm">
                  <thead className="bg-gray-50 text-xs font-bold text-gray-500 uppercase tracking-wider text-left">
                    <tr>
                      <th className="px-6 py-3">Member ID</th>
                      <th className="px-6 py-3">Name</th>
                      <th className="px-6 py-3">Mobile</th>
                      <th className="px-6 py-3">Location (City / Area)</th>
                      <th className="px-6 py-3">Status</th>
                    </tr>
                  </thead>
                  <tbody className="bg-white divide-y divide-gray-200">
                    {members.map((member) => (
                      <tr key={member._id} className="hover:bg-brand-background/40 cursor-pointer transition-colors">
                        <td className="px-6 py-4 font-mono font-bold text-brand-secondary">
                          <Link href={`/members/${member._id}`}>{member.memberUuid}</Link>
                        </td>
                        <td className="px-6 py-4 font-semibold text-gray-900 hover:text-brand-primary">
                          <Link href={`/members/${member._id}`}>{member.name}</Link>
                        </td>
                        <td className="px-6 py-4 text-gray-600">{member.mobile || 'N/A'}</td>
                        <td className="px-6 py-4 text-gray-600">
                          {member.cityId?.name} / {member.areaId?.name}
                        </td>
                        <td className="px-6 py-4">
                          <span className={`inline-flex px-2.5 py-0.5 rounded-full text-xs font-bold ${
                            member.status === 'Member' ? 'bg-green-50 text-green-700 border border-green-200' :
                            member.status === 'Regular Attendee' ? 'bg-blue-50 text-blue-700 border border-blue-200' :
                            'bg-gray-50 text-gray-600 border border-gray-200'
                          }`}>
                            {member.status}
                          </span>
                        </td>
                      </tr>
                    ))}
                  </tbody>
                </table>
              </div>

              {/* Mobile View (Cards) */}
              <div className="sm:hidden space-y-4">
                {members.map((member) => (
                  <Link key={member._id} href={`/members/${member._id}`} className="block gs-card p-4 hover:border-brand-primary">
                    <div className="flex justify-between items-start mb-2">
                      <span className="text-xs font-mono font-bold text-brand-secondary">{member.memberUuid}</span>
                      <span className="text-xs font-bold px-2 py-0.5 rounded bg-brand-primary bg-opacity-10 text-brand-primary">
                        {member.status}
                      </span>
                    </div>
                    <h4 className="font-bold text-gray-900 text-base">{member.name}</h4>
                    <p className="text-xs text-gray-500 mt-1">Mobile: {member.mobile || 'N/A'}</p>
                    <p className="text-xs text-gray-500">Location: {member.cityId?.name} / {member.areaId?.name}</p>
                  </Link>
                ))}
              </div>

              {/* Pagination controls */}
              <div className="flex justify-between items-center bg-white p-4 rounded-xl border border-gray-200 shadow-sm text-sm">
                <span className="font-medium text-gray-600">Total: {totalItems} members</span>
                
                <div className="flex gap-2">
                  <Button
                    onClick={() => setPage(p => Math.max(1, p - 1))}
                    disabled={page === 1}
                    variant="secondary"
                    className="px-3 py-1.5 text-xs"
                  >
                    Previous
                  </Button>
                  <span className="flex items-center px-2 text-xs font-semibold text-gray-700">
                    Page {page} of {totalPages}
                  </span>
                  <Button
                    onClick={() => setPage(p => Math.min(totalPages, p + 1))}
                    disabled={page === totalPages}
                    variant="secondary"
                    className="px-3 py-1.5 text-xs"
                  >
                    Next
                  </Button>
                </div>
              </div>
            </>
          )}
        </div>
      </div>
    </div>
  );
}