sam-react-prod/src/components/process-management/ProcessForm.tsx

'use client';

import { useState, useCallback } from 'react';
import { useRouter } from 'next/navigation';
import { X, Save, Plus, Wrench, Trash2 } from 'lucide-react';
import { Button } from '@/components/ui/button';
import { Input } from '@/components/ui/input';
import { Label } from '@/components/ui/label';
import { Textarea } from '@/components/ui/textarea';
import { Checkbox } from '@/components/ui/checkbox';
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
import { Badge } from '@/components/ui/badge';
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from '@/components/ui/select';
import { PageLayout } from '@/components/organisms/PageLayout';
import { RuleModal } from './RuleModal';
import type { Process, ClassificationRule, ProcessType } from '@/types/process';
import { PROCESS_TYPE_OPTIONS, MATCHING_TYPE_OPTIONS } from '@/types/process';

// Mock 담당부서 옵션
const DEPARTMENT_OPTIONS = [
  { value: '스크린생산부서', label: '스크린생산부서' },
  { value: '절곡생산부서', label: '절곡생산부서' },
  { value: '슬랫생산부서', label: '슬랫생산부서' },
  { value: '품질관리부서', label: '품질관리부서' },
  { value: '포장/출하부서', label: '포장/출하부서' },
];

// Mock 작업일지 양식 옵션
const WORK_LOG_OPTIONS = [
  { value: '스크린 작업일지', label: '스크린 작업일지' },
  { value: '절곡 작업일지', label: '절곡 작업일지' },
  { value: '슬랫 작업일지', label: '슬랫 작업일지' },
  { value: '재고생산 작업일지', label: '재고생산 작업일지' },
  { value: '포장 작업일지', label: '포장 작업일지' },
];

interface ProcessFormProps {
  mode: 'create' | 'edit';
  initialData?: Process;
}

export function ProcessForm({ mode, initialData }: ProcessFormProps) {
  const router = useRouter();
  const isEdit = mode === 'edit';

  // 폼 상태
  const [processName, setProcessName] = useState(initialData?.processName || '');
  const [processType, setProcessType] = useState<ProcessType>(
    initialData?.processType || '생산'
  );
  const [department, setDepartment] = useState(initialData?.department || '');
  const [workLogTemplate, setWorkLogTemplate] = useState(
    initialData?.workLogTemplate || ''
  );
  const [classificationRules, setClassificationRules] = useState<ClassificationRule[]>(
    initialData?.classificationRules || []
  );
  const [requiredWorkers, setRequiredWorkers] = useState(
    initialData?.requiredWorkers || 1
  );
  const [equipmentInfo, setEquipmentInfo] = useState(initialData?.equipmentInfo || '');
  const [workSteps, setWorkSteps] = useState(initialData?.workSteps?.join(', ') || '');
  const [note, setNote] = useState(initialData?.note || '');
  const [isActive, setIsActive] = useState(initialData?.status === '사용중' ?? true);

  // 규칙 모달 상태
  const [ruleModalOpen, setRuleModalOpen] = useState(false);

  // 규칙 추가
  const handleAddRule = useCallback(
    (ruleData: Omit<ClassificationRule, 'id' | 'createdAt'>) => {
      const newRule: ClassificationRule = {
        ...ruleData,
        id: `rule-${Date.now()}`,
        createdAt: new Date().toISOString(),
      };
      setClassificationRules((prev) => [...prev, newRule]);
    },
    []
  );

  // 규칙 삭제
  const handleDeleteRule = useCallback((ruleId: string) => {
    setClassificationRules((prev) => prev.filter((r) => r.id !== ruleId));
  }, []);

  // 제출
  const handleSubmit = () => {
    if (!processName.trim()) {
      alert('공정명을 입력해주세요.');
      return;
    }
    if (!department) {
      alert('담당부서를 선택해주세요.');
      return;
    }

    const formData = {
      processName: processName.trim(),
      processType,
      department,
      workLogTemplate: workLogTemplate || undefined,
      classificationRules,
      requiredWorkers,
      equipmentInfo: equipmentInfo.trim() || undefined,
      workSteps: workSteps
        .split(',')
        .map((s) => s.trim())
        .filter(Boolean),
      note: note.trim() || undefined,
      isActive,
    };

    console.log(isEdit ? '공정 수정 데이터:' : '공정 등록 데이터:', formData);
    alert(`공정이 ${isEdit ? '수정' : '등록'}되었습니다.`);
    router.push('/ko/master-data/process-management');
  };

  // 취소
  const handleCancel = () => {
    router.back();
  };

  return (
    <PageLayout>
      {/* 헤더 */}
      <div className="flex items-center justify-between mb-6">
        <h1 className="text-xl font-semibold">공정 {isEdit ? '수정' : '등록'}</h1>
        <div className="flex gap-2">
          <Button variant="outline" onClick={handleCancel}>
            <X className="h-4 w-4 mr-2" />
            취소
          </Button>
          <Button onClick={handleSubmit}>
            <Save className="h-4 w-4 mr-2" />
            {isEdit ? '수정' : '등록'}
          </Button>
        </div>
      </div>

      <div className="space-y-6">
        {/* 기본 정보 */}
        <Card>
          <CardHeader className="bg-muted/50">
            <CardTitle className="text-base">기본 정보</CardTitle>
          </CardHeader>
          <CardContent className="pt-6">
            <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
              <div className="space-y-2">
                <Label htmlFor="processName">공정명 *</Label>
                <Input
                  id="processName"
                  value={processName}
                  onChange={(e) => setProcessName(e.target.value)}
                  placeholder="예: 스크린"
                />
              </div>
              <div className="space-y-2">
                <Label>공정구분</Label>
                <Select
                  value={processType}
                  onValueChange={(v) => setProcessType(v as ProcessType)}
                >
                  <SelectTrigger>
                    <SelectValue />
                  </SelectTrigger>
                  <SelectContent>
                    {PROCESS_TYPE_OPTIONS.map((opt) => (
                      <SelectItem key={opt.value} value={opt.value}>
                        {opt.label}
                      </SelectItem>
                    ))}
                  </SelectContent>
                </Select>
              </div>
              <div className="space-y-2">
                <Label>담당부서 *</Label>
                <Select value={department} onValueChange={setDepartment}>
                  <SelectTrigger>
                    <SelectValue placeholder="선택하세요" />
                  </SelectTrigger>
                  <SelectContent>
                    {DEPARTMENT_OPTIONS.map((opt) => (
                      <SelectItem key={opt.value} value={opt.value}>
                        {opt.label}
                      </SelectItem>
                    ))}
                  </SelectContent>
                </Select>
              </div>
              <div className="space-y-2">
                <Label>작업일지 양식</Label>
                <Select value={workLogTemplate} onValueChange={setWorkLogTemplate}>
                  <SelectTrigger>
                    <SelectValue placeholder="선택하세요" />
                  </SelectTrigger>
                  <SelectContent>
                    {WORK_LOG_OPTIONS.map((opt) => (
                      <SelectItem key={opt.value} value={opt.value}>
                        {opt.label}
                      </SelectItem>
                    ))}
                  </SelectContent>
                </Select>
              </div>
            </div>
          </CardContent>
        </Card>

        {/* 자동 분류 규칙 */}
        <Card>
          <CardHeader className="bg-muted/50">
            <div className="flex items-center justify-between">
              <div>
                <CardTitle className="text-base">자동 분류 규칙</CardTitle>
                <p className="text-sm text-muted-foreground mt-1">
                  품목이 이 공정에 이동으로 분류되는 규칙을 생성합니다.
                </p>
              </div>
              <Button onClick={() => setRuleModalOpen(true)}>
                <Plus className="h-4 w-4 mr-2" />
                규칙 추가
              </Button>
            </div>
          </CardHeader>
          <CardContent className="pt-6">
            {classificationRules.length === 0 ? (
              <div className="text-center py-12 text-muted-foreground">
                <Wrench className="h-12 w-12 mx-auto mb-4 opacity-30" />
                <p className="font-medium">품목별 규칙이 없습니다</p>
                <p className="text-sm mt-1">
                  규칙을 추가하면 해당 패턴의 품목이 이 공정으로 분류됩니다
                </p>
              </div>
            ) : (
              <div className="space-y-3">
                {classificationRules.map((rule) => (
                  <div
                    key={rule.id}
                    className="flex items-center justify-between p-4 border rounded-lg"
                  >
                    <div className="flex items-center gap-4">
                      <Badge variant={rule.isActive ? 'default' : 'secondary'}>
                        {rule.isActive ? '활성' : '비활성'}
                      </Badge>
                      <div>
                        <div className="font-medium">
                          {rule.ruleType}{' '}
                          {
                            MATCHING_TYPE_OPTIONS.find(
                              (o) => o.value === rule.matchingType
                            )?.label
                          }{' '}
                          "{rule.conditionValue}"
                        </div>
                        {rule.description && (
                          <div className="text-sm text-muted-foreground">
                            {rule.description}
                          </div>
                        )}
                      </div>
                    </div>
                    <div className="flex items-center gap-2">
                      <Badge variant="outline">우선순위: {rule.priority}</Badge>
                      <Button
                        variant="ghost"
                        size="sm"
                        onClick={() => handleDeleteRule(rule.id)}
                        className="text-destructive hover:text-destructive"
                      >
                        <Trash2 className="h-4 w-4" />
                      </Button>
                    </div>
                  </div>
                ))}
              </div>
            )}
          </CardContent>
        </Card>

        {/* 작업 정보 */}
        <Card>
          <CardHeader className="bg-muted/50">
            <CardTitle className="text-base">작업 정보</CardTitle>
          </CardHeader>
          <CardContent className="pt-6 space-y-6">
            <div className="space-y-2">
              <Label>필요인원</Label>
              <Input
                type="number"
                value={requiredWorkers}
                onChange={(e) => setRequiredWorkers(Number(e.target.value))}
                min={1}
                className="w-32"
              />
            </div>
            <div className="space-y-2">
              <Label>설비정보</Label>
              <Input
                value={equipmentInfo}
                onChange={(e) => setEquipmentInfo(e.target.value)}
                placeholder="예: 미싱기 3대, 절단기 1대"
              />
            </div>
            <div className="space-y-2">
              <Label>세부 작업단계 (쉼표로 구분)</Label>
              <Input
                value={workSteps}
                onChange={(e) => setWorkSteps(e.target.value)}
                placeholder="예: 원단절단, 미싱, 핸드작업, 중간검사, 포장"
              />
            </div>
          </CardContent>
        </Card>

        {/* 설명 */}
        <Card>
          <CardHeader className="bg-muted/50">
            <CardTitle className="text-base">설명</CardTitle>
          </CardHeader>
          <CardContent className="pt-6 space-y-6">
            <div className="space-y-2">
              <Label>설명</Label>
              <Textarea
                value={note}
                onChange={(e) => setNote(e.target.value)}
                placeholder="공정에 대한 설명"
                rows={4}
              />
            </div>
            <div className="flex items-center gap-2">
              <Checkbox
                id="isActive"
                checked={isActive}
                onCheckedChange={(checked) => setIsActive(checked as boolean)}
              />
              <Label htmlFor="isActive" className="font-normal">
                사용함
              </Label>
            </div>
          </CardContent>
        </Card>
      </div>

      {/* 규칙 추가 모달 */}
      <RuleModal
        open={ruleModalOpen}
        onOpenChange={setRuleModalOpen}
        onAdd={handleAddRule}
      />
    </PageLayout>
  );
}