'use client';

/**
 * 제품검사 등록 페이지
 *
 * 기획서 기반 전면 재구축:
 * - 기본정보 입력
 * - 건축공사장, 자재유통업자, 공사시공자, 공사감리자 정보
 * - 검사 정보 (검사방문요청일, 기간, 검사자, 현장주소)
 * - 수주 설정 정보 (수주 선택 → 규격 비교 테이블)
 */

import { useState, useCallback, useMemo } from 'react';
import { useRouter } from 'next/navigation';
import { Plus, Trash2 } from 'lucide-react';
import { Button } from '@/components/ui/button';
import { Badge } from '@/components/ui/badge';
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
import { Input } from '@/components/ui/input';
import { Label } from '@/components/ui/label';
import {
  Table,
  TableBody,
  TableCell,
  TableHead,
  TableHeader,
  TableRow,
} from '@/components/ui/table';
import { IntegratedDetailTemplate } from '@/components/templates/IntegratedDetailTemplate';
import { qualityInspectionCreateConfig } from './inspectionConfig';
import { toast } from 'sonner';
import { createInspection } from './actions';
import { isOrderSpecSame, calculateOrderSummary } from './mockData';
import { isNextRedirectError } from '@/lib/utils/redirect-error';
import { OrderSelectModal } from './OrderSelectModal';
import type { InspectionFormData, OrderSettingItem, OrderSelectItem } from './types';
import {
  emptyConstructionSite,
  emptyMaterialDistributor,
  emptyConstructor,
  emptySupervisor,
  emptyScheduleInfo,
} from './mockData';

export function InspectionCreate() {
  const router = useRouter();

  // 폼 상태
  const [formData, setFormData] = useState<InspectionFormData>({
    qualityDocNumber: '',
    siteName: '',
    client: '',
    manager: '',
    managerContact: '',
    constructionSite: { ...emptyConstructionSite },
    materialDistributor: { ...emptyMaterialDistributor },
    constructorInfo: { ...emptyConstructor },
    supervisor: { ...emptySupervisor },
    scheduleInfo: { ...emptyScheduleInfo },
    orderItems: [],
  });

  const [isSubmitting, setIsSubmitting] = useState(false);
  const [orderModalOpen, setOrderModalOpen] = useState(false);

  // ===== 수주 선택 처리 =====
  const handleOrderSelect = useCallback((items: OrderSelectItem[]) => {
    const newOrderItems: OrderSettingItem[] = items.map((item) => ({
      id: item.id,
      orderNumber: item.orderNumber,
      floor: '',
      symbol: '',
      orderWidth: 0,
      orderHeight: 0,
      constructionWidth: 0,
      constructionHeight: 0,
      changeReason: '',
    }));
    setFormData((prev) => ({
      ...prev,
      orderItems: [...prev.orderItems, ...newOrderItems],
    }));
  }, []);

  // ===== 수주 항목 삭제 =====
  const handleRemoveOrderItem = useCallback((itemId: string) => {
    setFormData((prev) => ({
      ...prev,
      orderItems: prev.orderItems.filter((item) => item.id !== itemId),
    }));
  }, []);

  // ===== 폼 필드 변경 헬퍼 =====
  const updateField = useCallback(<K extends keyof InspectionFormData>(
    key: K,
    value: InspectionFormData[K]
  ) => {
    setFormData((prev) => ({ ...prev, [key]: value }));
  }, []);

  const updateNested = useCallback((
    section: 'constructionSite' | 'materialDistributor' | 'constructorInfo' | 'supervisor' | 'scheduleInfo',
    field: string,
    value: string
  ) => {
    setFormData((prev) => ({
      ...prev,
      [section]: {
        ...(prev[section] as unknown as Record<string, unknown>),
        [field]: value,
      },
    }));
  }, []);

  // ===== 수주 설정 요약 =====
  const orderSummary = useMemo(
    () => calculateOrderSummary(formData.orderItems),
    [formData.orderItems]
  );

  // ===== 취소 =====
  const handleCancel = useCallback(() => {
    router.push('/quality/inspections');
  }, [router]);

  // ===== 등록 제출 =====
  const handleSubmit = useCallback(async (): Promise<{ success: boolean; error?: string }> => {
    // 필수 필드 검증
    if (!formData.siteName.trim()) {
      toast.error('현장명은 필수 입력 항목입니다.');
      return { success: false, error: '현장명을 입력해주세요.' };
    }
    if (!formData.client.trim()) {
      toast.error('수주처는 필수 입력 항목입니다.');
      return { success: false, error: '수주처를 입력해주세요.' };
    }

    setIsSubmitting(true);
    try {
      const result = await createInspection(formData);
      if (result.success) {
        toast.success('제품검사가 등록되었습니다.');
        router.push('/quality/inspections');
        return { success: true };
      }
      return { success: false, error: result.error || '등록에 실패했습니다.' };
    } catch (error) {
      if (isNextRedirectError(error)) throw error;
      return { success: false, error: '등록 중 오류가 발생했습니다.' };
    } finally {
      setIsSubmitting(false);
    }
  }, [formData, router]);

  // ===== 수주 설정 테이블 =====
  const renderOrderTable = (items: OrderSettingItem[]) => (
    <Table>
      <TableHeader>
        <TableRow>
          <TableHead className="w-12 text-center">No.</TableHead>
          <TableHead>수주번호</TableHead>
          <TableHead>층수</TableHead>
          <TableHead>부호</TableHead>
          <TableHead className="text-center">수주 가로</TableHead>
          <TableHead className="text-center">수주 세로</TableHead>
          <TableHead className="text-center">시공 가로</TableHead>
          <TableHead className="text-center">시공 세로</TableHead>
          <TableHead className="text-center">일치</TableHead>
          <TableHead>변경사유</TableHead>
          <TableHead className="w-12 text-center">삭제</TableHead>
        </TableRow>
      </TableHeader>
      <TableBody>
        {items.map((item, index) => {
          const isSame = isOrderSpecSame(item);
          return (
            <TableRow key={item.id}>
              <TableCell className="text-center">{index + 1}</TableCell>
              <TableCell>{item.orderNumber}</TableCell>
              <TableCell>{item.floor}</TableCell>
              <TableCell>{item.symbol}</TableCell>
              <TableCell className="text-center">{item.orderWidth}</TableCell>
              <TableCell className="text-center">{item.orderHeight}</TableCell>
              <TableCell className="text-center">{item.constructionWidth}</TableCell>
              <TableCell className="text-center">{item.constructionHeight}</TableCell>
              <TableCell className="text-center">
                {isSame ? (
                  <Badge variant="outline" className="text-xs bg-green-50 text-green-700 border-green-200">일치</Badge>
                ) : (
                  <Badge variant="outline" className="text-xs bg-red-50 text-red-700 border-red-200">불일치</Badge>
                )}
              </TableCell>
              <TableCell>{item.changeReason || '-'}</TableCell>
              <TableCell className="text-center">
                <Button
                  variant="ghost"
                  size="icon"
                  className="h-7 w-7 text-muted-foreground hover:text-red-600"
                  type="button"
                  onClick={() => handleRemoveOrderItem(item.id)}
                >
                  <Trash2 className="w-4 h-4" />
                </Button>
              </TableCell>
            </TableRow>
          );
        })}
        {items.length === 0 && (
          <TableRow>
            <TableCell colSpan={11} className="text-center text-muted-foreground py-8">
              수주를 선택해주세요.
            </TableCell>
          </TableRow>
        )}
      </TableBody>
    </Table>
  );

  // ===== 폼 렌더링 =====
  const renderFormContent = useCallback(() => (
    <div className="space-y-6">
      {/* 기본 정보 */}
      <Card>
        <CardHeader>
          <CardTitle className="text-base">기본 정보</CardTitle>
        </CardHeader>
        <CardContent>
          <div className="grid grid-cols-2 md:grid-cols-4 gap-4">
            <div className="space-y-2">
              <Label>품질관리서 번호</Label>
              <Input
                value={formData.qualityDocNumber}
                onChange={(e) => updateField('qualityDocNumber', e.target.value)}
                placeholder="품질관리서 번호 입력"
              />
            </div>
            <div className="space-y-2">
              <Label>현장명 <span className="text-red-500">*</span></Label>
              <Input
                value={formData.siteName}
                onChange={(e) => updateField('siteName', e.target.value)}
                placeholder="현장명 입력"
              />
            </div>
            <div className="space-y-2">
              <Label>수주처 <span className="text-red-500">*</span></Label>
              <Input
                value={formData.client}
                onChange={(e) => updateField('client', e.target.value)}
                placeholder="수주처 입력"
              />
            </div>
            <div className="space-y-2">
              <Label>담당자</Label>
              <Input
                value={formData.manager}
                onChange={(e) => updateField('manager', e.target.value)}
                placeholder="담당자 입력"
              />
            </div>
            <div className="space-y-2">
              <Label>담당자 연락처</Label>
              <Input
                value={formData.managerContact}
                onChange={(e) => updateField('managerContact', e.target.value)}
                placeholder="담당자 연락처 입력"
              />
            </div>
          </div>
        </CardContent>
      </Card>

      {/* 건축공사장 정보 */}
      <Card>
        <CardHeader>
          <CardTitle className="text-base">건축공사장 정보</CardTitle>
        </CardHeader>
        <CardContent>
          <div className="grid grid-cols-2 md:grid-cols-3 gap-4">
            <div className="space-y-2">
              <Label>현장명</Label>
              <Input
                value={formData.constructionSite.siteName}
                onChange={(e) => updateNested('constructionSite', 'siteName', e.target.value)}
                placeholder="현장명 입력"
              />
            </div>
            <div className="space-y-2">
              <Label>대지위치</Label>
              <Input
                value={formData.constructionSite.landLocation}
                onChange={(e) => updateNested('constructionSite', 'landLocation', e.target.value)}
                placeholder="대지위치 입력"
              />
            </div>
            <div className="space-y-2">
              <Label>지번</Label>
              <Input
                value={formData.constructionSite.lotNumber}
                onChange={(e) => updateNested('constructionSite', 'lotNumber', e.target.value)}
                placeholder="지번 입력"
              />
            </div>
          </div>
        </CardContent>
      </Card>

      {/* 자재유통업자 정보 */}
      <Card>
        <CardHeader>
          <CardTitle className="text-base">자재유통업자 정보</CardTitle>
        </CardHeader>
        <CardContent>
          <div className="grid grid-cols-2 md:grid-cols-4 gap-4">
            <div className="space-y-2">
              <Label>회사명</Label>
              <Input
                value={formData.materialDistributor.companyName}
                onChange={(e) => updateNested('materialDistributor', 'companyName', e.target.value)}
                placeholder="회사명 입력"
              />
            </div>
            <div className="space-y-2">
              <Label>회사주소</Label>
              <Input
                value={formData.materialDistributor.companyAddress}
                onChange={(e) => updateNested('materialDistributor', 'companyAddress', e.target.value)}
                placeholder="회사주소 입력"
              />
            </div>
            <div className="space-y-2">
              <Label>대표자명</Label>
              <Input
                value={formData.materialDistributor.representativeName}
                onChange={(e) => updateNested('materialDistributor', 'representativeName', e.target.value)}
                placeholder="대표자명 입력"
              />
            </div>
            <div className="space-y-2">
              <Label>전화번호</Label>
              <Input
                value={formData.materialDistributor.phone}
                onChange={(e) => updateNested('materialDistributor', 'phone', e.target.value)}
                placeholder="전화번호 입력"
              />
            </div>
          </div>
        </CardContent>
      </Card>

      {/* 공사시공자 정보 */}
      <Card>
        <CardHeader>
          <CardTitle className="text-base">공사시공자 정보</CardTitle>
        </CardHeader>
        <CardContent>
          <div className="grid grid-cols-2 md:grid-cols-4 gap-4">
            <div className="space-y-2">
              <Label>회사명</Label>
              <Input
                value={formData.constructorInfo.companyName}
                onChange={(e) => updateNested('constructorInfo', 'companyName', e.target.value)}
                placeholder="회사명 입력"
              />
            </div>
            <div className="space-y-2">
              <Label>회사주소</Label>
              <Input
                value={formData.constructorInfo.companyAddress}
                onChange={(e) => updateNested('constructorInfo', 'companyAddress', e.target.value)}
                placeholder="회사주소 입력"
              />
            </div>
            <div className="space-y-2">
              <Label>성명</Label>
              <Input
                value={formData.constructorInfo.name}
                onChange={(e) => updateNested('constructorInfo', 'name', e.target.value)}
                placeholder="성명 입력"
              />
            </div>
            <div className="space-y-2">
              <Label>전화번호</Label>
              <Input
                value={formData.constructorInfo.phone}
                onChange={(e) => updateNested('constructorInfo', 'phone', e.target.value)}
                placeholder="전화번호 입력"
              />
            </div>
          </div>
        </CardContent>
      </Card>

      {/* 공사감리자 정보 */}
      <Card>
        <CardHeader>
          <CardTitle className="text-base">공사감리자 정보</CardTitle>
        </CardHeader>
        <CardContent>
          <div className="grid grid-cols-2 md:grid-cols-4 gap-4">
            <div className="space-y-2">
              <Label>사무소명</Label>
              <Input
                value={formData.supervisor.officeName}
                onChange={(e) => updateNested('supervisor', 'officeName', e.target.value)}
                placeholder="사무소명 입력"
              />
            </div>
            <div className="space-y-2">
              <Label>사무소주소</Label>
              <Input
                value={formData.supervisor.officeAddress}
                onChange={(e) => updateNested('supervisor', 'officeAddress', e.target.value)}
                placeholder="사무소주소 입력"
              />
            </div>
            <div className="space-y-2">
              <Label>성명</Label>
              <Input
                value={formData.supervisor.name}
                onChange={(e) => updateNested('supervisor', 'name', e.target.value)}
                placeholder="성명 입력"
              />
            </div>
            <div className="space-y-2">
              <Label>전화번호</Label>
              <Input
                value={formData.supervisor.phone}
                onChange={(e) => updateNested('supervisor', 'phone', e.target.value)}
                placeholder="전화번호 입력"
              />
            </div>
          </div>
        </CardContent>
      </Card>

      {/* 검사 정보 */}
      <Card>
        <CardHeader>
          <CardTitle className="text-base">검사 정보</CardTitle>
        </CardHeader>
        <CardContent>
          <div className="grid grid-cols-2 md:grid-cols-4 gap-4">
            <div className="space-y-2">
              <Label>검사방문요청일</Label>
              <Input
                type="date"
                value={formData.scheduleInfo.visitRequestDate}
                onChange={(e) => updateNested('scheduleInfo', 'visitRequestDate', e.target.value)}
              />
            </div>
            <div className="space-y-2">
              <Label>검사시작일</Label>
              <Input
                type="date"
                value={formData.scheduleInfo.startDate}
                onChange={(e) => updateNested('scheduleInfo', 'startDate', e.target.value)}
              />
            </div>
            <div className="space-y-2">
              <Label>검사종료일</Label>
              <Input
                type="date"
                value={formData.scheduleInfo.endDate}
                onChange={(e) => updateNested('scheduleInfo', 'endDate', e.target.value)}
              />
            </div>
            <div className="space-y-2">
              <Label>검사자</Label>
              <Input
                value={formData.scheduleInfo.inspector}
                onChange={(e) => updateNested('scheduleInfo', 'inspector', e.target.value)}
                placeholder="검사자 입력"
              />
            </div>
          </div>
          {/* 현장 주소 */}
          <div className="mt-4 grid grid-cols-4 gap-4">
            <div className="space-y-2">
              <Label>우편번호</Label>
              <div className="flex gap-2">
                <Input
                  value={formData.scheduleInfo.sitePostalCode}
                  onChange={(e) => updateNested('scheduleInfo', 'sitePostalCode', e.target.value)}
                  className="w-28"
                />
                <Button variant="outline" size="sm" type="button">
                  우편번호 찾기
                </Button>
              </div>
            </div>
            <div className="space-y-2 col-span-2">
              <Label>주소</Label>
              <Input
                value={formData.scheduleInfo.siteAddress}
                onChange={(e) => updateNested('scheduleInfo', 'siteAddress', e.target.value)}
                placeholder="주소 입력"
              />
            </div>
            <div className="space-y-2">
              <Label>상세주소</Label>
              <Input
                value={formData.scheduleInfo.siteAddressDetail}
                onChange={(e) => updateNested('scheduleInfo', 'siteAddressDetail', e.target.value)}
                placeholder="상세주소 입력"
              />
            </div>
          </div>
        </CardContent>
      </Card>

      {/* 수주 설정 정보 */}
      <Card>
        <CardHeader className="flex flex-row items-center justify-between">
          <div className="flex items-center gap-3">
            <CardTitle className="text-base">수주 설정 정보</CardTitle>
            <Button variant="outline" size="sm" type="button" onClick={() => setOrderModalOpen(true)}>
              <Plus className="w-4 h-4 mr-1" />
              수주 선택
            </Button>
          </div>
          <div className="flex items-center gap-3 text-sm">
            <span>전체: <strong>{orderSummary.total}</strong>건</span>
            <span className="text-green-600">일치: <strong>{orderSummary.same}</strong>건</span>
            <span className="text-red-600">불일치: <strong>{orderSummary.changed}</strong>건</span>
          </div>
        </CardHeader>
        <CardContent className="p-0">
          {renderOrderTable(formData.orderItems)}
        </CardContent>
      </Card>
    </div>
  ), [formData, orderSummary, updateField, updateNested, handleRemoveOrderItem, orderModalOpen]);

  // 이미 선택된 수주 ID 목록
  const excludeOrderIds = useMemo(
    () => formData.orderItems.map((item) => item.id),
    [formData.orderItems]
  );

  return (
    <>
      <IntegratedDetailTemplate
        config={qualityInspectionCreateConfig}
        mode="create"
        isLoading={false}
        isSubmitting={isSubmitting}
        onBack={handleCancel}
        onCancel={handleCancel}
        onSubmit={handleSubmit}
        renderForm={renderFormContent}
      />

      <OrderSelectModal
        open={orderModalOpen}
        onOpenChange={setOrderModalOpen}
        onSelect={handleOrderSelect}
        excludeIds={excludeOrderIds}
      />
    </>
  );
}