'use client'

import { useState } from 'react';
import { useForm } from 'react-hook-form';
import { zodResolver } from '@hookform/resolvers/zod';
import { z } from 'zod';
import { Button } from '@/components/ui/button';
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
import { Form, FormControl, FormDescription, FormField, FormItem, FormLabel, FormMessage } from '@/components/ui/form';
import { Input } from '@/components/ui/input';
import { Textarea } from '@/components/ui/textarea';
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
import { Switch } from '@/components/ui/switch';
import { Badge } from '@/components/ui/badge';
import { Separator } from '@/components/ui/separator';
import { toast } from 'sonner';
import { Loader2, Plus, Trash2, FileText, AlertCircle } from 'lucide-react';

// API 함수 및 타입
import { submitApproval, createSubmitApprovalRequest, createApprovalLine } from '@/lib/knox-api/approval/approval';
import type { ApprovalLine, SubmitApprovalRequest } from '@/lib/knox-api/approval/approval';

// Mock 데이터
import { mockApprovalAPI, createMockApprovalLine, getRoleText } from './mocks/approval-mock';

const formSchema = z.object({
  subject: z.string().min(1, '제목은 필수입니다'),
  contents: z.string().min(1, '내용은 필수입니다'),
  contentsType: z.enum(['TEXT', 'HTML', 'MIME']),
  docSecuType: z.enum(['PERSONAL', 'CONFIDENTIAL', 'CONFIDENTIAL_STRICT']),
  urgYn: z.boolean(),
  importantYn: z.boolean(),
  notifyOption: z.enum(['0', '1', '2', '3']),
  docMngSaveCode: z.enum(['0', '1']),
  sbmLang: z.enum(['ko', 'ja', 'zh', 'en']),
  timeZone: z.string().default('GMT+9'),
  aplns: z.array(z.object({
    userId: z.string().min(1, '사용자 ID는 필수입니다'),
    emailAddress: z.string().email('유효한 이메일 주소를 입력해주세요').optional(),
    role: z.enum(['0', '1', '2', '3', '4', '7', '9']),
    seq: z.string(),
    opinion: z.string().optional()
  })).min(1, '최소 1개의 결재 경로가 필요합니다')
});

type FormData = z.infer<typeof formSchema>;

interface ApprovalSubmitProps {
  useFakeData?: boolean;
  systemId?: string;
  onSubmitSuccess?: (apInfId: string) => void;
}

export default function ApprovalSubmit({ 
  useFakeData = false, 
  systemId = 'EVCP_SYSTEM',
  onSubmitSuccess 
}: ApprovalSubmitProps) {
  const [isSubmitting, setIsSubmitting] = useState(false);
  const [submitResult, setSubmitResult] = useState<{ apInfId: string } | null>(null);

  const form = useForm<FormData>({
    resolver: zodResolver(formSchema),
    defaultValues: {
      subject: '',
      contents: '',
      contentsType: 'TEXT',
      docSecuType: 'PERSONAL',
      urgYn: false,
      importantYn: false,
      notifyOption: '0',
      docMngSaveCode: '0',
      sbmLang: 'ko',
      timeZone: 'GMT+9',
      aplns: [
        {
          userId: '',
          emailAddress: '',
          role: '0',
          seq: '1',
          opinion: ''
        }
      ]
    }
  });

  const aplns = form.watch('aplns');

  const addApprovalLine = () => {
    const newSeq = (aplns.length + 1).toString();
    form.setValue('aplns', [...aplns, {
      userId: '',
      emailAddress: '',
      role: '1',
      seq: newSeq,
      opinion: ''
    }]);
  };

  const removeApprovalLine = (index: number) => {
    if (aplns.length > 1) {
      const newAplns = aplns.filter((_, i) => i !== index);
      // 순서 재정렬
      const reorderedAplns = newAplns.map((apln, i) => ({
        ...apln,
        seq: (i + 1).toString()
      }));
      form.setValue('aplns', reorderedAplns);
    }
  };

  const onSubmit = async (data: FormData) => {
    setIsSubmitting(true);
    setSubmitResult(null);

    try {
      // 결재 경로 생성
      const approvalLines: ApprovalLine[] = await Promise.all(
        data.aplns.map(async (apln) => {
          if (useFakeData) {
            return createMockApprovalLine({
              userId: apln.userId,
              emailAddress: apln.emailAddress,
              role: apln.role,
              seq: apln.seq,
              opinion: apln.opinion
            });
          } else {
            return createApprovalLine(
              { userId: apln.userId, emailAddress: apln.emailAddress },
              apln.role,
              apln.seq,
              { opinion: apln.opinion }
            );
          }
        })
      );

      // 상신 요청 생성
      const submitRequest: SubmitApprovalRequest = useFakeData
        ? {
            ...data,
            urgYn: data.urgYn ? 'Y' : 'N',
            importantYn: data.importantYn ? 'Y' : 'N',
            sbmDt: new Date().toISOString().replace(/-|:|T/g, '').slice(0, 14),
            apInfId: 'test-ap-inf-id-' + Date.now(),
            aplns: approvalLines
          }
        : await createSubmitApprovalRequest(
            data.contents,
            data.subject,
            approvalLines,
            {
              contentsType: data.contentsType,
              docSecuType: data.docSecuType,
              urgYn: data.urgYn ? 'Y' : 'N',
              importantYn: data.importantYn ? 'Y' : 'N',
              notifyOption: data.notifyOption,
              docMngSaveCode: data.docMngSaveCode,
              sbmLang: data.sbmLang,
              timeZone: data.timeZone
            }
          );

      // API 호출
      const response = useFakeData
        ? await mockApprovalAPI.submitApproval(submitRequest)
        : await submitApproval(submitRequest, systemId);

      if (response.result === 'SUCCESS') {
        setSubmitResult({ apInfId: response.data.apInfId });
        toast.success('결재가 성공적으로 상신되었습니다.');
        onSubmitSuccess?.(response.data.apInfId);
        form.reset();
      } else {
        toast.error('결재 상신에 실패했습니다.');
      }
    } catch (error) {
      console.error('결재 상신 오류:', error);
      toast.error('결재 상신 중 오류가 발생했습니다.');
    } finally {
      setIsSubmitting(false);
    }
  };

  return (
    <Card className="w-full max-w-4xl">
      <CardHeader>
        <CardTitle className="flex items-center gap-2">
          <FileText className="w-5 h-5" />
          결재 상신
        </CardTitle>
        <CardDescription>
          새로운 결재를 상신합니다. {useFakeData && '(테스트 모드)'}
        </CardDescription>
      </CardHeader>

      <CardContent className="space-y-6">
        {submitResult && (
          <div className="p-4 bg-green-50 border border-green-200 rounded-lg">
            <div className="flex items-center gap-2 text-green-700">
              <AlertCircle className="w-4 h-4" />
              <span className="font-medium">상신 완료</span>
            </div>
            <p className="text-sm text-green-600 mt-1">
              결재 ID: {submitResult.apInfId}
            </p>
          </div>
        )}

        <Form {...form}>
          <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-6">
            {/* 기본 정보 */}
            <div className="space-y-4">
              <h3 className="text-lg font-semibold">기본 정보</h3>
              
              <FormField
                control={form.control}
                name="subject"
                render={({ field }) => (
                  <FormItem>
                    <FormLabel>제목 *</FormLabel>
                    <FormControl>
                      <Input placeholder="결재 제목을 입력하세요" {...field} />
                    </FormControl>
                    <FormMessage />
                  </FormItem>
                )}
              />

              <FormField
                control={form.control}
                name="contents"
                render={({ field }) => (
                  <FormItem>
                    <FormLabel>내용 *</FormLabel>
                    <FormControl>
                      <Textarea
                        placeholder="결재 내용을 입력하세요"
                        rows={8}
                        {...field}
                      />
                    </FormControl>
                    <FormMessage />
                  </FormItem>
                )}
              />

              <div className="grid grid-cols-2 gap-4">
                <FormField
                  control={form.control}
                  name="contentsType"
                  render={({ field }) => (
                    <FormItem>
                      <FormLabel>내용 형식</FormLabel>
                      <Select onValueChange={field.onChange} defaultValue={field.value}>
                        <FormControl>
                          <SelectTrigger>
                            <SelectValue placeholder="내용 형식 선택" />
                          </SelectTrigger>
                        </FormControl>
                        <SelectContent>
                          <SelectItem value="TEXT">TEXT</SelectItem>
                          <SelectItem value="HTML">HTML</SelectItem>
                          <SelectItem value="MIME">MIME</SelectItem>
                        </SelectContent>
                      </Select>
                      <FormMessage />
                    </FormItem>
                  )}
                />

                <FormField
                  control={form.control}
                  name="docSecuType"
                  render={({ field }) => (
                    <FormItem>
                      <FormLabel>보안 등급</FormLabel>
                      <Select onValueChange={field.onChange} defaultValue={field.value}>
                        <FormControl>
                          <SelectTrigger>
                            <SelectValue placeholder="보안 등급 선택" />
                          </SelectTrigger>
                        </FormControl>
                        <SelectContent>
                          <SelectItem value="PERSONAL">개인</SelectItem>
                          <SelectItem value="CONFIDENTIAL">기밀</SelectItem>
                          <SelectItem value="CONFIDENTIAL_STRICT">극기밀</SelectItem>
                        </SelectContent>
                      </Select>
                      <FormMessage />
                    </FormItem>
                  )}
                />
              </div>

              <div className="grid grid-cols-2 gap-4">
                <FormField
                  control={form.control}
                  name="urgYn"
                  render={({ field }) => (
                    <FormItem className="flex flex-row items-center justify-between rounded-lg border p-3">
                      <div className="space-y-0.5">
                        <FormLabel>긴급 여부</FormLabel>
                        <FormDescription>긴급 결재로 처리</FormDescription>
                      </div>
                      <FormControl>
                        <Switch
                          checked={field.value}
                          onCheckedChange={field.onChange}
                        />
                      </FormControl>
                    </FormItem>
                  )}
                />

                <FormField
                  control={form.control}
                  name="importantYn"
                  render={({ field }) => (
                    <FormItem className="flex flex-row items-center justify-between rounded-lg border p-3">
                      <div className="space-y-0.5">
                        <FormLabel>중요 여부</FormLabel>
                        <FormDescription>중요 결재로 분류</FormDescription>
                      </div>
                      <FormControl>
                        <Switch
                          checked={field.value}
                          onCheckedChange={field.onChange}
                        />
                      </FormControl>
                    </FormItem>
                  )}
                />
              </div>
            </div>

            <Separator />

            {/* 결재 경로 */}
            <div className="space-y-4">
              <div className="flex items-center justify-between">
                <h3 className="text-lg font-semibold">결재 경로</h3>
                <Button
                  type="button"
                  variant="outline"
                  size="sm"
                  onClick={addApprovalLine}
                >
                  <Plus className="w-4 h-4 mr-2" />
                  결재자 추가
                </Button>
              </div>

              <div className="space-y-3">
                {aplns.map((apln, index) => (
                  <div key={index} className="flex items-center gap-3 p-3 border rounded-lg">
                    <Badge variant="outline">{index + 1}</Badge>
                    
                    <div className="flex-1 grid grid-cols-4 gap-3">
                      <FormField
                        control={form.control}
                        name={`aplns.${index}.userId`}
                        render={({ field }) => (
                          <FormItem>
                            <FormControl>
                              <Input placeholder="사용자 ID" {...field} />
                            </FormControl>
                            <FormMessage />
                          </FormItem>
                        )}
                      />

                      <FormField
                        control={form.control}
                        name={`aplns.${index}.emailAddress`}
                        render={({ field }) => (
                          <FormItem>
                            <FormControl>
                              <Input placeholder="이메일 (선택)" {...field} />
                            </FormControl>
                            <FormMessage />
                          </FormItem>
                        )}
                      />

                      <FormField
                        control={form.control}
                        name={`aplns.${index}.role`}
                        render={({ field }) => (
                          <FormItem>
                            <Select onValueChange={field.onChange} defaultValue={field.value}>
                              <FormControl>
                                <SelectTrigger>
                                  <SelectValue />
                                </SelectTrigger>
                              </FormControl>
                              <SelectContent>
                                <SelectItem value="0">기안</SelectItem>
                                <SelectItem value="1">결재</SelectItem>
                                <SelectItem value="2">합의</SelectItem>
                                <SelectItem value="3">후결</SelectItem>
                                <SelectItem value="4">병렬합의</SelectItem>
                                <SelectItem value="7">병렬결재</SelectItem>
                                <SelectItem value="9">통보</SelectItem>
                              </SelectContent>
                            </Select>
                            <FormMessage />
                          </FormItem>
                        )}
                      />

                      <FormField
                        control={form.control}
                        name={`aplns.${index}.opinion`}
                        render={({ field }) => (
                          <FormItem>
                            <FormControl>
                              <Input placeholder="의견 (선택)" {...field} />
                            </FormControl>
                            <FormMessage />
                          </FormItem>
                        )}
                      />
                    </div>

                    <div className="flex items-center gap-2">
                      <Badge variant="secondary">
                        {getRoleText(apln.role)}
                      </Badge>
                      
                      {aplns.length > 1 && (
                        <Button
                          type="button"
                          variant="ghost"
                          size="sm"
                          onClick={() => removeApprovalLine(index)}
                        >
                          <Trash2 className="w-4 h-4" />
                        </Button>
                      )}
                    </div>
                  </div>
                ))}
              </div>
            </div>

            <Separator />

            {/* 제출 버튼 */}
            <div className="flex justify-end space-x-3">
              <Button
                type="button"
                variant="outline"
                onClick={() => form.reset()}
                disabled={isSubmitting}
              >
                초기화
              </Button>
              <Button type="submit" disabled={isSubmitting}>
                {isSubmitting ? (
                  <>
                    <Loader2 className="w-4 h-4 mr-2 animate-spin" />
                    상신 중...
                  </>
                ) : (
                  '결재 상신'
                )}
              </Button>
            </div>
          </form>
        </Form>
      </CardContent>
    </Card>
  );
}