'use client';

/**
 * 출퇴근관리 설정 페이지
 *
 * 이 설정값들이 영향을 주는 곳:
 * ────────────────────────────────────────────────────────────────
 * 1. 모바일 출퇴근 페이지 (/hr/attendance)
 *    - gpsEnabled: GPS 출퇴근 기능 활성화 여부
 *    - gpsDepartments: GPS 출퇴근 사용 가능한 부서 목록
 *    - allowedRadius: 출퇴근 허용 반경 (SITE_LOCATION.radius 값으로 사용)
 *
 * 2. 자동 출퇴근 배치 처리 (백엔드)
 *    - autoEnabled: 자동 출퇴근 기능 활성화 여부
 *    - autoDepartments: 자동 출퇴근 적용 부서 목록
 * ────────────────────────────────────────────────────────────────
 *
 * TODO: API 연동 시 작업 사항
 * - GET /api/settings/attendance: 설정값 조회
 * - PUT /api/settings/attendance: 설정값 저장
 * - 모바일 출퇴근 페이지에서 이 설정값을 조회하여 사용
 */

import { useState, useEffect, useCallback } from 'react';
import { PageLayout } from '@/components/organisms/PageLayout';
import { PageHeader } from '@/components/organisms/PageHeader';
import { MapPin, Save, Loader2 } from 'lucide-react';
import {
  getAttendanceSetting,
  updateAttendanceSetting,
  getDepartments,
  type Department,
} from './actions';
import { Button } from '@/components/ui/button';
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
import { Checkbox } from '@/components/ui/checkbox';
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from '@/components/ui/select';
import { toast } from 'sonner';
import type { AttendanceSettings, AllowedRadius } from './types';
import { DEFAULT_ATTENDANCE_SETTINGS, ALLOWED_RADIUS_OPTIONS } from './types';
import { MultiSelectCombobox } from '@/components/ui/multi-select-combobox';

export function AttendanceSettingsManagement() {
  const [settings, setSettings] = useState<AttendanceSettings>(DEFAULT_ATTENDANCE_SETTINGS);
  const [departments, setDepartments] = useState<Department[]>([]);

  // 로딩 상태
  const [isLoading, setIsLoading] = useState(true);
  const [isSaving, setIsSaving] = useState(false);

  // API에서 설정 및 부서 로드
  const loadData = useCallback(async () => {
    setIsLoading(true);
    try {
      // 설정과 부서를 병렬로 조회
      const [settingResult, deptResult] = await Promise.all([
        getAttendanceSetting(),
        getDepartments(),
      ]);

      // 설정 로드
      if (settingResult.success && settingResult.data) {
        setSettings(prev => ({
          ...prev,
          gpsEnabled: settingResult.data!.useGps,
          autoEnabled: settingResult.data!.useAuto,
          allowedRadius: settingResult.data!.allowedRadius as AllowedRadius,
        }));
      } else if (settingResult.error) {
        toast.error(settingResult.error);
      }

      // 부서 로드
      if (deptResult.success && deptResult.data) {
        setDepartments(deptResult.data);
      } else if (deptResult.error) {
        toast.error(deptResult.error);
      }
    } catch {
      toast.error('데이터를 불러오는데 실패했습니다.');
    } finally {
      setIsLoading(false);
    }
  }, []);

  // 초기 로드
  useEffect(() => {
    loadData();
  }, [loadData]);

  // GPS 출퇴근 사용 토글
  const handleGpsToggle = (checked: boolean) => {
    setSettings(prev => ({
      ...prev,
      gpsEnabled: checked,
      // 비활성화 시 연동 부서와 반경 초기화
      ...(checked ? {} : { gpsDepartments: [], allowedRadius: 100 as AllowedRadius }),
    }));
  };

  // 자동 출퇴근 사용 토글
  const handleAutoToggle = (checked: boolean) => {
    setSettings(prev => ({
      ...prev,
      autoEnabled: checked,
      // 비활성화 시 연동 부서 초기화
      ...(checked ? {} : { autoDepartments: [] }),
    }));
  };

  // GPS 연동 부서 변경 (UI 전용 - API 미지원)
  const handleGpsDepartmentsChange = (values: string[]) => {
    setSettings(prev => ({ ...prev, gpsDepartments: values }));
  };

  // 자동 출퇴근 연동 부서 변경 (UI 전용 - API 미지원)
  const handleAutoDepartmentsChange = (values: string[]) => {
    setSettings(prev => ({ ...prev, autoDepartments: values }));
  };

  // 허용 반경 변경
  const handleRadiusChange = (value: string) => {
    setSettings(prev => ({ ...prev, allowedRadius: Number(value) as AllowedRadius }));
  };

  // 저장
  const handleSave = async () => {
    setIsSaving(true);
    try {
      const result = await updateAttendanceSetting({
        useGps: settings.gpsEnabled,
        useAuto: settings.autoEnabled,
        allowedRadius: settings.allowedRadius,
      });

      if (result.success) {
        toast.success('출퇴근 설정이 저장되었습니다.');
      } else {
        toast.error(result.error || '저장에 실패했습니다.');
      }
    } catch {
      toast.error('서버 오류가 발생했습니다.');
    } finally {
      setIsSaving(false);
    }
  };

  // 부서 옵션 변환 (depth 포함)
  const departmentOptions = departments.map(dept => ({
    value: dept.id,
    label: dept.name,
    depth: dept.depth,
  }));

  // 선택된 부서 표시 텍스트
  const getSelectedDeptText = (selectedIds: string[]) => {
    if (selectedIds.length === 0) return '부서 선택';
    if (selectedIds.length === departments.length) return '전체';
    const firstDept = departments.find(d => d.id === selectedIds[0]);
    if (selectedIds.length === 1) return firstDept?.name || '';
    return `${firstDept?.name} 외 ${selectedIds.length - 1}`;
  };

  return (
    <PageLayout>
      <PageHeader
        title="출퇴근관리"
        description="출퇴근 방법을 관리합니다."
        icon={MapPin}
      />

      <div className="space-y-6">
        {/* GPS 출퇴근 */}
        <Card>
          <CardHeader>
            <CardTitle className="text-lg">GPS 출퇴근</CardTitle>
          </CardHeader>
          <CardContent className="space-y-6">
            {/* GPS 출퇴근 사용 + 연동 부서 */}
            <div className="grid grid-cols-1 md:grid-cols-[200px_1fr_1fr] gap-4 items-start">
              <span className="text-sm font-medium text-muted-foreground pt-0.5">GPS 출퇴근</span>
              <label className="flex items-center gap-2 cursor-pointer">
                <Checkbox
                  checked={settings.gpsEnabled}
                  onCheckedChange={handleGpsToggle}
                />
                <span className="text-sm">GPS 출퇴근을 사용합니다</span>
              </label>
              <div className="space-y-1">
                <span className="text-sm font-medium text-muted-foreground">연동 부서</span>
                <MultiSelectCombobox
                  options={departmentOptions}
                  value={settings.gpsDepartments}
                  onChange={handleGpsDepartmentsChange}
                  placeholder={getSelectedDeptText(settings.gpsDepartments)}
                  searchPlaceholder="부서 검색..."
                  emptyText="검색 결과가 없습니다."
                  disabled={!settings.gpsEnabled}
                  className="w-full"
                />
              </div>
            </div>

            {/* 출퇴근 허용 반경 */}
            <div className="grid grid-cols-1 md:grid-cols-[200px_1fr] gap-4 items-start">
              <span className="text-sm font-medium text-muted-foreground pt-0.5">출퇴근 허용 반경</span>
              <Select
                value={String(settings.allowedRadius)}
                onValueChange={handleRadiusChange}
                disabled={!settings.gpsEnabled}
              >
                <SelectTrigger className="w-full md:w-[200px]">
                  <SelectValue />
                </SelectTrigger>
                <SelectContent>
                  {ALLOWED_RADIUS_OPTIONS.map(option => (
                    <SelectItem key={option.value} value={String(option.value)}>
                      {option.label}
                    </SelectItem>
                  ))}
                </SelectContent>
              </Select>
            </div>
          </CardContent>
        </Card>

        {/* 자동 출퇴근 */}
        <Card>
          <CardHeader>
            <CardTitle className="text-lg">자동 출퇴근</CardTitle>
          </CardHeader>
          <CardContent>
            <div className="grid grid-cols-1 md:grid-cols-[200px_1fr_1fr] gap-4 items-start">
              <span className="text-sm font-medium text-muted-foreground pt-0.5">자동 출퇴근</span>
              <label className="flex items-center gap-2 cursor-pointer">
                <Checkbox
                  checked={settings.autoEnabled}
                  onCheckedChange={handleAutoToggle}
                />
                <span className="text-sm">자동 출퇴근을 사용합니다</span>
              </label>
              <div className="space-y-1">
                <span className="text-sm font-medium text-muted-foreground">연동 부서</span>
                <MultiSelectCombobox
                  options={departmentOptions}
                  value={settings.autoDepartments}
                  onChange={handleAutoDepartmentsChange}
                  placeholder={getSelectedDeptText(settings.autoDepartments)}
                  searchPlaceholder="부서 검색..."
                  emptyText="검색 결과가 없습니다."
                  disabled={!settings.autoEnabled}
                  className="w-full"
                />
              </div>
            </div>
          </CardContent>
        </Card>

        {/* 저장 버튼 */}
        <div className="flex justify-end">
          <Button onClick={handleSave} size="lg" disabled={isLoading || isSaving}>
            {isSaving ? (
              <>
                <Loader2 className="h-4 w-4 mr-2 animate-spin" />
                저장 중...
              </>
            ) : (
              <>
                <Save className="h-4 w-4 mr-2" />
                저장
              </>
            )}
          </Button>
        </div>

        {/* 안내 문구 */}
        <div className="text-sm text-muted-foreground space-y-1">
          <p>※ GPS 출퇴근과 자동 출퇴근은 독립적으로 설정 가능합니다.</p>
          <p>※ GPS 출퇴근: 설정된 GPS 좌표 반경 내에서만 출퇴근 기록이 가능합니다.</p>
          <p>※ 자동 출퇴근: 정시 출퇴근 처리를 자동화합니다.</p>
        </div>
      </div>
    </PageLayout>
  );
}