'use client';

/**
 * 작업지시 등록 페이지
 */

import { useState } from 'react';
import { useRouter } from 'next/navigation';
import { ArrowLeft, FileText, X, Edit2 } 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 { RadioGroup, RadioGroupItem } from '@/components/ui/radio-group';
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from '@/components/ui/select';
import { Alert, AlertDescription } from '@/components/ui/alert';
import { PageLayout } from '@/components/organisms/PageLayout';
import { SalesOrderSelectModal } from './SalesOrderSelectModal';
import { AssigneeSelectModal } from './AssigneeSelectModal';
import { PROCESS_TYPE_LABELS, type ProcessType, type SalesOrder } from './types';

// Validation 에러 타입
interface ValidationErrors {
  [key: string]: string;
}

// 필드명 매핑
const FIELD_NAME_MAP: Record<string, string> = {
  selectedOrder: '수주',
  client: '발주처',
  projectName: '현장명',
  shipmentDate: '출고예정일',
};

type RegistrationMode = 'linked' | 'manual';

interface FormData {
  // 수주 정보
  selectedOrder: SalesOrder | null;
  splitOption: 'all' | 'partial';

  // 기본 정보
  client: string;
  projectName: string;
  orderNo: string;
  itemCount: number;

  // 작업지시 정보
  processType: ProcessType;
  shipmentDate: string;
  priority: number;
  assignees: string[];

  // 비고
  note: string;
}

const initialFormData: FormData = {
  selectedOrder: null,
  splitOption: 'all',
  client: '',
  projectName: '',
  orderNo: '',
  itemCount: 0,
  processType: 'screen',
  shipmentDate: '',
  priority: 5,
  assignees: [],
  note: '',
};

export function WorkOrderCreate() {
  const router = useRouter();
  const [mode, setMode] = useState<RegistrationMode>('linked');
  const [formData, setFormData] = useState<FormData>(initialFormData);
  const [isModalOpen, setIsModalOpen] = useState(false);
  const [isAssigneeModalOpen, setIsAssigneeModalOpen] = useState(false);
  const [assigneeNames, setAssigneeNames] = useState<string[]>([]);
  const [validationErrors, setValidationErrors] = useState<ValidationErrors>({});

  // 수주 선택 핸들러
  const handleSelectOrder = (order: SalesOrder) => {
    setFormData({
      ...formData,
      selectedOrder: order,
      client: order.client,
      projectName: order.projectName,
      orderNo: order.orderNo,
      itemCount: order.itemCount,
    });
  };

  // 수주 해제
  const handleClearOrder = () => {
    setFormData({
      ...initialFormData,
      processType: formData.processType,
      shipmentDate: formData.shipmentDate,
      priority: formData.priority,
    });
  };

  // 폼 제출
  const handleSubmit = () => {
    // Validation 체크
    const errors: ValidationErrors = {};

    if (mode === 'linked') {
      if (!formData.selectedOrder) {
        errors.selectedOrder = '수주를 선택해주세요';
      }
    } else {
      if (!formData.client) {
        errors.client = '발주처를 입력해주세요';
      }
      if (!formData.projectName) {
        errors.projectName = '현장명을 입력해주세요';
      }
    }

    if (!formData.shipmentDate) {
      errors.shipmentDate = '출고예정일을 선택해주세요';
    }

    // 에러가 있으면 상태 업데이트 후 리턴
    if (Object.keys(errors).length > 0) {
      setValidationErrors(errors);
      // 페이지 상단으로 스크롤
      window.scrollTo({ top: 0, behavior: 'smooth' });
      return;
    }

    // 에러 초기화
    setValidationErrors({});

    // TODO: API 호출
    console.log('Submit:', formData);
    router.push('/production/work-orders');
  };

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

  // 공정 코드 표시
  const getProcessCode = (type: ProcessType) => {
    const codes: Record<ProcessType, string> = {
      screen: 'P-001 | 작업일지: WL-SCR',
      slat: 'P-002 | 작업일지: WL-SLT',
      bending: 'P-003 | 작업일지: WL-FLD',
    };
    return codes[type];
  };

  return (
    <PageLayout>
      {/* 헤더 */}
      <div className="flex items-center justify-between mb-6">
        <div className="flex items-center gap-3">
          <Button variant="ghost" size="icon" onClick={handleCancel}>
            <ArrowLeft className="w-5 h-5" />
          </Button>
          <h1 className="text-2xl font-bold flex items-center gap-2">
            <FileText className="w-5 h-5" />
            작업지시 등록
          </h1>
        </div>
        <div className="flex items-center gap-2">
          <Button variant="outline" onClick={handleCancel}>
            취소
          </Button>
          <Button onClick={handleSubmit}>
            등록
          </Button>
        </div>
      </div>

      <div className="space-y-6">
        {/* Validation 에러 표시 */}
        {Object.keys(validationErrors).length > 0 && (
          <Alert className="bg-red-50 border-red-200">
            <AlertDescription className="text-red-900">
              <div className="flex items-start gap-2">
                <span className="text-lg">⚠️</span>
                <div className="flex-1">
                  <strong className="block mb-2">
                    입력 내용을 확인해주세요 ({Object.keys(validationErrors).length}개 오류)
                  </strong>
                  <ul className="space-y-1 text-sm">
                    {Object.entries(validationErrors).map(([field, message]) => {
                      const fieldName = FIELD_NAME_MAP[field] || field;
                      return (
                        <li key={field} className="flex items-start gap-1">
                          <span>•</span>
                          <span>
                            <strong>{fieldName}</strong>: {message}
                          </span>
                        </li>
                      );
                    })}
                  </ul>
                </div>
              </div>
            </AlertDescription>
          </Alert>
        )}

        {/* 등록 방식 */}
        <section className="bg-white border rounded-lg p-6">
          <h3 className="font-semibold mb-4">등록 방식</h3>
          <RadioGroup
            value={mode}
            onValueChange={(value) => setMode(value as RegistrationMode)}
            className="flex gap-6"
          >
            <div className="flex items-center space-x-2">
              <RadioGroupItem value="linked" id="linked" />
              <Label htmlFor="linked" className="cursor-pointer">
                수주 연동 등록{' '}
                <span className="text-muted-foreground text-sm">
                  (회계확인 완료된 수주에서 불러오기)
                </span>
              </Label>
            </div>
            <div className="flex items-center space-x-2">
              <RadioGroupItem value="manual" id="manual" />
              <Label htmlFor="manual" className="cursor-pointer">
                수동 등록{' '}
                <span className="text-muted-foreground text-sm">
                  (수주 없이 직접 입력)
                </span>
              </Label>
            </div>
          </RadioGroup>
        </section>

        {/* 수주 정보 (연동 모드) */}
        {mode === 'linked' && (
          <section className="bg-muted/30 border rounded-lg p-6">
            <h3 className="font-semibold mb-4">수주 정보</h3>
            {!formData.selectedOrder ? (
              <div className="flex items-center justify-between p-4 bg-white border rounded-lg">
                <div className="flex items-center gap-3">
                  <FileText className="w-5 h-5 text-muted-foreground" />
                  <div>
                    <p className="font-medium">수주에서 불러오기</p>
                    <p className="text-sm text-muted-foreground">
                      회계확인 완료된 수주를 선택하면 정보가 자동으로 채워집니다
                    </p>
                  </div>
                </div>
                <Button variant="outline" onClick={() => setIsModalOpen(true)}>
                  <FileText className="w-4 h-4 mr-1.5" />
                  수주 선택
                </Button>
              </div>
            ) : (
              <div className="p-4 bg-white border rounded-lg">
                <div className="flex items-start justify-between mb-4">
                  <div>
                    <div className="flex items-center gap-2 mb-1">
                      <span className="font-semibold">{formData.selectedOrder.orderNo}</span>
                      <span className="text-sm text-muted-foreground">
                        {formData.selectedOrder.status}에서 불러옴
                      </span>
                    </div>
                    <p className="text-sm text-muted-foreground">
                      {formData.selectedOrder.client} / {formData.selectedOrder.projectName} / {formData.selectedOrder.itemCount}개 품목
                    </p>
                  </div>
                  <div className="flex items-center gap-2">
                    <Button variant="ghost" size="sm" onClick={handleClearOrder}>
                      <X className="w-4 h-4 mr-1" />
                      해제
                    </Button>
                    <Button variant="outline" size="sm" onClick={() => setIsModalOpen(true)}>
                      <Edit2 className="w-4 h-4 mr-1" />
                      변경
                    </Button>
                  </div>
                </div>

                {/* 분할 선택 */}
                <div className="pt-4 border-t">
                  <h4 className="text-sm font-medium mb-2">분할 선택</h4>
                  <RadioGroup
                    value={formData.splitOption}
                    onValueChange={(value) =>
                      setFormData({ ...formData, splitOption: value as 'all' | 'partial' })
                    }
                    className="flex gap-4"
                  >
                    <div className="flex items-center space-x-2">
                      <RadioGroupItem value="all" id="split-all" />
                      <Label htmlFor="split-all" className="cursor-pointer">
                        전체 품목
                      </Label>
                    </div>
                    <div className="flex items-center space-x-2">
                      <RadioGroupItem value="partial" id="split-partial" />
                      <Label htmlFor="split-partial" className="cursor-pointer">
                        {formData.selectedOrder.orderNo}-01
                      </Label>
                    </div>
                  </RadioGroup>
                </div>
              </div>
            )}
          </section>
        )}

        {/* 기본 정보 */}
        <section className="bg-muted/30 border rounded-lg p-6">
          <h3 className="font-semibold mb-4">기본 정보</h3>
          <div className="grid grid-cols-2 gap-4">
            <div className="space-y-2">
              <Label>발주처 *</Label>
              <Input
                value={formData.client}
                onChange={(e) => setFormData({ ...formData, client: e.target.value })}
                placeholder={mode === 'linked' ? '수주를 선택하면 자동 입력됩니다' : '발주처 입력'}
                disabled={mode === 'linked'}
                className="bg-white"
              />
            </div>
            <div className="space-y-2">
              <Label>현장명 *</Label>
              <Input
                value={formData.projectName}
                onChange={(e) => setFormData({ ...formData, projectName: e.target.value })}
                placeholder={mode === 'linked' ? '수주를 선택하면 자동 입력됩니다' : '현장명 입력'}
                disabled={mode === 'linked'}
                className="bg-white"
              />
            </div>
            <div className="space-y-2">
              <Label>수주번호</Label>
              <Input
                value={formData.orderNo}
                onChange={(e) => setFormData({ ...formData, orderNo: e.target.value })}
                placeholder={mode === 'linked' ? '수주를 선택하면 자동 입력됩니다' : '수주번호 입력'}
                disabled={mode === 'linked'}
                className="bg-white"
              />
            </div>
            <div className="space-y-2">
              <Label>품목수</Label>
              <Input
                value={formData.itemCount || ''}
                onChange={(e) => setFormData({ ...formData, itemCount: parseInt(e.target.value) || 0 })}
                placeholder={mode === 'linked' ? '수주를 선택하면 자동 입력됩니다' : '품목수 입력'}
                disabled={mode === 'linked'}
                className="bg-white"
              />
            </div>
          </div>
        </section>

        {/* 작업지시 정보 */}
        <section className="bg-muted/30 border rounded-lg p-6">
          <h3 className="font-semibold mb-4">작업지시 정보</h3>
          <div className="space-y-4">
            <div className="space-y-2">
              <Label>공정구분 *</Label>
              <Select
                value={formData.processType}
                onValueChange={(value) => setFormData({ ...formData, processType: value as ProcessType })}
              >
                <SelectTrigger className="bg-white">
                  <SelectValue />
                </SelectTrigger>
                <SelectContent>
                  {Object.entries(PROCESS_TYPE_LABELS).map(([key, label]) => (
                    <SelectItem key={key} value={key}>
                      {label}
                    </SelectItem>
                  ))}
                </SelectContent>
              </Select>
              <p className="text-xs text-muted-foreground">
                공정코드: {getProcessCode(formData.processType)}
              </p>
            </div>

            <div className="space-y-2">
              <Label>출고예정일 *</Label>
              <Input
                type="date"
                value={formData.shipmentDate}
                onChange={(e) => setFormData({ ...formData, shipmentDate: e.target.value })}
                className="bg-white"
              />
            </div>

            <div className="space-y-2">
              <Label>우선순위 (1=긴급, 9=낮음)</Label>
              <Select
                value={formData.priority.toString()}
                onValueChange={(value) => setFormData({ ...formData, priority: parseInt(value) })}
              >
                <SelectTrigger className="bg-white">
                  <SelectValue />
                </SelectTrigger>
                <SelectContent>
                  {[1, 2, 3, 4, 5, 6, 7, 8, 9].map((n) => (
                    <SelectItem key={n} value={n.toString()}>
                      {n} {n === 5 ? '(일반)' : n === 1 ? '(긴급)' : ''}
                    </SelectItem>
                  ))}
                </SelectContent>
              </Select>
            </div>

            <div className="space-y-2">
              <Label>담당자 (다중선택 가능)</Label>
              <div
                onClick={() => setIsAssigneeModalOpen(true)}
                className="flex min-h-10 w-full cursor-pointer items-center rounded-md border border-input bg-white px-3 py-2 text-sm ring-offset-background hover:bg-accent/50"
              >
                {assigneeNames.length > 0 ? (
                  <span>{assigneeNames.join(', ')}</span>
                ) : (
                  <span className="text-muted-foreground">담당자를 선택하세요 (팀/개인)</span>
                )}
              </div>
            </div>
          </div>
        </section>

        {/* 비고 */}
        <section className="bg-muted/30 border rounded-lg p-6">
          <h3 className="font-semibold mb-4">비고</h3>
          <Textarea
            value={formData.note}
            onChange={(e) => setFormData({ ...formData, note: e.target.value })}
            placeholder="특이사항이나 메모를 입력하세요"
            rows={4}
            className="bg-white"
          />
        </section>
      </div>

      {/* 수주 선택 모달 */}
      <SalesOrderSelectModal
        open={isModalOpen}
        onOpenChange={setIsModalOpen}
        onSelect={handleSelectOrder}
      />

      {/* 담당자 선택 모달 */}
      <AssigneeSelectModal
        open={isAssigneeModalOpen}
        onOpenChange={setIsAssigneeModalOpen}
        selectedIds={formData.assignees}
        onSelect={(ids, names) => {
          setFormData({ ...formData, assignees: ids });
          setAssigneeNames(names);
        }}
      />
    </PageLayout>
  );
}