'use client';

/**
 * 공정 등록/수정 폼 컴포넌트 (리디자인)
 *
 * 기획서 스크린샷 1 기준:
 * - 기본 정보: 공정명(자동생성), 공정형, 담당부서, 담당자, 생산일자, 상태
 * - 품목 설정 정보: 품목 선택 팝업 연동
 * - 단계 관리: 단계 등록/수정/삭제 (인라인)
 *
 * 제거된 섹션: 자동분류규칙, 작업정보, 설명
 */

import { useState, useCallback, useEffect, useRef } from 'react';
import { useRouter } from 'next/navigation';
import { Plus, GripVertical, Trash2, Package } from 'lucide-react';
import { IntegratedDetailTemplate } from '@/components/templates/IntegratedDetailTemplate';
import { processCreateConfig, processEditConfig } from './processConfig';
import { Button } from '@/components/ui/button';
import { Input } from '@/components/ui/input';
import { Label } from '@/components/ui/label';
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 { Switch } from '@/components/ui/switch';
import { RuleModal } from './RuleModal';
import { toast } from 'sonner';
import type { Process, ClassificationRule, ProcessType, ProcessStep } from '@/types/process';
import { PROCESS_TYPE_OPTIONS } from '@/types/process';
import {
  createProcess,
  updateProcess,
  getDepartmentOptions,
  getProcessSteps,
  type DepartmentOption,
} from './actions';

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 [manager, setManager] = useState(initialData?.manager || '');
  const [useProductionDate, setUseProductionDate] = useState(
    initialData?.useProductionDate ?? false
  );
  const [isActive, setIsActive] = useState(
    initialData ? initialData.status === '사용중' : true
  );
  const [isLoading, setIsLoading] = useState(false);

  // 품목 분류 규칙 (기존 로직 유지)
  const [classificationRules, setClassificationRules] = useState<ClassificationRule[]>(
    initialData?.classificationRules || []
  );

  // 단계 목록 상태
  const [steps, setSteps] = useState<ProcessStep[]>([]);
  const [isStepsLoading, setIsStepsLoading] = useState(isEdit);

  // 부서 목록 상태
  const [departmentOptions, setDepartmentOptions] = useState<DepartmentOption[]>([]);
  const [isDepartmentsLoading, setIsDepartmentsLoading] = useState(true);

  // 품목 선택 모달 상태
  const [ruleModalOpen, setRuleModalOpen] = useState(false);
  const [editingRule, setEditingRule] = useState<ClassificationRule | undefined>(undefined);

  // 드래그 상태
  const [dragIndex, setDragIndex] = useState<number | null>(null);
  const [dragOverIndex, setDragOverIndex] = useState<number | null>(null);

  // 품목 개수 계산
  const itemCount = classificationRules
    .filter((r) => r.registrationType === 'individual')
    .reduce((sum, r) => sum + (r.items?.length || 0), 0);

  // 부서 목록 + 단계 목록 로드
  useEffect(() => {
    const loadDepartments = async () => {
      setIsDepartmentsLoading(true);
      const departments = await getDepartmentOptions();
      setDepartmentOptions(departments);
      setIsDepartmentsLoading(false);
    };
    loadDepartments();
  }, []);

  useEffect(() => {
    if (isEdit && initialData?.id) {
      const loadSteps = async () => {
        setIsStepsLoading(true);
        const result = await getProcessSteps(initialData.id);
        if (result.success && result.data) {
          setSteps(result.data);
        }
        setIsStepsLoading(false);
      };
      loadSteps();
    }
  }, [isEdit, initialData?.id]);

  // 품목 규칙 추가/수정
  const handleSaveRule = useCallback(
    (ruleData: Omit<ClassificationRule, 'id' | 'createdAt'>) => {
      if (editingRule) {
        setClassificationRules((prev) =>
          prev.map((r) => (r.id === editingRule.id ? { ...r, ...ruleData } : r))
        );
      } else {
        const newRule: ClassificationRule = {
          ...ruleData,
          id: `rule-${Date.now()}`,
          createdAt: new Date().toISOString(),
        };
        setClassificationRules((prev) => [...prev, newRule]);
      }
      setEditingRule(undefined);
    },
    [editingRule]
  );

  const handleModalClose = useCallback((open: boolean) => {
    setRuleModalOpen(open);
    if (!open) {
      setEditingRule(undefined);
    }
  }, []);

  // 단계 삭제
  const handleDeleteStep = useCallback((stepId: string) => {
    setSteps((prev) => prev.filter((s) => s.id !== stepId));
  }, []);

  // 단계 상세 이동
  const handleStepClick = (stepId: string) => {
    if (isEdit && initialData?.id) {
      router.push(`/ko/master-data/process-management/${initialData.id}/steps/${stepId}`);
    }
  };

  // 단계 등록 이동
  const handleAddStep = () => {
    if (isEdit && initialData?.id) {
      router.push(`/ko/master-data/process-management/${initialData.id}/steps/new`);
    } else {
      toast.info('공정을 먼저 등록한 후 단계를 추가할 수 있습니다.');
    }
  };

  // 드래그&드롭
  const dragNodeRef = useRef<HTMLElement | null>(null);

  const handleDragStart = useCallback((e: React.DragEvent<HTMLTableRowElement>, index: number) => {
    setDragIndex(index);
    dragNodeRef.current = e.currentTarget;
    e.dataTransfer.effectAllowed = 'move';
    requestAnimationFrame(() => {
      if (dragNodeRef.current) {
        dragNodeRef.current.style.opacity = '0.4';
      }
    });
  }, []);

  const handleDragOver = useCallback((e: React.DragEvent<HTMLTableRowElement>, index: number) => {
    e.preventDefault();
    e.dataTransfer.dropEffect = 'move';
    setDragOverIndex(index);
  }, []);

  const handleDragEnd = useCallback(() => {
    if (dragNodeRef.current) {
      dragNodeRef.current.style.opacity = '1';
    }
    dragNodeRef.current = null;
    setDragIndex(null);
    setDragOverIndex(null);
  }, []);

  const handleDrop = useCallback(
    (e: React.DragEvent<HTMLTableRowElement>, dropIndex: number) => {
      e.preventDefault();
      if (dragIndex === null || dragIndex === dropIndex) {
        handleDragEnd();
        return;
      }

      setSteps((prev) => {
        const updated = [...prev];
        const [moved] = updated.splice(dragIndex, 1);
        updated.splice(dropIndex, 0, moved);
        return updated.map((step, i) => ({ ...step, order: i + 1 }));
      });

      handleDragEnd();
    },
    [dragIndex, handleDragEnd]
  );

  // 제출
  const handleSubmit = async (): Promise<{ success: boolean; error?: string }> => {
    if (!processName.trim()) {
      toast.error('공정명을 입력해주세요.');
      return { success: false, error: '공정명을 입력해주세요.' };
    }
    if (!department) {
      toast.error('담당부서를 선택해주세요.');
      return { success: false, error: '담당부서를 선택해주세요.' };
    }

    const formData = {
      processName: processName.trim(),
      processType,
      department,
      classificationRules: classificationRules.map((rule) => ({
        registrationType: rule.registrationType,
        ruleType: rule.ruleType,
        matchingType: rule.matchingType,
        conditionValue: rule.conditionValue,
        priority: rule.priority,
        description: rule.description,
        isActive: rule.isActive,
      })),
      requiredWorkers: 1,
      workSteps: '',
      isActive,
    };

    setIsLoading(true);
    try {
      if (isEdit && initialData?.id) {
        const result = await updateProcess(initialData.id, formData);
        if (result.success) {
          toast.success('공정이 수정되었습니다.');
          router.push('/ko/master-data/process-management');
          return { success: true };
        } else {
          toast.error(result.error || '수정에 실패했습니다.');
          return { success: false, error: result.error };
        }
      } else {
        const result = await createProcess(formData);
        if (result.success) {
          toast.success('공정이 등록되었습니다.');
          router.push('/ko/master-data/process-management');
          return { success: true };
        } else {
          toast.error(result.error || '등록에 실패했습니다.');
          return { success: false, error: result.error };
        }
      }
    } catch {
      toast.error('처리 중 오류가 발생했습니다.');
      return { success: false, error: '처리 중 오류가 발생했습니다.' };
    } finally {
      setIsLoading(false);
    }
  };

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

  // ===== 폼 콘텐츠 렌더링 =====
  const renderFormContent = useCallback(
    () => (
      <>
        <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 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-6 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}
                    disabled={isDepartmentsLoading}
                  >
                    <SelectTrigger>
                      <SelectValue
                        placeholder={isDepartmentsLoading ? '로딩 중...' : '선택하세요'}
                      />
                    </SelectTrigger>
                    <SelectContent>
                      {departmentOptions.map((opt) => (
                        <SelectItem key={opt.id} value={opt.value}>
                          {opt.label}
                        </SelectItem>
                      ))}
                    </SelectContent>
                  </Select>
                </div>
                <div className="space-y-2">
                  <Label>담당자</Label>
                  <Input
                    value={manager}
                    onChange={(e) => setManager(e.target.value)}
                    placeholder="담당자명"
                  />
                </div>
                <div className="space-y-2">
                  <Label>생산일자</Label>
                  <div className="flex items-center gap-2 h-10">
                    <Switch
                      checked={useProductionDate}
                      onCheckedChange={setUseProductionDate}
                    />
                    <span className="text-sm text-muted-foreground">
                      {useProductionDate ? '사용' : '미사용'}
                    </span>
                  </div>
                </div>
                <div className="space-y-2">
                  <Label>상태</Label>
                  <Select
                    value={isActive ? '사용중' : '미사용'}
                    onValueChange={(v) => setIsActive(v === '사용중')}
                  >
                    <SelectTrigger>
                      <SelectValue />
                    </SelectTrigger>
                    <SelectContent>
                      <SelectItem value="사용중">사용중</SelectItem>
                      <SelectItem value="미사용">미사용</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 flex items-center gap-2">
                    <Package className="h-4 w-4" />
                    품목 설정 정보
                  </CardTitle>
                  <p className="text-sm text-muted-foreground mt-1">
                    품목을 선택하면 이 공정으로 분류됩니다
                  </p>
                </div>
                <div className="flex items-center gap-3">
                  <Badge variant="outline" className="text-sm">
                    {itemCount}개
                  </Badge>
                  <Button
                    type="button"
                    variant="outline"
                    size="sm"
                    onClick={() => setRuleModalOpen(true)}
                  >
                    품목 선택
                  </Button>
                </div>
              </div>
            </CardHeader>
          </Card>

          {/* 단계 테이블 */}
          <Card>
            <CardHeader className="bg-muted/50">
              <div className="flex items-center justify-between">
                <CardTitle className="text-base">
                  단계
                  {!isStepsLoading && (
                    <span className="text-sm font-normal text-muted-foreground ml-2">
                      총 {steps.length}건
                    </span>
                  )}
                </CardTitle>
                <Button type="button" size="sm" onClick={handleAddStep}>
                  <Plus className="h-4 w-4 mr-1" />
                  단계 등록
                </Button>
              </div>
            </CardHeader>
            <CardContent className="p-0">
              {isStepsLoading ? (
                <div className="p-8 text-center text-muted-foreground">로딩 중...</div>
              ) : steps.length === 0 ? (
                <div className="p-8 text-center text-muted-foreground">
                  {isEdit
                    ? '등록된 단계가 없습니다. [단계 등록] 버튼으로 추가해주세요.'
                    : '공정을 먼저 등록한 후 단계를 추가할 수 있습니다.'}
                </div>
              ) : (
                <div className="overflow-x-auto">
                  <table className="w-full">
                    <thead>
                      <tr className="border-b bg-muted/30">
                        <th className="w-10 px-3 py-3" />
                        <th className="w-14 px-3 py-3 text-center text-xs font-medium text-muted-foreground">
                          No.
                        </th>
                        <th className="px-3 py-3 text-left text-xs font-medium text-muted-foreground">
                          단계코드
                        </th>
                        <th className="px-3 py-3 text-left text-xs font-medium text-muted-foreground">
                          단계명
                        </th>
                        <th className="w-20 px-3 py-3 text-center text-xs font-medium text-muted-foreground">
                          필수여부
                        </th>
                        <th className="w-20 px-3 py-3 text-center text-xs font-medium text-muted-foreground">
                          승인여부
                        </th>
                        <th className="w-20 px-3 py-3 text-center text-xs font-medium text-muted-foreground">
                          검사여부
                        </th>
                        <th className="w-16 px-3 py-3 text-center text-xs font-medium text-muted-foreground">
                          사용
                        </th>
                        <th className="w-12 px-3 py-3" />
                      </tr>
                    </thead>
                    <tbody>
                      {steps.map((step, index) => (
                        <tr
                          key={step.id}
                          draggable
                          onDragStart={(e) => handleDragStart(e, index)}
                          onDragOver={(e) => handleDragOver(e, index)}
                          onDragEnd={handleDragEnd}
                          onDrop={(e) => handleDrop(e, index)}
                          onClick={() => handleStepClick(step.id)}
                          className={`border-b cursor-pointer transition-colors hover:bg-muted/50 ${
                            dragOverIndex === index && dragIndex !== index
                              ? 'border-t-2 border-t-primary'
                              : ''
                          }`}
                        >
                          <td
                            className="w-10 px-3 py-3 text-center cursor-grab active:cursor-grabbing"
                            onClick={(e) => e.stopPropagation()}
                          >
                            <GripVertical className="h-4 w-4 text-muted-foreground mx-auto" />
                          </td>
                          <td className="w-14 px-3 py-3 text-center text-sm text-muted-foreground">
                            {index + 1}
                          </td>
                          <td className="px-3 py-3 text-sm font-mono">{step.stepCode}</td>
                          <td className="px-3 py-3 text-sm font-medium">{step.stepName}</td>
                          <td className="w-20 px-3 py-3 text-center">
                            <Badge
                              variant={step.isRequired ? 'default' : 'outline'}
                              className="text-xs"
                            >
                              {step.isRequired ? 'Y' : 'N'}
                            </Badge>
                          </td>
                          <td className="w-20 px-3 py-3 text-center">
                            <Badge
                              variant={step.needsApproval ? 'default' : 'outline'}
                              className="text-xs"
                            >
                              {step.needsApproval ? 'Y' : 'N'}
                            </Badge>
                          </td>
                          <td className="w-20 px-3 py-3 text-center">
                            <Badge
                              variant={step.needsInspection ? 'default' : 'outline'}
                              className="text-xs"
                            >
                              {step.needsInspection ? 'Y' : 'N'}
                            </Badge>
                          </td>
                          <td className="w-16 px-3 py-3 text-center">
                            <Badge
                              variant={step.isActive ? 'default' : 'secondary'}
                              className="text-xs"
                            >
                              {step.isActive ? 'Y' : 'N'}
                            </Badge>
                          </td>
                          <td className="w-12 px-3 py-3 text-center">
                            <Button
                              type="button"
                              variant="ghost"
                              size="icon"
                              className="h-7 w-7 text-muted-foreground hover:text-destructive"
                              onClick={(e) => {
                                e.stopPropagation();
                                handleDeleteStep(step.id);
                              }}
                            >
                              <Trash2 className="h-3.5 w-3.5" />
                            </Button>
                          </td>
                        </tr>
                      ))}
                    </tbody>
                  </table>
                </div>
              )}
            </CardContent>
          </Card>
        </div>

        {/* 품목 선택 모달 */}
        <RuleModal
          open={ruleModalOpen}
          onOpenChange={handleModalClose}
          onAdd={handleSaveRule}
          editRule={editingRule}
        />
      </>
    ),
    [
      processName,
      processType,
      department,
      manager,
      useProductionDate,
      isActive,
      classificationRules,
      steps,
      isStepsLoading,
      ruleModalOpen,
      editingRule,
      departmentOptions,
      isDepartmentsLoading,
      itemCount,
      dragIndex,
      dragOverIndex,
      handleSaveRule,
      handleModalClose,
      handleDeleteStep,
      handleAddStep,
      handleStepClick,
      handleDragStart,
      handleDragOver,
      handleDragEnd,
      handleDrop,
      isEdit,
      initialData?.id,
    ]
  );

  const config = isEdit ? processEditConfig : processCreateConfig;

  return (
    <IntegratedDetailTemplate
      config={config}
      mode={isEdit ? 'edit' : 'create'}
      isLoading={isDepartmentsLoading}
      onCancel={handleCancel}
      onSubmit={handleSubmit}
      renderForm={renderFormContent}
    />
  );
}