"use client";

import React from "react";
import { Label } from "@/components/ui/label";
import { Input } from "@/components/ui/input";
import { Switch } from "@/components/ui/switch";
import { Separator } from "@/components/ui/separator";
import { Textarea } from "@/components/ui/textarea";

interface ShippingPlanEditorConfigPanelProps {
  config: any;
  onChange: (config: any) => void;
}

export const ShippingPlanEditorConfigPanel: React.FC<
  ShippingPlanEditorConfigPanelProps
> = ({ config, onChange }) => {
  const handleChange = (key: string, value: any) => {
    onChange({ ...config, [key]: value });
  };

  const handleSummaryCardToggle = (cardKey: string, checked: boolean) => {
    onChange({
      ...config,
      visibleSummaryCards: {
        ...(config.visibleSummaryCards || defaultSummaryCards),
        [cardKey]: checked,
      },
    });
  };

  const defaultSummaryCards = {
    totalBalance: true,
    totalPlanQty: true,
    currentStock: true,
    availableStock: true,
    inProductionQty: true,
  };

  const summaryCards = config.visibleSummaryCards || defaultSummaryCards;

  const summaryCardLabels: Record<string, string> = {
    totalBalance: "총수주잔량",
    totalPlanQty: "총출하계획량",
    currentStock: "현재고",
    availableStock: "가용재고",
    inProductionQty: "생산중수량",
  };

  return (
    <div className="space-y-4 p-4">
      {/* 기본 설정 */}
      <div className="text-sm font-semibold text-muted-foreground">
        기본 설정
      </div>

      <div className="space-y-2">
        <Label className="text-xs">제목</Label>
        <Input
          value={config.title || "출하계획 등록"}
          onChange={(e) => handleChange("title", e.target.value)}
          placeholder="출하계획 등록"
          className="h-8 text-xs"
        />
      </div>

      <Separator />

      {/* 표시 설정 */}
      <div className="text-sm font-semibold text-muted-foreground">
        표시 설정
      </div>

      <div className="flex items-center justify-between">
        <Label className="text-xs">집계 카드 표시</Label>
        <Switch
          checked={config.showSummaryCards !== false}
          onCheckedChange={(checked) =>
            handleChange("showSummaryCards", checked)
          }
        />
      </div>

      <div className="flex items-center justify-between">
        <Label className="text-xs">기존 계획 표시</Label>
        <Switch
          checked={config.showExistingPlans !== false}
          onCheckedChange={(checked) =>
            handleChange("showExistingPlans", checked)
          }
        />
      </div>

      {config.showSummaryCards !== false && (
        <>
          <Separator />
          <div className="text-sm font-semibold text-muted-foreground">
            집계 카드 항목
          </div>
          <div className="space-y-2">
            {Object.entries(summaryCardLabels).map(([key, label]) => (
              <div key={key} className="flex items-center justify-between">
                <Label className="text-xs">{label}</Label>
                <Switch
                  checked={summaryCards[key] !== false}
                  onCheckedChange={(checked) =>
                    handleSummaryCardToggle(key, checked)
                  }
                />
              </div>
            ))}
          </div>
        </>
      )}

      <Separator />

      {/* 저장 설정 */}
      <div className="text-sm font-semibold text-muted-foreground">
        저장 설정
      </div>

      <div className="flex items-center justify-between">
        <Label className="text-xs">잔량 초과 허용</Label>
        <Switch
          checked={config.allowOverPlan === true}
          onCheckedChange={(checked) =>
            handleChange("allowOverPlan", checked)
          }
        />
      </div>

      <div className="flex items-center justify-between">
        <Label className="text-xs">저장 후 자동 닫기</Label>
        <Switch
          checked={config.autoCloseOnSave !== false}
          onCheckedChange={(checked) =>
            handleChange("autoCloseOnSave", checked)
          }
        />
      </div>

      <div className="flex items-center justify-between">
        <Label className="text-xs">저장 전 확인</Label>
        <Switch
          checked={config.confirmBeforeSave === true}
          onCheckedChange={(checked) =>
            handleChange("confirmBeforeSave", checked)
          }
        />
      </div>

      {config.confirmBeforeSave && (
        <div className="space-y-2">
          <Label className="text-xs">확인 메시지</Label>
          <Textarea
            value={config.confirmMessage || "출하계획을 저장하시겠습니까?"}
            onChange={(e) => handleChange("confirmMessage", e.target.value)}
            placeholder="출하계획을 저장하시겠습니까?"
            className="min-h-[60px] text-xs"
          />
        </div>
      )}
    </div>
  );
};