'use client';

import React, { useState, useEffect } from 'react';
import { getSchedules, endSatsangSchedule } from '@/lib/actions/satsangs';
import { Button } from '@/components/ui/Button';
import { Input } from '@/components/ui/Input';
import { Card } from '@/components/ui/Card';
import Link from 'next/link';

export default function SchedulesPage() {
  const [schedules, setSchedules] = useState<any[]>([]);
  const [isLoading, setIsLoading] = useState(true);

  // Ending Modal State
  const [isEndOpen, setIsEndOpen] = useState(false);
  const [selectedScheduleId, setSelectedScheduleId] = useState('');
  const [endDate, setEndDate] = useState(new Date().toISOString().substring(0, 10));
  const [isEnding, setIsEnding] = useState(false);

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

  const loadSchedulesList = async () => {
    setIsLoading(true);
    try {
      const list = await getSchedules();
      setSchedules(list);
    } catch (err) {
      console.error(err);
    } finally {
      setIsLoading(false);
    }
  };

  const handleOpenEnd = (id: string) => {
    setSelectedScheduleId(id);
    setEndDate(new Date().toISOString().substring(0, 10));
    setIsEndOpen(true);
  };

  const handleEndSubmit = async (e: React.FormEvent) => {
    e.preventDefault();
    setIsEnding(true);
    try {
      await endSatsangSchedule(selectedScheduleId, endDate);
      setIsEndOpen(false);
      loadSchedulesList();
    } catch (err: any) {
      alert(err.message);
    } finally {
      setIsEnding(false);
    }
  };

  const getDayName = (dayNum: number) => {
    const days = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'];
    return days[dayNum] || 'Unknown';
  };

  return (
    <div className="space-y-6">
      <div className="flex justify-between items-center">
        <div>
          <h1 className="text-2xl md:text-3xl font-bold text-gray-900 font-sans">Recurring Schedules</h1>
          <p className="mt-1 text-sm text-gray-500">Configure weekly event templates and set active/stopping boundaries.</p>
        </div>
        <Link href="/satsangs/create">
          <Button className="bg-brand-primary text-white">
            + Create Schedule
          </Button>
        </Link>
      </div>

      <Card className="p-6">
        {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 schedules...</p>
          </div>
        ) : schedules.length === 0 ? (
          <div className="text-center py-12 text-gray-500 text-sm font-semibold">
            No recurring schedules registered.
          </div>
        ) : (
          <div className="space-y-4">
            {schedules.map((schedule) => (
              <div key={schedule._id} className="p-4 border border-gray-200 rounded-xl bg-gray-50 flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">
                <div>
                  <div className="flex items-center gap-2">
                    <h3 className="font-bold text-gray-900 text-base">{schedule.name}</h3>
                    <span className={`text-[10px] font-bold px-2 py-0.5 rounded-full ${
                      schedule.isActive ? 'bg-green-50 text-green-700 border border-green-200' : 'bg-red-50 text-red-700 border border-red-200'
                    }`}>
                      {schedule.isActive ? 'Active' : 'Ended'}
                    </span>
                  </div>

                  <div className="text-xs text-gray-500 mt-1 space-y-0.5 font-medium">
                    <p>Recurrence: Every {getDayName(schedule.recurrence.dayOfWeek)} at {schedule.recurrence.time} - {schedule.recurrence.endTime}</p>
                    <p>Location: {schedule.centerId?.name}</p>
                    <p>Timezone: {schedule.timezone}</p>
                    <p>Incharge: {schedule.inchargeId?.email}</p>
                    <p>
                      Date Bounds: From {new Date(schedule.startDate).toLocaleDateString()}
                      {schedule.endDate ? ` to ${new Date(schedule.endDate).toLocaleDateString()}` : ' (Continuous)'}
                    </p>
                  </div>
                </div>

                <div className="flex gap-2">
                  <Link href={`/satsangs/schedules/${schedule._id}/edit`}>
                    <Button variant="secondary" className="border-gray-200 text-gray-700 text-xs py-1.5 px-3">
                      Edit Schedule
                    </Button>
                  </Link>
                  {schedule.isActive && !schedule.endDate && (
                    <Button onClick={() => handleOpenEnd(schedule._id)} className="bg-red-600 hover:bg-red-700 text-white text-xs py-1.5 px-3">
                      End Schedule
                    </Button>
                  )}
                </div>
              </div>
            ))}
          </div>
        )}
      </Card>

      {/* --- END SCHEDULE DIALOG --- */}
      {isEndOpen && (
        <div className="fixed inset-0 z-50 flex items-center justify-center p-4">
          <div className="fixed inset-0 bg-gray-600 bg-opacity-75" onClick={() => setIsEndOpen(false)} />
          
          <div className="relative bg-white rounded-xl shadow-xl max-w-md w-full p-6 border border-gray-150 animate-slide-in">
            <h3 className="text-lg font-bold text-gray-950 mb-4">Set Schedule End Date</h3>
            <p className="text-xs text-gray-500 mb-4">
              Any future generated events belonging to this schedule that occur after the specified end date will be automatically removed.
            </p>

            <form onSubmit={handleEndSubmit} className="space-y-4">
              <div>
                <label className="block text-sm font-semibold text-gray-700 mb-1">End Date</label>
                <Input required type="date" value={endDate} onChange={(e) => setEndDate(e.target.value)} />
              </div>

              <div className="flex justify-end gap-2 pt-2">
                <Button type="button" variant="secondary" onClick={() => setIsEndOpen(false)}>
                  Cancel
                </Button>
                <Button type="submit" isLoading={isEnding} className="bg-red-600 hover:bg-red-700 text-white font-medium">
                  End Schedule
                </Button>
              </div>
            </form>
          </div>
        </div>
      )}
    </div>
  );
}