'use client';

import { useState, useEffect, useMemo } from 'react';
import {
  Dialog,
  DialogContent,
  DialogHeader,
  DialogTitle,
} from '@/components/ui/dialog';
import { Button } from '@/components/ui/button';
import { Label } from '@/components/ui/label';
import { Switch } from '@/components/ui/switch';
import { Card } from '@/components/ui/card';
import type { FieldSettings } from './types';

interface FieldSettingsDialogProps {
  open: boolean;
  onOpenChange: (open: boolean) => void;
  settings: FieldSettings;
  onSave: (settings: FieldSettings) => void;
}

export function FieldSettingsDialog({
  open,
  onOpenChange,
  settings,
  onSave,
}: FieldSettingsDialogProps) {
  const [localSettings, setLocalSettings] = useState<FieldSettings>(settings);

  useEffect(() => {
    if (open) {
      setLocalSettings(settings);
    }
  }, [open, settings]);

  const handleToggle = (key: keyof FieldSettings) => {
    setLocalSettings(prev => ({ ...prev, [key]: !prev[key] }));
  };

  // 사원 상세 전체 토글
  const employeeDetailFields: (keyof FieldSettings)[] = [
    'showProfileImage', 'showEmployeeCode', 'showGender', 'showAddress'
  ];
  const isAllEmployeeDetailOn = useMemo(() =>
    employeeDetailFields.every(key => localSettings[key]),
    [localSettings]
  );
  const handleToggleAllEmployeeDetail = (checked: boolean) => {
    setLocalSettings(prev => {
      const updated = { ...prev };
      employeeDetailFields.forEach(key => {
        updated[key] = checked;
      });
      return updated;
    });
  };

  // 인사 정보 전체 토글
  const hrInfoFields: (keyof FieldSettings)[] = [
    'showHireDate', 'showEmploymentType', 'showRank', 'showStatus', 'showDepartment', 'showPosition', 'showClockInLocation', 'showClockOutLocation', 'showResignationDate', 'showResignationReason'
  ];
  const isAllHrInfoOn = useMemo(() =>
    hrInfoFields.every(key => localSettings[key]),
    [localSettings]
  );
  const handleToggleAllHrInfo = (checked: boolean) => {
    setLocalSettings(prev => {
      const updated = { ...prev };
      hrInfoFields.forEach(key => {
        updated[key] = checked;
      });
      return updated;
    });
  };

  const handleSave = () => {
    onSave(localSettings);
    onOpenChange(false);
  };

  return (
    <Dialog open={open} onOpenChange={onOpenChange}>
      <DialogContent className="max-w-md">
        <DialogHeader>
          <DialogTitle>항목 설정</DialogTitle>
        </DialogHeader>

        <div className="space-y-4 py-4">
          {/* 사원 상세 섹션 */}
          <Card className="p-4">
            <div className="space-y-3">
              {/* 전체 토글 */}
              <div className="flex items-center justify-between border-b pb-3">
                <Label className="font-semibold">사원 상세</Label>
                <Switch
                  checked={isAllEmployeeDetailOn}
                  onCheckedChange={handleToggleAllEmployeeDetail}
                />
              </div>

              {/* 개별 항목들 */}
              <div className="flex items-center justify-between">
                <Label htmlFor="showProfileImage">프로필 사진</Label>
                <Switch
                  id="showProfileImage"
                  checked={localSettings.showProfileImage}
                  onCheckedChange={() => handleToggle('showProfileImage')}
                />
              </div>

              <div className="flex items-center justify-between">
                <Label htmlFor="showEmployeeCode">사원코드</Label>
                <Switch
                  id="showEmployeeCode"
                  checked={localSettings.showEmployeeCode}
                  onCheckedChange={() => handleToggle('showEmployeeCode')}
                />
              </div>

              <div className="flex items-center justify-between">
                <Label htmlFor="showGender">성별</Label>
                <Switch
                  id="showGender"
                  checked={localSettings.showGender}
                  onCheckedChange={() => handleToggle('showGender')}
                />
              </div>

              <div className="flex items-center justify-between">
                <Label htmlFor="showAddress">주소</Label>
                <Switch
                  id="showAddress"
                  checked={localSettings.showAddress}
                  onCheckedChange={() => handleToggle('showAddress')}
                />
              </div>
            </div>
          </Card>

          {/* 인사 정보 섹션 */}
          <Card className="p-4">
            <div className="space-y-3">
              {/* 전체 토글 */}
              <div className="flex items-center justify-between border-b pb-3">
                <Label className="font-semibold">인사 정보</Label>
                <Switch
                  checked={isAllHrInfoOn}
                  onCheckedChange={handleToggleAllHrInfo}
                />
              </div>

              {/* 개별 항목들 */}
              <div className="flex items-center justify-between">
                <Label htmlFor="showHireDate">입사일</Label>
                <Switch
                  id="showHireDate"
                  checked={localSettings.showHireDate}
                  onCheckedChange={() => handleToggle('showHireDate')}
                />
              </div>

              <div className="flex items-center justify-between">
                <Label htmlFor="showEmploymentType">고용 형태</Label>
                <Switch
                  id="showEmploymentType"
                  checked={localSettings.showEmploymentType}
                  onCheckedChange={() => handleToggle('showEmploymentType')}
                />
              </div>

              <div className="flex items-center justify-between">
                <Label htmlFor="showRank">직급</Label>
                <Switch
                  id="showRank"
                  checked={localSettings.showRank}
                  onCheckedChange={() => handleToggle('showRank')}
                />
              </div>

              <div className="flex items-center justify-between">
                <Label htmlFor="showStatus">상태</Label>
                <Switch
                  id="showStatus"
                  checked={localSettings.showStatus}
                  onCheckedChange={() => handleToggle('showStatus')}
                />
              </div>

              <div className="flex items-center justify-between">
                <Label htmlFor="showDepartment">부서</Label>
                <Switch
                  id="showDepartment"
                  checked={localSettings.showDepartment}
                  onCheckedChange={() => handleToggle('showDepartment')}
                />
              </div>

              <div className="flex items-center justify-between">
                <Label htmlFor="showPosition">직책</Label>
                <Switch
                  id="showPosition"
                  checked={localSettings.showPosition}
                  onCheckedChange={() => handleToggle('showPosition')}
                />
              </div>

              <div className="flex items-center justify-between">
                <Label htmlFor="showClockInLocation">출근 위치</Label>
                <Switch
                  id="showClockInLocation"
                  checked={localSettings.showClockInLocation}
                  onCheckedChange={() => handleToggle('showClockInLocation')}
                />
              </div>

              <div className="flex items-center justify-between">
                <Label htmlFor="showClockOutLocation">퇴근 위치</Label>
                <Switch
                  id="showClockOutLocation"
                  checked={localSettings.showClockOutLocation}
                  onCheckedChange={() => handleToggle('showClockOutLocation')}
                />
              </div>

              <div className="flex items-center justify-between">
                <Label htmlFor="showResignationDate">퇴사일</Label>
                <Switch
                  id="showResignationDate"
                  checked={localSettings.showResignationDate}
                  onCheckedChange={() => handleToggle('showResignationDate')}
                />
              </div>

              <div className="flex items-center justify-between">
                <Label htmlFor="showResignationReason">퇴직사유</Label>
                <Switch
                  id="showResignationReason"
                  checked={localSettings.showResignationReason}
                  onCheckedChange={() => handleToggle('showResignationReason')}
                />
              </div>
            </div>
          </Card>
        </div>

        {/* 버튼 */}
        <div className="flex justify-center gap-2">
          <Button variant="outline" onClick={() => onOpenChange(false)} className="w-24">
            취소
          </Button>
          <Button onClick={handleSave} className="w-24 bg-blue-500 hover:bg-blue-600">
            저장
          </Button>
        </div>
      </DialogContent>
    </Dialog>
  );
}