frontend/apps/sn/app/ii/rdii/page.tsx

"use client"

import { date, z } from "zod"
import { useForm, useFieldArray } from "react-hook-form"
import { zodResolver } from "@hookform/resolvers/zod"
import { Select, SelectTrigger, SelectValue, SelectContent, SelectItem, Input, Button, DatePicker } from "@common/components/ui"
import { UiTable } from "@common/business_components/ui"
import React, { useState } from "react"
import BaseLayout from "@/ii/BaseLayout"
import FormSection from "@/components/ui/formSection"

// TODO: 컴포넌트 호출 ~ 필요 코드 수정해야댐 
// zod 스키마 정의
const formSchema = z.object({
    region: z.string(),
    rdiiArea: z.string(),
    rtkSource: z.string(),
    unitFactors: z.array(z.object({
        response: z.string(),
        R: z.string(),
        T: z.string(),
        K: z.string(),
    })),
    initialDepths: z.array(z.object({
        response: z.string(),
        Dmax: z.string(),
        Drec: z.string(),
        Do: z.string(),
    })),
    suyeonga: z.string(),
    rate: z.string(),
    date: z.coerce.date(),
    rain: z.string(),
})

export default function RTKForm() {
    const form = useForm<z.infer<typeof formSchema>>({
        resolver: zodResolver(formSchema),
        defaultValues: {
            region: "",
            rdiiArea: "",
            rtkSource: "",
            unitFactors: [
                { response: "Short-Term", R: "", T: "", K: "" },
                { response: "Medium-Term", R: "", T: "", K: "" },
                { response: "Long-Term", R: "", T: "", K: "" },
            ],
            initialDepths: [
                { response: "Short-Term", Dmax: "", Drec: "", Do: "" },
                { response: "Medium-Term", Dmax: "", Drec: "", Do: "" },
                { response: "Long-Term", Dmax: "", Drec: "", Do: "" },
            ],
        }
    })

    const { fields: unitFactorFields } = useFieldArray({
        control: form.control,
        name: "unitFactors"
    })

    const { fields: initialDepthFields } = useFieldArray({
        control: form.control,
        name: "initialDepths"
    })

    const onSubmit = (data: z.infer<typeof formSchema>) => {
        console.log("✅ 제출 데이터:", data)
    }

    // 단위도 계수 테이블 설정
    const unitFactorHeadlist = [
        { id: 'response', title: 'Response' },
        { id: 'R', title: 'R' },
        { id: 'T', title: 'T' },
        { id: 'K', title: 'K' }
    ]

    // 초기 차단 깊이 테이블 설정
    const initialDepthHeadlist = [
        { id: 'response', title: 'Response' },
        { id: 'Dmax', title: 'Dmax' },
        { id: 'Drec', title: 'Drec' },
        { id: 'Do', title: 'Do' }
    ]
    // 테이블 페이지 변경 핸들러
    const handlePageChange = (page: number) => {
        console.log('Page changed:', page)
    }
    const [selectedDate, setSelectedDate] = useState(new Date())
    return (
        <BaseLayout titleName={{ mainTitle: 'RDII 분석', firstCardTitle: 'RDII 분석자료 입력' }} form={form} onSubmitEvent={() => { }} graphBtn={false}>
            {[<div className="space-y-[1.2rem]" key="form-section">
                <div className="grid grid-cols-2 gap-4">
                <FormSection name="rtkSource" form={form} titleNm="○ RTK계수 출처"><Input
                    className="h-10 text-center text-xl w-[150px]"
                    placeholder=""
                /></FormSection>
                <FormSection name="rdiiArea" form={form} titleNm="○ RDII 기여면적(ha)"><Input
                    className="h-10 text-center text-xl w-[150px]"
                    placeholder=""
                /></FormSection></div>
                <div className="grid grid-cols-2">
                    <div>
                        <div className="mb-[1.2rem] text-xl font-medium">○ 단위도 계수</div>
                        <UiTable
                            headName=""
                            className="w-[400px]"
                            tableData={unitFactorFields}
                            headlist={unitFactorHeadlist}
                            pageSize={10}
                            total={0}
                            onPageChange={handlePageChange}
                            cellClick={undefined}
                        >
                            {null}
                        </UiTable>
                    </div>
                    <div>
                        <div className="mb-[1.2rem] text-xl font-medium">○ 초기 차단 깊이</div>
                        <UiTable
                            headName=""
                            className="w-[400px]"
                            tableData={initialDepthFields}
                            headlist={initialDepthHeadlist}
                            pageSize={10}
                            total={0}
                            onPageChange={handlePageChange}
                            cellClick={undefined}
                        >
                            {null}
                        </UiTable>
                    </div>
                </div>
                <div className="grid grid-cols-2 gap-4">
                <FormSection name="suyeonga" form={form} titleNm="○ 오수관망도"><div className="w-[150px]">
                    <Input id="fileNm" type="file" />
                </div></FormSection>
                <FormSection name="regopm" form={form} titleNm="○ 수용가-맨홀 매칭결과"><div className="w-[150px]">
                    <Input id="fileNm2" type="file" />
                </div></FormSection>
                <FormSection name='date' form={form} titleNm='○ 상수사용량 적용기간'>
                    <DatePicker selected={selectedDate} onSelect={(date: Date | undefined) => { if (date) setSelectedDate(date) }} mode={"single"} />
                </FormSection>
                <FormSection name='rate' form={form} titleNm='○ 오수전환율'><Input className="h-[3.2rem] text-center text-xl w-[150px]" /></FormSection>
                <FormSection name="rain" form={form} titleNm="○ 강우자료"><div className="w-[150px]">
                    <Input id="fileNm3" type="file" />
                </div></FormSection>
                </div>
                 <div className="flex justify-end mt-1">
                                    <Button type="submit">RDII분석 실행</Button>
                                </div>
            </div>
            ]}
        </BaseLayout >
    )
}