'use client'

import * as React from 'react'
import { useForm } from 'react-hook-form'
import { zodResolver } from '@hookform/resolvers/zod'
import * as z from 'zod'
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
import { Button } from '@/components/ui/button'
import { Textarea } from '@/components/ui/textarea'
import { Form, FormControl, FormField, FormItem, FormLabel, FormMessage } from '@/components/ui/form'
import { useToast } from '@/hooks/use-toast'
import { saveSelectionResult, getSelectionResult } from './actions'
import { Loader2, Save, FileText, Download, X } from 'lucide-react'
import { Dropzone, DropzoneZone, DropzoneUploadIcon, DropzoneTitle, DropzoneDescription, DropzoneInput } from '@/components/ui/dropzone'

const selectionResultSchema = z.object({
  summary: z.string().min(1, '결과요약을 입력해주세요'),
})

type SelectionResultFormData = z.infer<typeof selectionResultSchema>

interface SelectionResultFormProps {
  biddingId: number
  onSuccess: () => void
  readOnly?: boolean
}

interface AttachmentInfo {
  id: number
  fileName: string
  originalFileName: string
  fileSize: number
  mimeType: string
  filePath: string
  uploadedAt: Date | null
}

export function SelectionResultForm({ biddingId, onSuccess, readOnly = false }: SelectionResultFormProps) {
  const { toast } = useToast()
  const [isSubmitting, setIsSubmitting] = React.useState(false)
  const [isLoading, setIsLoading] = React.useState(true)
  const [attachmentFiles, setAttachmentFiles] = React.useState<File[]>([])
  const [existingAttachments, setExistingAttachments] = React.useState<AttachmentInfo[]>([])

  const form = useForm<SelectionResultFormData>({
    resolver: zodResolver(selectionResultSchema),
    defaultValues: {
      summary: '',
    },
  })

  // 기존 선정결과 로드
  React.useEffect(() => {
    const loadSelectionResult = async () => {
      setIsLoading(true)
      try {
        const result = await getSelectionResult(biddingId)
        if (result.success && result.data) {
          form.reset({
            summary: result.data.summary || '',
          })
          if (result.data.attachments) {
            setExistingAttachments(result.data.attachments)
          }
        }
      } catch (error) {
        console.error('Failed to load selection result:', error)
        toast({
          title: '로드 실패',
          description: '선정결과를 불러오는데 실패했습니다.',
          variant: 'destructive',
        })
      } finally {
        setIsLoading(false)
      }
    }

    loadSelectionResult()
  }, [biddingId, form, toast])

  const removeAttachmentFile = (index: number) => {
    setAttachmentFiles(prev => prev.filter((_, i) => i !== index))
  }

  const removeExistingAttachment = (id: number) => {
    setExistingAttachments(prev => prev.filter(att => att.id !== id))
  }

  const downloadAttachment = (filePath: string, fileName: string) => {
    // 파일 다운로드 (filePath가 절대 경로인 경우)
    if (filePath.startsWith('http') || filePath.startsWith('/')) {
      window.open(filePath, '_blank')
    } else {
      // 상대 경로인 경우
      window.open(`/api/files/${filePath}`, '_blank')
    }
  }

  const onSubmit = async (data: SelectionResultFormData) => {
    setIsSubmitting(true)
    try {
      const result = await saveSelectionResult({
        biddingId,
        summary: data.summary,
        attachments: attachmentFiles
      })

      if (result.success) {
        toast({
          title: '저장 완료',
          description: result.message,
        })
        onSuccess()
      } else {
        toast({
          title: '저장 실패',
          description: result.error,
          variant: 'destructive',
        })
      }
    } catch (error) {
      console.error('Failed to save selection result:', error)
      toast({
        title: '저장 실패',
        description: '선정결과 저장 중 오류가 발생했습니다.',
        variant: 'destructive',
      })
    } finally {
      setIsSubmitting(false)
    }
  }

  if (isLoading) {
    return (
      <Card>
        <CardHeader>
          <CardTitle>선정결과</CardTitle>
        </CardHeader>
        <CardContent>
          <div className="flex items-center justify-center py-8">
            <Loader2 className="h-6 w-6 animate-spin text-muted-foreground" />
            <span className="ml-2 text-sm text-muted-foreground">로딩 중...</span>
          </div>
        </CardContent>
      </Card>
    )
  }

  return (
    <Card>
      <CardHeader>
        <CardTitle>선정결과</CardTitle>
      </CardHeader>
      <CardContent>
        <Form {...form}>
          <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-6">
            {/* 결과요약 */}
            <FormField
              control={form.control}
              name="summary"
              render={({ field }) => (
                <FormItem>
                  <FormLabel>결과요약</FormLabel>
                  <FormControl>
                    <Textarea
                      placeholder="선정결과에 대한 요약을 입력해주세요..."
                      className="min-h-[120px]"
                      {...field}
                      disabled={readOnly}
                    />
                  </FormControl>
                  <FormMessage />
                </FormItem>
              )}
            />

            {/* 첨부파일 */}
            <div className="space-y-4">
              <FormLabel>첨부파일</FormLabel>
              
              {/* 기존 첨부파일 */}
              {existingAttachments.length > 0 && (
                <div className="space-y-2">
                  <h4 className="text-sm font-medium">기존 첨부파일</h4>
                  <div className="space-y-2">
                    {existingAttachments.map((attachment) => (
                      <div
                        key={attachment.id}
                        className="flex items-center justify-between p-3 bg-muted rounded-lg"
                      >
                        <div className="flex items-center gap-3">
                          <FileText className="h-4 w-4 text-muted-foreground" />
                          <div>
                            <p className="text-sm font-medium">{attachment.originalFileName || attachment.fileName}</p>
                            <p className="text-xs text-muted-foreground">
                              {(attachment.fileSize / 1024 / 1024).toFixed(2)} MB
                            </p>
                          </div>
                        </div>
                        <div className="flex items-center gap-2">
                          <Button
                            type="button"
                            variant="ghost"
                            size="sm"
                            onClick={() => downloadAttachment(attachment.filePath, attachment.originalFileName || attachment.fileName)}
                          >
                            <Download className="h-4 w-4" />
                          </Button>
                          {!readOnly && (
                            <Button
                              type="button"
                              variant="ghost"
                              size="sm"
                              onClick={() => removeExistingAttachment(attachment.id)}
                            >
                              <X className="h-4 w-4" />
                            </Button>
                          )}
                        </div>
                      </div>
                    ))}
                  </div>
                </div>
              )}

              {!readOnly && (
                <Dropzone
                  maxSize={10 * 1024 * 1024} // 10MB
                  onDropAccepted={(files) => {
                    const newFiles = Array.from(files)
                    setAttachmentFiles(prev => [...prev, ...newFiles])
                  }}
                  onDropRejected={() => {
                    toast({
                      title: "파일 업로드 거부",
                      description: "파일 크기 및 형식을 확인해주세요.",
                      variant: "destructive",
                    })
                  }}
                >
                  <DropzoneZone>
                    <DropzoneUploadIcon className="mx-auto h-12 w-12 text-muted-foreground" />
                    <DropzoneTitle className="text-lg font-medium">
                      파일을 드래그하거나 클릭하여 업로드
                    </DropzoneTitle>
                    <DropzoneDescription className="text-sm text-muted-foreground">
                      PDF, Word, Excel, 이미지 파일 (최대 10MB)
                    </DropzoneDescription>
                  </DropzoneZone>
                  <DropzoneInput />
                </Dropzone>
              )}

              {attachmentFiles.length > 0 && (
                <div className="space-y-2">
                  <h4 className="text-sm font-medium">새로 추가할 파일</h4>
                  <div className="space-y-2">
                    {attachmentFiles.map((file, index) => (
                      <div
                        key={index}
                        className="flex items-center justify-between p-3 bg-muted rounded-lg"
                      >
                        <div className="flex items-center gap-3">
                          <FileText className="h-4 w-4 text-muted-foreground" />
                          <div>
                            <p className="text-sm font-medium">{file.name}</p>
                            <p className="text-xs text-muted-foreground">
                              {(file.size / 1024 / 1024).toFixed(2)} MB
                            </p>
                          </div>
                        </div>
                        {!readOnly && (
                          <Button
                            type="button"
                            variant="ghost"
                            size="sm"
                            onClick={() => removeAttachmentFile(index)}
                          >
                            제거
                          </Button>
                        )}
                      </div>
                    ))}
                  </div>
                </div>
              )}
            </div>

            {/* 저장 버튼 */}
            {!readOnly && (
              <div className="flex justify-end">
                <Button type="submit" disabled={isSubmitting}>
                  {isSubmitting && <Loader2 className="mr-2 h-4 w-4 animate-spin" />}
                  <Save className="mr-2 h-4 w-4" />
                  저장
                </Button>
              </div>
            )}
          </form>
        </Form>
      </CardContent>
    </Card>
  )
}