"use client"

import * as React from "react"
import { useForm, useFieldArray } from "react-hook-form"
import { z } from "zod"
import { zodResolver } from "@hookform/resolvers/zod"
import { Download, X, Loader2 } from "lucide-react"
import prettyBytes from "pretty-bytes"
import { toast } from "sonner"

import {
  Sheet,
  SheetClose,
  SheetContent,
  SheetDescription,
  SheetFooter,
  SheetHeader,
  SheetTitle,
} from "@/components/ui/sheet"
import { Button } from "@/components/ui/button"
import {
  Form,
  FormControl,
  FormField,
  FormItem,
  FormLabel,
  FormMessage,
} from "@/components/ui/form"
import { Textarea } from "@/components/ui/textarea"
import {
  Dropzone,
  DropzoneZone,
  DropzoneUploadIcon,
  DropzoneTitle,
  DropzoneDescription,
  DropzoneInput,
} from "@/components/ui/dropzone"
import {
  Table,
  TableHeader,
  TableRow,
  TableHead,
  TableBody,
  TableCell,
} from "@/components/ui/table"

import { formatDate } from "@/lib/utils"
import { createRfqCommentWithAttachments } from "@/lib/rfqs/service"


export interface MatchedVendorComment {
  id: number
  commentText: string
  commentedBy?: number
  commentedByEmail?: string
  createdAt?:  Date
  attachments?: {
    id: number
    fileName: string
    filePath: string
  }[]
}

// 1) props 정의
interface CommentSheetProps extends React.ComponentPropsWithRef<typeof Sheet> {
  initialComments?: MatchedVendorComment[]
  currentUserId: number
  rfqId: number
  vendorId: number
  onCommentsUpdated?: (comments: MatchedVendorComment[]) => void
  isLoading?: boolean // New prop
}

// 2) 폼 스키마
const commentFormSchema = z.object({
  commentText: z.string().min(1, "댓글을 입력하세요."),
  newFiles: z.array(z.any()).optional(), // File[]
})
type CommentFormValues = z.infer<typeof commentFormSchema>

const MAX_FILE_SIZE = 30e6 // 30MB

export function CommentSheet({
  rfqId,
  vendorId,
  initialComments = [],
  currentUserId,
  onCommentsUpdated,
  isLoading = false, // Default to false
  ...props
}: CommentSheetProps) {

  console.log(initialComments) 

  const [comments, setComments] = React.useState<MatchedVendorComment[]>(initialComments)
  const [isPending, startTransition] = React.useTransition()

  React.useEffect(() => {
    setComments(initialComments)
  }, [initialComments])

  const form = useForm<CommentFormValues>({
    resolver: zodResolver(commentFormSchema),
    defaultValues: {
      commentText: "",
      newFiles: [],
    },
  })

  const { fields: newFileFields, append, remove } = useFieldArray({
    control: form.control,
    name: "newFiles",
  })

  // (A) 기존 코멘트 렌더링
  function renderExistingComments() {

    if (isLoading) {
      return (
        <div className="flex justify-center items-center h-32">
          <Loader2 className="h-4 w-4 animate-spin text-muted-foreground" />
          <span className="ml-2 text-sm text-muted-foreground">Loading comments...</span>
        </div>
      )
    }

    if (comments.length === 0) {
      return <p className="text-sm text-muted-foreground">No comments yet</p>
    }
    return (
      <Table>
        <TableHeader>
          <TableRow>
            <TableHead className="w-1/2">Comment</TableHead>
            <TableHead>Attachments</TableHead>
            <TableHead>Created At</TableHead>
            <TableHead>Created By</TableHead>
          </TableRow>
        </TableHeader>
        <TableBody>
          {comments.map((c) => ( 
            <TableRow key={c.id}>
              <TableCell>{c.commentText}</TableCell>
              <TableCell>
                {!c.attachments?.length && (
                  <span className="text-sm text-muted-foreground">No files</span>
                )}
                {c.attachments?.length && (
                  <div className="flex flex-col gap-1">
                    {c.attachments.map((att) => (
                      <div key={att.id} className="flex items-center gap-2">
                        <a
                     href={`/api/rfq-download?path=${encodeURIComponent(att.filePath)}`}
                          download
                          target="_blank"
                          rel="noreferrer"
                          className="inline-flex items-center gap-1 text-blue-600 underline"
                        >
                          <Download className="h-4 w-4" />
                          {att.fileName}
                        </a>
                      </div>
                    ))}
                  </div>
                )}
              </TableCell>
              <TableCell> { c.createdAt ? formatDate(c.createdAt): "-"}</TableCell>
              <TableCell>{c.commentedByEmail ?? "-"}</TableCell>
            </TableRow>
          ))}
        </TableBody>
      </Table>
    )
  }

  // (B) 파일 드롭
  function handleDropAccepted(files: File[]) {
    append(files)
  }

  // (C) Submit
  async function onSubmit(data: CommentFormValues) {
    if (!rfqId) return
    startTransition(async () => {
      try {
        const res = await createRfqCommentWithAttachments({
          rfqId,
          vendorId,
          commentText: data.commentText,
          commentedBy: currentUserId,
          evaluationId: null,
          cbeId: null,
          files: data.newFiles,
        })

        if (!res.ok) {
          throw new Error("Failed to create comment")
        }

        toast.success("Comment created")

        // 임시로 새 코멘트 추가
        const newComment: MatchedVendorComment = {
          id: res.commentId, // 서버 응답
          commentText: data.commentText,
          commentedBy: currentUserId,
          createdAt: res.createdAt,
          attachments:
            data.newFiles?.map((f) => ({
              id: Math.floor(Math.random() * 1e6),
              fileName: f.name,
              filePath: "/uploads/" + f.name,
            })) || [],
        }
        setComments((prev) => [...prev, newComment])
        onCommentsUpdated?.([...comments, newComment])

        form.reset()
      } catch (err: any) {
        console.error(err)
        toast.error("Error: " + err.message)
      }
    })
  }

  return (
    <Sheet {...props}>
      <SheetContent className="flex flex-col gap-6 sm:max-w-lg">
        <SheetHeader className="text-left">
          <SheetTitle>Comments</SheetTitle>
          <SheetDescription>
            필요시 첨부파일과 함께 문의/코멘트를 남길 수 있습니다.
          </SheetDescription>
        </SheetHeader>

        <div className="max-h-[300px] overflow-y-auto">{renderExistingComments()}</div>

        <Form {...form}>
          <form onSubmit={form.handleSubmit(onSubmit)} className="flex flex-col gap-4">
            <FormField
              control={form.control}
              name="commentText"
              render={({ field }) => (
                <FormItem>
                  <FormLabel>New Comment</FormLabel>
                  <FormControl>
                    <Textarea placeholder="Enter your comment..." {...field} />
                  </FormControl>
                  <FormMessage />
                </FormItem>
              )}
            />

            <Dropzone
              maxSize={MAX_FILE_SIZE}
              onDropAccepted={handleDropAccepted}
              onDropRejected={(rej) => {
                toast.error("File rejected: " + (rej[0]?.file?.name || ""))
              }}
            >
              {({ maxSize }) => (
                <DropzoneZone className="flex justify-center">
                  <DropzoneInput />
                  <div className="flex items-center gap-6">
                    <DropzoneUploadIcon />
                    <div className="grid gap-0.5">
                      <DropzoneTitle>Drop to attach files</DropzoneTitle>
                      <DropzoneDescription>
                        Max size: {prettyBytes(maxSize || 0)}
                      </DropzoneDescription>
                    </div>
                  </div>
                </DropzoneZone>
              )}
            </Dropzone>

            {newFileFields.length > 0 && (
              <div className="flex flex-col gap-2">
                {newFileFields.map((field, idx) => {
                  const file = form.getValues(`newFiles.${idx}`)
                  if (!file) return null
                  return (
                    <div
                      key={field.id}
                      className="flex items-center justify-between border rounded p-2"
                    >
                      <span className="text-sm">
                        {file.name} ({prettyBytes(file.size)})
                      </span>
                      <Button
                        variant="ghost"
                        size="icon"
                        type="button"
                        onClick={() => remove(idx)}
                      >
                        <X className="h-4 w-4" />
                      </Button>
                    </div>
                  )
                })}
              </div>
            )}

            <SheetFooter className="gap-2 pt-4">
              <SheetClose asChild>
                <Button type="button" variant="outline">
                  Cancel
                </Button>
              </SheetClose>
              <Button disabled={isPending}>
                {isPending && <Loader2 className="mr-2 h-4 w-4 animate-spin" />}
                Save
              </Button>
            </SheetFooter>
          </form>
        </Form>
      </SheetContent>
    </Sheet>
  )
}