"use client"

import * as React from "react"
import { useState, useEffect } from "react"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Button } from "@/components/ui/button"
import { Badge } from "@/components/ui/badge"
import { ScrollArea } from "@/components/ui/scroll-area"
import { Skeleton } from "@/components/ui/skeleton"
import { MessageSquare, Paperclip } from "lucide-react"
import { fetchTechSalesVendorCommentsClient, TechSalesComment } from "../buyer-communication-drawer"
import { BuyerCommunicationDrawer } from "../buyer-communication-drawer"

interface CommunicationTabProps {
  quotation: {
    id: number
    rfqId: number
    vendorId: number
    quotationCode: string | null
    rfq: {
      id: number
      rfqCode: string | null
      createdByUser?: {
        id: number
        name: string | null
        email: string | null
      } | null
    } | null
    vendor: {
      vendorName: string
    } | null
  }
}

export function CommunicationTab({ quotation }: CommunicationTabProps) {
  const [comments, setComments] = useState<TechSalesComment[]>([]);
  const [unreadCount, setUnreadCount] = useState(0);
  const [loadingComments, setLoadingComments] = useState(false);
  const [communicationDrawerOpen, setCommunicationDrawerOpen] = useState(false);

  // 컴포넌트 마운트 시 메시지 미리 로드
  useEffect(() => {
    if (quotation) {
      loadCommunicationData();
    }
  }, [quotation]);

  // 메시지 데이터 로드 함수
  const loadCommunicationData = async () => {
    try {
      setLoadingComments(true);
      const commentsData = await fetchTechSalesVendorCommentsClient(quotation.rfqId, quotation.vendorId);
      setComments(commentsData);

      // 읽지 않은 메시지 수 계산 (구매자가 보낸 메시지 중 읽지 않은 것)
      const unread = commentsData.filter(
        comment => !comment.isVendorComment && !comment.isRead
      ).length;
      setUnreadCount(unread);
    } catch (error) {
      console.error("메시지 데이터 로드 오류:", error);
    } finally {
      setLoadingComments(false);
    }
  };

  // 커뮤니케이션 드로어가 닫힐 때 데이터 새로고침
  const handleCommunicationDrawerChange = (open: boolean) => {
    setCommunicationDrawerOpen(open);
    if (!open) {
      loadCommunicationData(); // 드로어가 닫힐 때 데이터 새로고침
    }
  };

  return (
    <div className="h-full flex flex-col">
      {/* 헤더 */}
      <Card className="mb-4">
        <CardHeader className="flex flex-row items-center justify-between">
          <div>
            <CardTitle className="flex items-center gap-2">
              <MessageSquare className="h-5 w-5" />
              커뮤니케이션
              {unreadCount > 0 && (
                <Badge variant="destructive" className="ml-2">
                  새 메시지 {unreadCount}
                </Badge>
              )}
            </CardTitle>
            <CardDescription>
              RFQ {quotation.rfq?.rfqCode || "미할당"}에 대한 구매담당자와의 커뮤니케이션
            </CardDescription>
          </div>
          <Button
            onClick={() => setCommunicationDrawerOpen(true)}
            variant="outline"
            size="sm"
          >
            <MessageSquare className="h-4 w-4 mr-2" />
            {unreadCount > 0 ? "새 메시지 확인" : "메시지 보내기"}
          </Button>
        </CardHeader>
        <CardContent>
          <div className="flex items-center gap-4 text-sm text-muted-foreground">
            <span>구매담당자: {quotation.rfq?.createdByUser?.name || "N/A"}</span>
            <span>•</span>
            <span>벤더: {quotation.vendor?.vendorName}</span>
          </div>
        </CardContent>
      </Card>

      {/* 메시지 미리보기 */}
      <Card className="flex-1 flex flex-col min-h-0">
        <CardHeader>
          <CardTitle className="text-lg">메시지 ({comments.length})</CardTitle>
        </CardHeader>
        <CardContent>
          {loadingComments ? (
            <div className="flex items-center justify-center p-8">
              <div className="text-center">
                <Skeleton className="h-4 w-32 mx-auto mb-2" />
                <Skeleton className="h-4 w-48 mx-auto" />
              </div>
            </div>
          ) : comments.length === 0 ? (
            <div className="min-h-[200px] flex flex-col items-center justify-center text-center p-8">
              <div className="max-w-md">
                <div className="mx-auto bg-primary/10 rounded-full w-12 h-12 flex items-center justify-center mb-4">
                  <MessageSquare className="h-6 w-6 text-primary" />
                </div>
                <h3 className="text-lg font-medium mb-2">아직 메시지가 없습니다</h3>
                <p className="text-muted-foreground mb-4">
                  견적서에 대한 질문이나 의견이 있으신가요? 구매자와 메시지를 주고받으세요.
                </p>
                <Button
                  onClick={() => setCommunicationDrawerOpen(true)}
                  className="mx-auto"
                >
                  메시지 보내기
                </Button>
              </div>
            </div>
          ) : (
            <div className="space-y-4">
              {/* 최근 메시지 3개 미리보기 */}
              <div className="space-y-2">
                <h3 className="text-sm font-medium">최근 메시지</h3>
                <ScrollArea className="h-[250px] rounded-md border p-4">
                  {comments.slice(-3).map(comment => (
                    <div
                      key={comment.id}
                      className={`p-3 mb-3 rounded-lg ${!comment.isVendorComment && !comment.isRead
                        ? 'bg-primary/10 border-l-4 border-primary'
                        : 'bg-muted/50'
                        }`}
                    >
                      <div className="flex justify-between items-center mb-1">
                        <span className="text-sm font-medium">
                          {comment.isVendorComment
                            ? '나'
                            : comment.userName || '구매 담당자'}
                        </span>
                        <span className="text-xs text-muted-foreground">
                          {new Date(comment.createdAt).toLocaleDateString()}
                        </span>
                      </div>
                      <p className="text-sm line-clamp-2">{comment.content}</p>
                      {comment.attachments.length > 0 && (
                        <div className="mt-1 text-xs text-muted-foreground">
                          <Paperclip className="h-3 w-3 inline mr-1" />
                          첨부파일 {comment.attachments.length}개
                        </div>
                      )}
                    </div>
                  ))}
                </ScrollArea>
              </div>

              <div className="flex justify-center">
                <Button
                  onClick={() => setCommunicationDrawerOpen(true)}
                  className="w-full"
                >
                  전체 메시지 보기 ({comments.length}개)
                </Button>
              </div>
            </div>
          )}
        </CardContent>
      </Card>

      {/* 커뮤니케이션 드로어 */}
      <BuyerCommunicationDrawer
        open={communicationDrawerOpen}
        onOpenChange={handleCommunicationDrawerChange}
        quotation={{
          id: quotation.id,
          rfqId: quotation.rfqId,
          vendorId: quotation.vendorId,
          quotationCode: quotation.quotationCode,
          rfq: quotation.rfq ? {
            rfqCode: quotation.rfq.rfqCode
          } : undefined
        }}
        onSuccess={loadCommunicationData}
      />
    </div>
  )
}