'use client';

import React, { useState, useEffect } from 'react';
import { getAttendanceSettings, updateAttendanceSettings } from '@/lib/actions/attendance';
import { Button } from '@/components/ui/Button';
import { Input } from '@/components/ui/Input';
import { Card } from '@/components/ui/Card';

export default function SystemSettingsPage() {
  const [isLoading, setIsLoading] = useState(true);
  const [isSaving, setIsSaving] = useState(false);
  const [error, setError] = useState<string | null>(null);
  const [success, setSuccess] = useState(false);

  const [form, setForm] = useState({
    inactivityDays: 45,
    earlyCheckInMins: 60,
    backEntryDays: 7,
    nearestSatsangRadiusKm: 50,
    generationHorizonDays: 90,
    timezone: 'Asia/Kolkata'
  });

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

  const loadSettings = async () => {
    setIsLoading(true);
    try {
      const data = await getAttendanceSettings();
      setForm({
        inactivityDays: data.attendanceInactiveThresholdDays || 45,
        earlyCheckInMins: data.attendanceEarlyCheckInMinutes || 60,
        backEntryDays: data.attendanceBackEntryDays || 7,
        nearestSatsangRadiusKm: data.nearestSatsangRadiusKm || 50,
        generationHorizonDays: data.satsangOccurrenceGenerationDays || 90,
        timezone: data.timezone || 'Asia/Kolkata'
      });
    } catch (err: any) {
      setError(err.message || 'Failed to load configuration parameters');
    } finally {
      setIsLoading(false);
    }
  };

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

    try {
      await updateAttendanceSettings(form);
      setSuccess(true);
    } catch (err: any) {
      setError(err.message || 'Failed to update configuration settings');
    } finally {
      setIsSaving(false);
    }
  };

  if (isLoading) {
    return (
      <div className="text-center py-20">
        <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">Loading system configuration...</p>
      </div>
    );
  }

  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">System Settings</h1>
        <p className="mt-1 text-sm text-gray-500">Configure global parameters and attendance checking window variables.</p>
      </div>

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

      {success && (
        <div className="bg-green-50 border border-green-200 text-green-800 p-4 rounded-xl text-sm font-semibold">
          System settings updated successfully!
        </div>
      )}

      <Card className="p-6">
        <form onSubmit={handleSubmit} className="space-y-6">
          <div className="space-y-4">
            <h3 className="text-base font-bold text-gray-900 border-b border-gray-150 pb-2">Operational Timing Variables</h3>
            
            <div className="grid grid-cols-2 gap-4">
              <div>
                <label className="block text-sm font-semibold text-gray-700 mb-1">
                  Inactivity Cutoff (Days)
                </label>
                <Input
                  type="number"
                  required
                  min={1}
                  value={form.inactivityDays}
                  onChange={(e) => setForm({ ...form, inactivityDays: Number(e.target.value) })}
                />
                <span className="text-[10px] text-gray-400 mt-1 block">Default: 45 days. Threshold for Not Attended Recently.</span>
              </div>

              <div>
                <label className="block text-sm font-semibold text-gray-700 mb-1">
                  Early Check-In Window (Mins)
                </label>
                <Input
                  type="number"
                  required
                  min={0}
                  value={form.earlyCheckInMins}
                  onChange={(e) => setForm({ ...form, earlyCheckInMins: Number(e.target.value) })}
                />
                <span className="text-[10px] text-gray-400 mt-1 block">Default: 60 mins. Opens attendance prior to start.</span>
              </div>
            </div>

            <div className="grid grid-cols-2 gap-4">
              <div>
                <label className="block text-sm font-semibold text-gray-700 mb-1">
                  Back-Entry Window Limit (Days)
                </label>
                <Input
                  type="number"
                  required
                  min={1}
                  value={form.backEntryDays}
                  onChange={(e) => setForm({ ...form, backEntryDays: Number(e.target.value) })}
                />
                <span className="text-[10px] text-gray-400 mt-1 block">Default: 7 days. Blocks late check-ins for leaders.</span>
              </div>

              <div>
                <label className="block text-sm font-semibold text-gray-700 mb-1">
                  Schedule Generation Horizon (Days)
                </label>
                <Input
                  type="number"
                  required
                  min={7}
                  value={form.generationHorizonDays}
                  onChange={(e) => setForm({ ...form, generationHorizonDays: Number(e.target.value) })}
                />
                <span className="text-[10px] text-gray-400 mt-1 block">Default: 90 days. Range for recurring weekly generation.</span>
              </div>
            </div>

            <div>
              <label className="block text-sm font-semibold text-gray-700 mb-1">
                Nearest Search Radius (KM)
              </label>
              <Input
                type="number"
                required
                min={1}
                value={form.nearestSatsangRadiusKm}
                onChange={(e) => setForm({ ...form, nearestSatsangRadiusKm: Number(e.target.value) })}
              />
              <span className="text-[10px] text-gray-400 mt-1 block">Default: 50 km. Limits coordinates proximity search range.</span>
            </div>

            <div>
              <label className="block text-sm font-semibold text-gray-700 mb-1">
                Default System Timezone (IANA)
              </label>
              <select
                value={form.timezone}
                onChange={(e) => setForm({ ...form, timezone: e.target.value })}
                className="w-full rounded-lg border border-gray-250 p-2.5 bg-white text-sm"
              >
                <option value="Asia/Kolkata">Asia/Kolkata (India Standard Time)</option>
                <option value="America/New_York">America/New_York (Eastern Time)</option>
                <option value="Europe/London">Europe/London (Greenwich Mean Time)</option>
                <option value="UTC">UTC (Universal Coordinated Time)</option>
              </select>
            </div>
          </div>

          <div className="flex justify-end gap-2 pt-4 border-t border-gray-150">
            <Button type="button" variant="secondary" onClick={loadSettings}>
              Reset Values
            </Button>
            <Button type="submit" isLoading={isSaving} className="bg-brand-primary text-white">
              Save Configuration
            </Button>
          </div>
        </form>
      </Card>
    </div>
  );
}