'use client';

import React, { useState, useEffect } from 'react';
import { getSatsangs } from '@/lib/actions/satsangs';
import { getCities, getAreas } from '@/lib/actions/geography';
import Link from 'next/link';
import { Button } from '@/components/ui/Button';
import { Input } from '@/components/ui/Input';
import { Card } from '@/components/ui/Card';
import { DateTime } from 'luxon';

export default function SatsangsPage() {
  const [satsangs, setSatsangs] = useState<any[]>([]);
  const [cities, setCities] = useState<any[]>([]);
  const [areas, setAreas] = useState<any[]>([]);

  // Filters state
  const [status, setStatus] = useState<'Upcoming' | 'Past' | 'Cancelled' | ''>('Upcoming');
  const [selectedCity, setSelectedCity] = useState('');
  const [selectedArea, setSelectedArea] = useState('');
  const [startDate, setStartDate] = useState('');
  const [endDate, setEndDate] = useState('');
  const [type, setType] = useState('');

  // Calendar states
  const [calendarDate, setCalendarDate] = useState(DateTime.now().setZone('Asia/Kolkata'));
  
  // Loading
  const [isLoading, setIsLoading] = useState(true);

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

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

  useEffect(() => {
    loadSatsangsList();
  }, [status, selectedCity, selectedArea, startDate, endDate, type, page]);

  const loadGeographies = async () => {
    try {
      // Find cities
      const list = await getCities(''); // pass empty or get default
      setCities(list);
    } catch (err) {
      console.error(err);
    }
  };

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

  const loadSatsangsList = async () => {
    setIsLoading(true);
    try {
      const filters = {
        status: status || undefined,
        cityId: selectedCity || undefined,
        areaId: selectedArea || undefined,
        startDate: startDate || undefined,
        endDate: endDate || undefined,
        type: type || undefined
      };

      const res = await getSatsangs(filters, page, 10);
      setSatsangs(res.items);
      setTotalPages(res.pagination.pages);
    } catch (err) {
      console.error(err);
    } finally {
      setIsLoading(false);
    }
  };

  // Centralized Dynamic Status Color Helper
  const getStatusBadgeClass = (satsangStatus: string) => {
    switch (satsangStatus) {
      case 'Cancelled':
        return 'bg-red-50 text-red-700 border border-red-200';
      case 'Completed':
        return 'bg-green-50 text-green-700 border border-green-200';
      default:
        return 'bg-orange-50 text-orange-700 border border-orange-200';
    }
  };

  // --- CALENDAR RENDER UTILS ---
  const renderCalendar = () => {
    const startOfMonth = calendarDate.startOf('month');
    const endOfMonth = calendarDate.endOf('month');
    const totalDays = calendarDate.daysInMonth || 30;

    // Day of week offset: Luxon Monday = 1, Sunday = 7. Convert so Sunday = 0
    let startDayOfWeek = startOfMonth.weekday;
    if (startDayOfWeek === 7) {
      startDayOfWeek = 0;
    }

    const dayLabels = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'];
    const blanks = Array.from({ length: startDayOfWeek });
    const days = Array.from({ length: totalDays }, (_, idx) => idx + 1);

    // Map events to calendar days (normalized to calendar local date string)
    const eventsByDay: Record<number, any[]> = {};
    satsangs.forEach((evt) => {
      const localDate = DateTime.fromJSDate(new Date(evt.startDateTime)).setZone('Asia/Kolkata');
      if (localDate.month === calendarDate.month && localDate.year === calendarDate.year) {
        const day = localDate.day;
        if (!eventsByDay[day]) eventsByDay[day] = [];
        eventsByDay[day].push(evt);
      }
    });

    const changeMonth = (offset: number) => {
      setCalendarDate(calendarDate.plus({ months: offset }));
    };

    return (
      <Card className="p-4 bg-white shadow-sm border border-gray-150">
        <div className="flex justify-between items-center mb-4">
          <h3 className="font-bold text-gray-900 text-sm">
            {calendarDate.toFormat('MMMM yyyy')} (Asia/Kolkata)
          </h3>
          <div className="flex gap-1">
            <button onClick={() => changeMonth(-1)} className="p-1 text-gray-600 hover:bg-gray-100 rounded touch-target text-xs font-bold">
              &lt; Prev
            </button>
            <button onClick={() => changeMonth(1)} className="p-1 text-gray-600 hover:bg-gray-100 rounded touch-target text-xs font-bold">
              Next &gt;
            </button>
          </div>
        </div>

        <div className="grid grid-cols-7 gap-1 text-center text-xs font-bold text-gray-400 mb-2 border-b border-gray-100 pb-1">
          {dayLabels.map((lbl) => <div key={lbl}>{lbl}</div>)}
        </div>

        <div className="grid grid-cols-7 gap-1">
          {blanks.map((_, idx) => <div key={`blank-${idx}`} className="h-10"></div>)}
          {days.map((day) => {
            const dayEvents = eventsByDay[day] || [];
            return (
              <div key={`day-${day}`} className="h-10 border border-gray-100 rounded flex flex-col items-center justify-between p-1 bg-gray-50/50 hover:bg-orange-50/40">
                <span className="text-[10px] font-bold text-gray-600">{day}</span>
                {dayEvents.length > 0 && (
                  <div className="flex gap-0.5">
                    {dayEvents.map((evt) => (
                      <span
                        key={evt._id}
                        title={evt.name}
                        className={`h-2 w-2 rounded-full ${
                          evt.status === 'Cancelled' ? 'bg-red-500' :
                          evt.status === 'Completed' ? 'bg-green-500' :
                          'bg-brand-primary animate-pulse'
                        }`}
                      ></span>
                    ))}
                  </div>
                )}
              </div>
            );
          })}
        </div>
      </Card>
    );
  };

  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">Satsang Calendar & Events</h1>
          <p className="mt-1 text-sm text-gray-500">Configure schedules, edit single occurrences, and check timings.</p>
        </div>

        <div className="flex gap-2">
          <Link href="/satsangs/schedules">
            <Button variant="secondary" className="border-gray-200 text-gray-700 text-sm">
              View Schedules
            </Button>
          </Link>
          <Link href="/satsangs/create">
            <Button className="bg-brand-primary text-white text-sm">
              + Register Satsang
            </Button>
          </Link>
        </div>
      </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 Options
          </h3>

          <div className="space-y-3">
            <div>
              <label className="block text-xs font-bold text-gray-500 mb-1">Status Type</label>
              <select
                value={status}
                onChange={(e) => { setStatus(e.target.value as any); setPage(1); }}
                className="w-full rounded-lg border border-gray-250 p-2 bg-white text-xs"
              >
                <option value="Upcoming">Upcoming Events</option>
                <option value="Past">Past / Completed</option>
                <option value="Cancelled">Cancelled Events</option>
                <option value="">All Events</option>
              </select>
            </div>

            <div>
              <label className="block text-xs font-bold text-gray-500 mb-1">Satsang Type</label>
              <select
                value={type}
                onChange={(e) => { setType(e.target.value); setPage(1); }}
                className="w-full rounded-lg border border-gray-250 p-2 bg-white text-xs"
              >
                <option value="">All Categories</option>
                <option value="Regular Satsang">Regular Satsang</option>
                <option value="Special Satsang">Special Satsang</option>
                <option value="Other">Other Category</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"
              >
                <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="grid grid-cols-2 gap-2">
              <div>
                <label className="block text-xs font-bold text-gray-500 mb-1">Start Date</label>
                <Input type="date" value={startDate} onChange={(e) => setStartDate(e.target.value)} className="p-1 text-xs" />
              </div>
              <div>
                <label className="block text-xs font-bold text-gray-500 mb-1">End Date</label>
                <Input type="date" value={endDate} onChange={(e) => setEndDate(e.target.value)} className="p-1 text-xs" />
              </div>
            </div>
          </div>
        </Card>

        {/* Right Calendar + List Grid */}
        <div className="lg:col-span-3 space-y-6">
          {/* Calendar month view */}
          {renderCalendar()}

          {/* List panel */}
          <Card className="p-6">
            <h3 className="text-lg font-bold text-gray-900 border-b border-gray-150 pb-2 mb-4">
              Satsang List View
            </h3>

            {/* Today's Satsangs highlighted block */}
            {!isLoading && (
              (() => {
                const todayStr = DateTime.now().setZone('Asia/Kolkata').toFormat('yyyy-MM-dd');
                const todayEvents = satsangs.filter(s => 
                  DateTime.fromJSDate(new Date(s.startDateTime)).setZone('Asia/Kolkata').toFormat('yyyy-MM-dd') === todayStr
                );
                if (todayEvents.length > 0) {
                  return (
                    <div className="mb-6 p-4 rounded-xl border border-orange-200 bg-orange-50/20">
                      <h4 className="text-xs font-bold text-brand-primary uppercase tracking-wider mb-3 flex items-center gap-1.5">
                        <span className="h-2 w-2 rounded-full bg-brand-primary animate-pulse"></span>
                        Today's Satsang Events
                      </h4>
                      <div className="space-y-3">
                        {todayEvents.map(s => (
                          <div key={`today-${s._id}`} className="flex justify-between items-center bg-white p-3 rounded-lg border border-orange-100 shadow-sm">
                            <div>
                              <h5 className="font-extrabold text-sm text-gray-950">{s.name}</h5>
                              <span className="text-[10px] text-gray-500 font-bold">{s.centerId?.name} • {s.startTime}</span>
                            </div>
                            <Link href={`/satsangs/${s._id}/attendance`} className="px-3 py-1.5 text-xs font-bold rounded bg-brand-primary text-white">
                              Mark Attendance
                            </Link>
                          </div>
                        ))}
                      </div>
                    </div>
                  );
                }
                return null;
              })()
            )}

            {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 events...</p>
              </div>
            ) : satsangs.length === 0 ? (
              <div className="text-center py-12 text-gray-500 text-sm font-semibold">
                No scheduled satsang events found in this date range or scope.
              </div>
            ) : (
              <div className="space-y-4">
                {satsangs.map((satsang) => (
                  <div key={satsang._id} className="p-4 border border-gray-200 rounded-xl bg-gray-50 flex flex-col md:flex-row md:items-center md:justify-between gap-4">
                    <div className="space-y-1">
                      <div className="flex items-center gap-2">
                        <Link href={`/satsangs/${satsang._id}`} className="font-bold text-gray-900 hover:text-brand-primary text-base">
                          {satsang.name}
                        </Link>
                        <span className={`text-[10px] font-bold px-2 py-0.5 rounded-full ${getStatusBadgeClass(satsang.status)}`}>
                          {satsang.status}
                        </span>
                      </div>
                      
                      <div className="text-xs text-gray-500 flex flex-wrap gap-x-4 gap-y-1 font-medium">
                        <span>Center: {satsang.centerId?.name}</span>
                        <span>
                          Time: {DateTime.fromJSDate(new Date(satsang.startDateTime)).setZone('Asia/Kolkata').toFormat('dd LLL yyyy, hh:mm a')}
                        </span>
                        <span>Type: {satsang.type}</span>
                        <span>Incharge: {satsang.inchargeId?.email}</span>
                      </div>
                    </div>

                    <div className="flex gap-2">
                      {satsang.centerId?.location?.coordinates && (
                        <a
                          href={`https://www.google.com/maps/dir/?api=1&destination=${satsang.centerId.location.coordinates[1]},${satsang.centerId.location.coordinates[0]}`}
                          target="_blank"
                          rel="noopener noreferrer"
                          className="px-3 py-1.5 text-xs font-bold border border-gray-200 rounded bg-white text-gray-700 hover:bg-gray-50 transition-colors text-center"
                        >
                          Directions
                        </a>
                      )}
                      {satsang.status !== 'Cancelled' && (
                        <Link href={`/satsangs/${satsang._id}/attendance`} className="px-3 py-1.5 text-xs font-bold rounded bg-orange-600 hover:bg-orange-700 text-white text-center">
                          Attendance
                        </Link>
                      )}
                      <Link href={`/satsangs/${satsang._id}`} className="px-3 py-1.5 text-xs font-bold rounded border border-gray-200 text-gray-700 bg-white hover:bg-gray-50 transition-colors text-center">
                        Details
                      </Link>
                    </div>
                  </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>
  );
}