'use client';

import React, { useState, useEffect } from 'react';
import { useRouter } from 'next/navigation';
import { createOneTimeSatsang, createSatsangSchedule } from '@/lib/actions/satsangs';
import { getCountries, getStates, getCities, getAreas, getCenters } from '@/lib/actions/geography';
import { getUsers } from '@/lib/actions/users';
import { Button } from '@/components/ui/Button';
import { Input } from '@/components/ui/Input';
import { Card } from '@/components/ui/Card';

export default function CreateSatsangPage() {
  const router = useRouter();
  const [activeTab, setActiveTab] = useState<'onetime' | 'recurring'>('onetime');
  const [isLoading, setIsLoading] = useState(false);
  const [error, setError] = useState<string | null>(null);

  // Dropdown options lists
  const [countries, setCountries] = useState<any[]>([]);
  const [states, setStates] = useState<any[]>([]);
  const [cities, setCities] = useState<any[]>([]);
  const [areas, setAreas] = useState<any[]>([]);
  const [centers, setCenters] = useState<any[]>([]);
  const [incharges, setIncharges] = useState<any[]>([]);

  // Selection filters for cascading
  const [selectedCountry, setSelectedCountry] = useState('');
  const [selectedState, setSelectedState] = useState('');
  const [selectedCity, setSelectedCity] = useState('');
  const [selectedArea, setSelectedArea] = useState('');

  // Form State
  const [form, setForm] = useState({
    name: '',
    type: 'Regular Satsang',
    date: new Date().toISOString().substring(0, 10),
    startTime: '19:00',
    endTime: '21:00',
    centerId: '',
    inchargeId: '',
    notes: '',
    // Recurring extra fields
    dayOfWeek: 0, // Sunday
    startDate: new Date().toISOString().substring(0, 10),
    endDate: ''
  });

  useEffect(() => {
    loadCountries();
    loadIncharges();
  }, []);

  const loadCountries = async () => {
    const list = await getCountries();
    setCountries(list);
  };

  const loadIncharges = async () => {
    const list = await getUsers();
    setIncharges(list.filter((u: any) => u.role === 'AREA_INCHARGE' || u.role === 'CITY_HEAD'));
  };

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

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

  const handleCityChange = async (cityId: string) => {
    setSelectedCity(cityId);
    setSelectedArea('');
    setForm(f => ({ ...f, centerId: '' }));
    setAreas([]);
    setCenters([]);
    if (cityId) {
      const list = await getAreas(cityId);
      setAreas(list);
    }
  };

  const handleAreaChange = async (areaId: string) => {
    setSelectedArea(areaId);
    setForm(f => ({ ...f, centerId: '' }));
    setCenters([]);
    if (areaId) {
      const list = await getCenters(areaId);
      setCenters(list);
    }
  };

  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault();
    setIsLoading(true);
    setError(null);

    if (!form.centerId) {
      setError('Please select a Satsang Center');
      setIsLoading(false);
      return;
    }

    if (!form.inchargeId) {
      setError('Please select an Incharge coordinator');
      setIsLoading(false);
      return;
    }

    try {
      if (activeTab === 'onetime') {
        await createOneTimeSatsang({
          name: form.name,
          type: form.type,
          date: form.date,
          startTime: form.startTime,
          endTime: form.endTime,
          centerId: form.centerId,
          inchargeId: form.inchargeId,
          notes: form.notes
        });
        router.push('/satsangs');
        router.refresh();
      } else {
        await createSatsangSchedule({
          name: form.name,
          type: form.type,
          recurrence: {
            dayOfWeek: Number(form.dayOfWeek),
            time: form.startTime,
            endTime: form.endTime
          },
          centerId: form.centerId,
          inchargeId: form.inchargeId,
          startDate: form.startDate,
          endDate: form.endDate || undefined
        });
        router.push('/satsangs/schedules');
        router.refresh();
      }
    } catch (err: any) {
      setError(err.message);
      setIsLoading(false);
    }
  };

  return (
    <div className="max-w-2xl mx-auto space-y-6">
      <div>
        <h1 className="text-2xl md:text-3xl font-bold text-gray-900 font-sans">Schedule Satsang</h1>
        <p className="mt-1 text-sm text-gray-500">Configure recurring schedules or register one-time parivar events.</p>
      </div>

      {/* Tabs */}
      <div className="flex border-b border-gray-250">
        <button
          onClick={() => { setActiveTab('onetime'); setError(null); }}
          className={`flex-1 py-3 text-center font-bold text-sm border-b-2 transition-all ${
            activeTab === 'onetime' ? 'border-brand-primary text-brand-primary' : 'border-transparent text-gray-500 hover:text-gray-900'
          }`}
        >
          One-Time Satsang
        </button>
        <button
          onClick={() => { setActiveTab('recurring'); setError(null); }}
          className={`flex-1 py-3 text-center font-bold text-sm border-b-2 transition-all ${
            activeTab === 'recurring' ? 'border-brand-primary text-brand-primary' : 'border-transparent text-gray-500 hover:text-gray-900'
          }`}
        >
          Recurring Schedule
        </button>
      </div>

      {error && (
        <div className="bg-red-50 border border-red-200 text-red-800 p-4 rounded-xl text-sm font-semibold">
          {error}
        </div>
      )}

      <Card className="p-6">
        <form onSubmit={handleSubmit} className="space-y-6">
          <div className="space-y-4">
            <h3 className="text-lg font-bold text-gray-900 border-b border-gray-150 pb-2">General Settings</h3>
            
            <div>
              <label className="block text-sm font-semibold text-gray-700 mb-1">Satsang Title</label>
              <Input required value={form.name} onChange={(e) => setForm({ ...form, name: e.target.value })} />
            </div>

            <div className="grid grid-cols-2 gap-4">
              <div>
                <label className="block text-sm font-semibold text-gray-700 mb-1">Satsang Category</label>
                <select
                  value={form.type}
                  onChange={(e) => setForm({ ...form, type: e.target.value })}
                  className="w-full rounded-lg border border-gray-250 p-2.5 bg-white text-sm"
                >
                  <option value="Regular Satsang">Regular Satsang</option>
                  <option value="Special Satsang">Special Satsang</option>
                  <option value="Other">Other</option>
                </select>
              </div>
              <div>
                <label className="block text-sm font-semibold text-gray-700 mb-1">Incharge Conductor</label>
                <select
                  value={form.inchargeId}
                  onChange={(e) => setForm({ ...form, inchargeId: e.target.value })}
                  className="w-full rounded-lg border border-gray-250 p-2.5 bg-white text-sm"
                >
                  <option value="">Select Incharge</option>
                  {incharges.map(inc => <option key={inc._id} value={inc._id}>{inc.email}</option>)}
                </select>
              </div>
            </div>

            {/* Geography cascades selector to lock Center */}
            <div className="border-t border-gray-100 pt-4 space-y-4">
              <h4 className="font-bold text-gray-900 text-sm">Select Center Location</h4>
              
              <div className="grid grid-cols-2 gap-4">
                <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="">Select Country</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="">Select State</option>
                    {states.map(s => <option key={s._id} value={s._id}>{s.name}</option>)}
                  </select>
                </div>
              </div>

              <div className="grid grid-cols-2 gap-4">
                <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="">Select City</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) => handleAreaChange(e.target.value)}
                    className="w-full rounded-lg border border-gray-250 p-2 bg-white text-xs"
                    disabled={!selectedCity}
                  >
                    <option value="">Select Area</option>
                    {areas.map(a => <option key={a._id} value={a._id}>{a.name}</option>)}
                  </select>
                </div>
              </div>

              <div>
                <label className="block text-sm font-semibold text-gray-700 mb-1">Satsang Center</label>
                <select
                  value={form.centerId}
                  onChange={(e) => setForm({ ...form, centerId: e.target.value })}
                  className="w-full rounded-lg border border-gray-250 p-2.5 bg-white text-sm"
                  disabled={!selectedArea}
                >
                  <option value="">Select Center</option>
                  {centers.map(ce => <option key={ce._id} value={ce._id}>{ce.name}</option>)}
                </select>
              </div>
            </div>

            {/* Recurrence Pattern details */}
            <div className="border-t border-gray-100 pt-4 space-y-4">
              <h4 className="font-bold text-gray-900 text-sm">Recurrence & Timing Details</h4>

              {activeTab === 'onetime' ? (
                <>
                  <div>
                    <label className="block text-sm font-semibold text-gray-700 mb-1">Scheduled Date</label>
                    <Input type="date" value={form.date} onChange={(e) => setForm({ ...form, date: e.target.value })} />
                  </div>
                  <div className="grid grid-cols-2 gap-4">
                    <div>
                      <label className="block text-sm font-semibold text-gray-700 mb-1">Start Time</label>
                      <Input type="time" value={form.startTime} onChange={(e) => setForm({ ...form, startTime: e.target.value })} />
                    </div>
                    <div>
                      <label className="block text-sm font-semibold text-gray-700 mb-1">End Time</label>
                      <Input type="time" value={form.endTime} onChange={(e) => setForm({ ...form, endTime: e.target.value })} />
                    </div>
                  </div>
                </>
              ) : (
                <>
                  <div className="grid grid-cols-3 gap-4">
                    <div className="col-span-1">
                      <label className="block text-sm font-semibold text-gray-700 mb-1">Weekly Day</label>
                      <select
                        value={form.dayOfWeek}
                        onChange={(e) => setForm({ ...form, dayOfWeek: Number(e.target.value) })}
                        className="w-full rounded-lg border border-gray-250 p-2.5 bg-white text-sm"
                      >
                        <option value="0">Sunday</option>
                        <option value="1">Monday</option>
                        <option value="2">Tuesday</option>
                        <option value="3">Wednesday</option>
                        <option value="4">Thursday</option>
                        <option value="5">Friday</option>
                        <option value="6">Saturday</option>
                      </select>
                    </div>
                    <div>
                      <label className="block text-sm font-semibold text-gray-700 mb-1">Start Time</label>
                      <Input type="time" value={form.startTime} onChange={(e) => setForm({ ...form, startTime: e.target.value })} />
                    </div>
                    <div>
                      <label className="block text-sm font-semibold text-gray-700 mb-1">End Time</label>
                      <Input type="time" value={form.endTime} onChange={(e) => setForm({ ...form, endTime: e.target.value })} />
                    </div>
                  </div>

                  <div className="grid grid-cols-2 gap-4">
                    <div>
                      <label className="block text-sm font-semibold text-gray-700 mb-1">Start Active Date</label>
                      <Input type="date" value={form.startDate} onChange={(e) => setForm({ ...form, startDate: e.target.value })} />
                    </div>
                    <div>
                      <label className="block text-sm font-semibold text-gray-700 mb-1">End Active Date (Optional)</label>
                      <Input type="date" value={form.endDate} onChange={(e) => setForm({ ...form, endDate: e.target.value })} />
                    </div>
                  </div>
                </>
              )}

              <div>
                <label className="block text-sm font-semibold text-gray-700 mb-1">Satsang Notes</label>
                <Input value={form.notes} onChange={(e) => setForm({ ...form, notes: e.target.value })} />
              </div>
            </div>
          </div>

          <div className="flex justify-end gap-2 pt-4 border-t border-gray-150">
            <Button type="button" variant="secondary" onClick={() => router.push('/satsangs')}>
              Cancel
            </Button>
            <Button type="submit" isLoading={isLoading} className="bg-brand-primary text-white">
              Save Satsang
            </Button>
          </div>
        </form>
      </Card>
    </div>
  );
}