'use client';

/**
 * 알림설정 항목 설정 모달
 *
 * 각 알림 카테고리와 항목의 표시/숨김을 설정합니다.
 */

import { useState, useCallback } from 'react';
import { X } from 'lucide-react';
import {
  Dialog,
  DialogContent,
  DialogHeader,
  DialogTitle,
} from '@/components/ui/dialog';
import { Button } from '@/components/ui/button';
import { Switch } from '@/components/ui/switch';
import type { ItemVisibilitySettings } from './types';

interface ItemSettingsDialogProps {
  isOpen: boolean;
  onClose: () => void;
  settings: ItemVisibilitySettings;
  onSave: (settings: ItemVisibilitySettings) => void;
}

// 카테고리 섹션 컴포넌트
interface CategorySectionProps {
  title: string;
  enabled: boolean;
  onEnabledChange: (enabled: boolean) => void;
  children: React.ReactNode;
}

function CategorySection({ title, enabled, onEnabledChange, children }: CategorySectionProps) {
  return (
    <div className="bg-gray-100 rounded-lg overflow-hidden">
      {/* 카테고리 헤더 */}
      <div className="flex items-center justify-between px-4 py-3 bg-gray-200">
        <span className="text-gray-800 font-medium">{title}</span>
        <Switch
          checked={enabled}
          onCheckedChange={onEnabledChange}
          className="data-[state=checked]:bg-blue-500"
        />
      </div>
      {/* 하위 항목 */}
      <div className="bg-gray-50 px-4 py-2 space-y-2">
        {children}
      </div>
    </div>
  );
}

// 항목 행 컴포넌트
interface ItemRowProps {
  label: string;
  checked: boolean;
  onChange: (checked: boolean) => void;
  disabled?: boolean;
}

function ItemRow({ label, checked, onChange, disabled }: ItemRowProps) {
  return (
    <div className="flex items-center justify-between py-1">
      <span className="text-gray-600 text-sm">{label}</span>
      <Switch
        checked={checked}
        onCheckedChange={onChange}
        disabled={disabled}
        className="data-[state=checked]:bg-blue-500 scale-90"
      />
    </div>
  );
}

export function ItemSettingsDialog({ isOpen, onClose, settings, onSave }: ItemSettingsDialogProps) {
  const [localSettings, setLocalSettings] = useState<ItemVisibilitySettings>(settings);

  // 모달 열릴 때 설정 동기화
  const handleOpenChange = useCallback((open: boolean) => {
    if (open) {
      setLocalSettings(settings);
    } else {
      onClose();
    }
  }, [settings, onClose]);

  // 카테고리 전체 토글
  const handleCategoryToggle = useCallback((
    category: keyof ItemVisibilitySettings,
    enabled: boolean
  ) => {
    setLocalSettings(prev => {
      const categorySettings = prev[category];
      const updatedCategory: Record<string, boolean> = { enabled };

      // 모든 하위 항목도 같이 토글
      Object.keys(categorySettings).forEach(key => {
        if (key !== 'enabled') {
          updatedCategory[key] = enabled;
        }
      });

      return {
        ...prev,
        [category]: updatedCategory as unknown as typeof categorySettings,
      };
    });
  }, []);

  // 개별 항목 토글
  const handleItemToggle = useCallback((
    category: keyof ItemVisibilitySettings,
    item: string,
    checked: boolean
  ) => {
    setLocalSettings(prev => ({
      ...prev,
      [category]: {
        ...prev[category],
        [item]: checked,
      },
    }));
  }, []);

  // 저장
  const handleSave = useCallback(() => {
    onSave(localSettings);
    onClose();
  }, [localSettings, onSave, onClose]);

  return (
    <Dialog open={isOpen} onOpenChange={handleOpenChange}>
      <DialogContent className="w-[calc(100vw-2rem)] sm:!w-[400px] sm:!max-w-[400px] max-h-[80vh] overflow-y-auto p-0 bg-white border-gray-200">
        {/* 헤더 */}
        <DialogHeader className="sticky top-0 bg-white z-10 px-4 py-3 border-b border-gray-200">
          <div className="flex items-center justify-between">
            <DialogTitle className="text-gray-900 font-medium">항목 설정</DialogTitle>
            <button
              type="button"
              onClick={onClose}
              className="p-1 hover:bg-gray-100 rounded transition-colors"
            >
              <X className="h-5 w-5 text-gray-500" />
            </button>
          </div>
        </DialogHeader>

        <div className="p-4 space-y-3">
          {/* 공지 알림 */}
          <CategorySection
            title="공지 알림"
            enabled={localSettings.notice.enabled}
            onEnabledChange={(enabled) => handleCategoryToggle('notice', enabled)}
          >
            <ItemRow
              label="공지사항 알림"
              checked={localSettings.notice.notice}
              onChange={(checked) => handleItemToggle('notice', 'notice', checked)}
              disabled={!localSettings.notice.enabled}
            />
            <ItemRow
              label="이벤트 알림"
              checked={localSettings.notice.event}
              onChange={(checked) => handleItemToggle('notice', 'event', checked)}
              disabled={!localSettings.notice.enabled}
            />
          </CategorySection>

          {/* 일정 알림 */}
          <CategorySection
            title="일정 알림"
            enabled={localSettings.schedule.enabled}
            onEnabledChange={(enabled) => handleCategoryToggle('schedule', enabled)}
          >
            <ItemRow
              label="부가세 신고 알림"
              checked={localSettings.schedule.vatReport}
              onChange={(checked) => handleItemToggle('schedule', 'vatReport', checked)}
              disabled={!localSettings.schedule.enabled}
            />
            <ItemRow
              label="종합소득세 신고 알림"
              checked={localSettings.schedule.incomeTaxReport}
              onChange={(checked) => handleItemToggle('schedule', 'incomeTaxReport', checked)}
              disabled={!localSettings.schedule.enabled}
            />
          </CategorySection>

          {/* 거래처 알림 */}
          <CategorySection
            title="거래처 알림"
            enabled={localSettings.vendor.enabled}
            onEnabledChange={(enabled) => handleCategoryToggle('vendor', enabled)}
          >
            <ItemRow
              label="신규 업체 등록 알림"
              checked={localSettings.vendor.newVendor}
              onChange={(checked) => handleItemToggle('vendor', 'newVendor', checked)}
              disabled={!localSettings.vendor.enabled}
            />
            <ItemRow
              label="신용등급 알림"
              checked={localSettings.vendor.creditRating}
              onChange={(checked) => handleItemToggle('vendor', 'creditRating', checked)}
              disabled={!localSettings.vendor.enabled}
            />
          </CategorySection>

          {/* 근태 알림 */}
          <CategorySection
            title="근태 알림"
            enabled={localSettings.attendance.enabled}
            onEnabledChange={(enabled) => handleCategoryToggle('attendance', enabled)}
          >
            <ItemRow
              label="연차 알림"
              checked={localSettings.attendance.annualLeave}
              onChange={(checked) => handleItemToggle('attendance', 'annualLeave', checked)}
              disabled={!localSettings.attendance.enabled}
            />
            <ItemRow
              label="출근 알림"
              checked={localSettings.attendance.clockIn}
              onChange={(checked) => handleItemToggle('attendance', 'clockIn', checked)}
              disabled={!localSettings.attendance.enabled}
            />
            <ItemRow
              label="지각 알림"
              checked={localSettings.attendance.late}
              onChange={(checked) => handleItemToggle('attendance', 'late', checked)}
              disabled={!localSettings.attendance.enabled}
            />
            <ItemRow
              label="결근 알림"
              checked={localSettings.attendance.absent}
              onChange={(checked) => handleItemToggle('attendance', 'absent', checked)}
              disabled={!localSettings.attendance.enabled}
            />
          </CategorySection>

          {/* 수주/발주 알림 */}
          <CategorySection
            title="수주/발주 알림"
            enabled={localSettings.order.enabled}
            onEnabledChange={(enabled) => handleCategoryToggle('order', enabled)}
          >
            <ItemRow
              label="수주 알림"
              checked={localSettings.order.salesOrder}
              onChange={(checked) => handleItemToggle('order', 'salesOrder', checked)}
              disabled={!localSettings.order.enabled}
            />
            <ItemRow
              label="발주 알림"
              checked={localSettings.order.purchaseOrder}
              onChange={(checked) => handleItemToggle('order', 'purchaseOrder', checked)}
              disabled={!localSettings.order.enabled}
            />
          </CategorySection>

          {/* 전자결재 알림 */}
          <CategorySection
            title="전자결재 알림"
            enabled={localSettings.approval.enabled}
            onEnabledChange={(enabled) => handleCategoryToggle('approval', enabled)}
          >
            <ItemRow
              label="결재요청 알림"
              checked={localSettings.approval.approvalRequest}
              onChange={(checked) => handleItemToggle('approval', 'approvalRequest', checked)}
              disabled={!localSettings.approval.enabled}
            />
            <ItemRow
              label="기안 > 승인 알림"
              checked={localSettings.approval.draftApproved}
              onChange={(checked) => handleItemToggle('approval', 'draftApproved', checked)}
              disabled={!localSettings.approval.enabled}
            />
            <ItemRow
              label="기안 > 반려 알림"
              checked={localSettings.approval.draftRejected}
              onChange={(checked) => handleItemToggle('approval', 'draftRejected', checked)}
              disabled={!localSettings.approval.enabled}
            />
            <ItemRow
              label="기안 > 완료 알림"
              checked={localSettings.approval.draftCompleted}
              onChange={(checked) => handleItemToggle('approval', 'draftCompleted', checked)}
              disabled={!localSettings.approval.enabled}
            />
          </CategorySection>

          {/* 생산 알림 */}
          <CategorySection
            title="생산 알림"
            enabled={localSettings.production.enabled}
            onEnabledChange={(enabled) => handleCategoryToggle('production', enabled)}
          >
            <ItemRow
              label="안전재고 알림"
              checked={localSettings.production.safetyStock}
              onChange={(checked) => handleItemToggle('production', 'safetyStock', checked)}
              disabled={!localSettings.production.enabled}
            />
            <ItemRow
              label="생산완료 알림"
              checked={localSettings.production.productionComplete}
              onChange={(checked) => handleItemToggle('production', 'productionComplete', checked)}
              disabled={!localSettings.production.enabled}
            />
          </CategorySection>
        </div>

        {/* 하단 버튼 */}
        <div className="sticky bottom-0 bg-white px-4 py-3 border-t border-gray-200 flex justify-center gap-3">
          <Button
            variant="outline"
            onClick={onClose}
            className="bg-gray-100 border-gray-300 text-gray-700 hover:bg-gray-200 min-w-[80px] rounded-full"
          >
            취소
          </Button>
          <Button
            onClick={handleSave}
            className="bg-gray-500 text-white hover:bg-gray-600 min-w-[80px] rounded-full"
          >
            저장
          </Button>
        </div>
      </DialogContent>
    </Dialog>
  );
}