'use client';

import React, { useState, useEffect } from 'react';
import { getNotAttendedRecently, getNeverAttended } from '@/lib/actions/attendance';
import { getCities, getAreas } from '@/lib/actions/geography';
import { Button } from '@/components/ui/Button';
import { Card } from '@/components/ui/Card';
import Link from 'next/link';

export default function InactivityReportsPage() {
  const [activeTab, setActiveTab] = useState<'notRecently' | 'never'>('notRecently');
  const [isLoading, setIsLoading] = useState(true);

  // Data lists
  const [items, setItems] = useState<any[]>([]);

  // Filtering states
  const [cities, setCities] = useState<any[]>([]);
  const [areas, setAreas] = useState<any[]>([]);
  const [selectedCity, setSelectedCity] = useState('');
  const [selectedArea, setSelectedArea] = useState('');

  // Pagination states
  const [page, setPage] = useState(1);
  const [totalPages, setTotalPages] = useState(1);

  useEffect(() => {
    loadGeographies();
  }, []);

  useEffect(() => {
    loadReportData();
  }, [activeTab, selectedCity, selectedArea, page]);

  const loadGeographies = async () => {
    try {
      const list = await getCities('');
      setCities(list);
    } catch (err) {
      console.error(err);
    }
  };

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

  const loadReportData = async () => {
    setIsLoading(true);
    try {
      const city = selectedCity || undefined;
      const area = selectedArea || undefined;

      if (activeTab === 'notRecently') {
        const res = await getNotAttendedRecently(city, area, page, 10);
        setItems(res.items);
        setTotalPages(res.pagination.pages);
      } else {
        const res = await getNeverAttended(city, area, page, 10);
        setItems(res.items);
        setTotalPages(res.pagination.pages);
      }
    } catch (err) {
      console.error(err);
    } finally {
      setIsLoading(false);
    }
  };

  return (
    <div className="space-y-6">
      <div>
        <h1 className="text-2xl md:text-3xl font-bold text-gray-900 font-sans">Attendance Activity Reports</h1>
        <p className="mt-1 text-sm text-gray-500">Monitor members check-in activity and follow up with inactive parivar members.</p>
      </div>

      {/* Tabs */}
      <div className="flex border-b border-gray-250">
        <button
          onClick={() => { setActiveTab('notRecently'); setPage(1); setItems([]); }}
          className={`flex-1 py-3 text-center font-bold text-sm border-b-2 transition-all ${
            activeTab === 'notRecently' ? 'border-brand-primary text-brand-primary' : 'border-transparent text-gray-500 hover:text-gray-900'
          }`}
        >
          Not Attended Recently
        </button>
        <button
          onClick={() => { setActiveTab('never'); setPage(1); setItems([]); }}
          className={`flex-1 py-3 text-center font-bold text-sm border-b-2 transition-all ${
            activeTab === 'never' ? 'border-brand-primary text-brand-primary' : 'border-transparent text-gray-500 hover:text-gray-900'
          }`}
        >
          Never Attended
        </button>
      </div>

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

          <div className="space-y-3">
            <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"
              >
                <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>
        </Card>

        {/* Right Listings Table */}
        <div className="lg:col-span-3">
          <Card className="p-6">
            <h3 className="text-lg font-bold text-gray-900 border-b border-gray-150 pb-2 mb-4">
              {activeTab === 'notRecently' ? 'Members Not Attended Recently' : 'Members Never Attended'}
            </h3>

            {isLoading ? (
              <div className="text-center py-12">
                <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-brand-primary mx-auto"></div>
                <p className="mt-2 text-xs text-gray-500 font-semibold">Loading report details...</p>
              </div>
            ) : items.length === 0 ? (
              <div className="text-center py-12 text-gray-500 text-sm font-semibold">
                No members match the inactivity reporting filters.
              </div>
            ) : (
              <div className="space-y-4">
                <div className="overflow-x-auto">
                  <table className="min-w-full divide-y divide-gray-200 text-left text-sm">
                    <thead className="bg-gray-50 text-xs font-bold text-gray-500 uppercase tracking-wider">
                      <tr>
                        <th className="px-4 py-3">Member Name</th>
                        <th className="px-4 py-3">Member ID</th>
                        <th className="px-4 py-3">Primary Mobile</th>
                        {activeTab === 'notRecently' ? (
                          <>
                            <th className="px-4 py-3">Last Attended</th>
                            <th className="px-4 py-3">Days Since</th>
                          </>
                        ) : null}
                      </tr>
                    </thead>
                    <tbody className="divide-y divide-gray-150">
                      {items.map((item) => (
                        <tr key={item._id} className="hover:bg-gray-50/50">
                          <td className="px-4 py-3 font-bold text-gray-900">
                            <Link href={`/members/${item._id}`} className="hover:underline hover:text-brand-primary">
                              {item.name}
                            </Link>
                          </td>
                          <td className="px-4 py-3 font-mono text-xs">{item.memberUuid}</td>
                          <td className="px-4 py-3">{item.mobile || 'N/A'}</td>
                          {activeTab === 'notRecently' ? (
                            <>
                              <td className="px-4 py-3">
                                {new Date(item.lastAttended).toLocaleDateString()}
                              </td>
                              <td className="px-4 py-3 font-bold text-brand-primary">
                                {item.daysSince} days
                              </td>
                            </>
                          ) : null}
                        </tr>
                      ))}
                    </tbody>
                  </table>
                </div>

                {/* Pagination */}
                {totalPages > 1 && (
                  <div className="flex justify-end gap-2 pt-4 border-t border-gray-150">
                    <Button onClick={() => setPage(p => Math.max(1, p - 1))} disabled={page === 1} variant="secondary" className="px-3 py-1.5 text-xs">
                      Prev
                    </Button>
                    <span className="flex items-center text-xs font-bold text-gray-600">
                      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>
            )}
          </Card>
        </div>
      </div>
    </div>
  );
}