"use client"

import * as React from "react"
import { useState } from "react"
import { useRouter } from "next/navigation"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"
import { Textarea } from "@/components/ui/textarea"
import { Badge } from "@/components/ui/badge"
import { ScrollArea } from "@/components/ui/scroll-area"
import { CalendarIcon, Save, Send, AlertCircle } from "lucide-react"
import { Calendar } from "@/components/ui/calendar"
import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
import { Alert, AlertDescription } from "@/components/ui/alert"
import { formatDate, cn } from "@/lib/utils"
import { toast } from "sonner"

interface QuotationResponseTabProps {
  quotation: {
    id: number
    status: string
    totalPrice: string | null
    currency: string | null
    validUntil: Date | null
    remark: string | null
    rfq: {
      id: number
      rfqCode: string | null
      materialCode: string | null
      dueDate: Date | null
      status: string | null
      item?: {
        itemName: string | null
      } | null
    } | null
    vendor: {
      vendorName: string
    } | null
  }
}

const CURRENCIES = [
  { value: "KRW", label: "KRW (원)" },
  { value: "USD", label: "USD (달러)" },
  { value: "EUR", label: "EUR (유로)" },
  { value: "JPY", label: "JPY (엔)" },
  { value: "CNY", label: "CNY (위안)" },
]

export function QuotationResponseTab({ quotation }: QuotationResponseTabProps) {
  const [totalPrice, setTotalPrice] = useState(quotation.totalPrice?.toString() || "")
  const [currency, setCurrency] = useState(quotation.currency || "KRW")
  const [validUntil, setValidUntil] = useState<Date | undefined>(
    quotation.validUntil ? new Date(quotation.validUntil) : undefined
  )
  const [remark, setRemark] = useState(quotation.remark || "")
  const [isLoading, setIsLoading] = useState(false)
  const router = useRouter()

  const rfq = quotation.rfq
  const isDueDatePassed = rfq?.dueDate ? new Date(rfq.dueDate) < new Date() : false
  const canSubmit = quotation.status === "Draft" && !isDueDatePassed
  const canEdit = ["Draft", "Revised"].includes(quotation.status) && !isDueDatePassed

  const handleSaveDraft = async () => {
    setIsLoading(true)
    try {
      const { updateTechSalesVendorQuotation } = await import("@/lib/techsales-rfq/service")
      
      const result = await updateTechSalesVendorQuotation({
        id: quotation.id,
        currency,
        totalPrice,
        validUntil: validUntil!,
        remark,
        updatedBy: 1 // TODO: 실제 사용자 ID로 변경
      })

      if (result.error) {
        toast.error(result.error)
      } else {
        toast.success("임시 저장되었습니다.")
        // 페이지 새로고침 대신 router.refresh() 사용
        router.refresh()
      }
    } catch {
      toast.error("저장 중 오류가 발생했습니다.")
    } finally {
      setIsLoading(false)
    }
  }

  const handleSubmit = async () => {
    if (!totalPrice || !currency || !validUntil) {
      toast.error("모든 필수 항목을 입력해주세요.")
      return
    }

    setIsLoading(true)
    try {
      const { submitTechSalesVendorQuotation } = await import("@/lib/techsales-rfq/service")
      
      const result = await submitTechSalesVendorQuotation({
        id: quotation.id,
        currency,
        totalPrice,
        validUntil: validUntil!,
        remark,
        updatedBy: 1 // TODO: 실제 사용자 ID로 변경
      })

      if (result.error) {
        toast.error(result.error)
      } else {
        toast.success("견적서가 제출되었습니다.")
        // 페이지 새로고침 대신 router.refresh() 사용
        router.refresh()
      }
    } catch {
      toast.error("제출 중 오류가 발생했습니다.")
    } finally {
      setIsLoading(false)
    }
  }

  const getStatusBadgeVariant = (status: string) => {
    switch (status) {
      case "Draft":
        return "secondary"
      case "Submitted":
        return "default"
      case "Revised":
        return "outline"
      case "Rejected":
        return "destructive"
      case "Accepted":
        return "success"
      default:
        return "secondary"
    }
  }

  const getStatusLabel = (status: string) => {
    switch (status) {
      case "Draft":
        return "초안"
      case "Submitted":
        return "제출됨"
      case "Revised":
        return "수정됨"
      case "Rejected":
        return "반려됨"
      case "Accepted":
        return "승인됨"
      default:
        return status
    }
  }

  return (
    <ScrollArea className="h-full">
      <div className="space-y-6 p-1">
        {/* 견적서 상태 정보 */}
        <Card>
          <CardHeader>
            <CardTitle className="flex items-center gap-2">
              견적서 상태
              <Badge variant={getStatusBadgeVariant(quotation.status)}>
                {getStatusLabel(quotation.status)}
              </Badge>
            </CardTitle>
            <CardDescription>
              현재 견적서 상태 및 마감일 정보
            </CardDescription>
          </CardHeader>
          <CardContent className="space-y-4">
            <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
              <div className="space-y-2">
                <div className="text-sm font-medium text-muted-foreground">견적서 상태</div>
                <div className="text-sm">{getStatusLabel(quotation.status)}</div>
              </div>
              <div className="space-y-2">
                <div className="text-sm font-medium text-muted-foreground">RFQ 마감일</div>
                <div className="text-sm">
                  {rfq?.dueDate ? formatDate(rfq.dueDate) : "N/A"}
                </div>
              </div>
              <div className="space-y-2">
                <div className="text-sm font-medium text-muted-foreground">남은 시간</div>
                <div className="text-sm">
                  {isDueDatePassed ? (
                    <span className="text-destructive">마감됨</span>
                  ) : rfq?.dueDate ? (
                    <span className="text-green-600">
                      {Math.ceil((new Date(rfq.dueDate).getTime() - new Date().getTime()) / (1000 * 60 * 60 * 24))}일
                    </span>
                  ) : (
                    "N/A"
                  )}
                </div>
              </div>
            </div>

            {isDueDatePassed && (
              <Alert>
                <AlertCircle className="h-4 w-4" />
                <AlertDescription>
                  RFQ 마감일이 지났습니다. 견적서를 수정하거나 제출할 수 없습니다.
                </AlertDescription>
              </Alert>
            )}

            {!canEdit && !isDueDatePassed && (
              <Alert>
                <AlertCircle className="h-4 w-4" />
                <AlertDescription>
                  현재 상태에서는 견적서를 수정할 수 없습니다.
                </AlertDescription>
              </Alert>
            )}
          </CardContent>
        </Card>

        {/* 견적 응답 폼 */}
        <Card>
          <CardHeader>
            <CardTitle>견적 응답</CardTitle>
            <CardDescription>
              총 가격, 통화, 유효기간을 입력해주세요.
            </CardDescription>
          </CardHeader>
          <CardContent className="space-y-6">
            {/* 총 가격 */}
            <div className="space-y-2">
              <Label htmlFor="totalPrice">
                총 가격 <span className="text-destructive">*</span>
              </Label>
              <Input
                id="totalPrice"
                type="number"
                placeholder="총 가격을 입력하세요"
                value={totalPrice}
                onChange={(e) => setTotalPrice(e.target.value)}
                disabled={!canEdit}
                className="text-right"
              />
            </div>

            {/* 통화 */}
            <div className="space-y-2">
              <Label htmlFor="currency">
                통화 <span className="text-destructive">*</span>
              </Label>
              <Select value={currency} onValueChange={setCurrency} disabled={!canEdit}>
                <SelectTrigger>
                  <SelectValue placeholder="통화를 선택하세요" />
                </SelectTrigger>
                <SelectContent>
                  {CURRENCIES.map((curr) => (
                    <SelectItem key={curr.value} value={curr.value}>
                      {curr.label}
                    </SelectItem>
                  ))}
                </SelectContent>
              </Select>
            </div>

            {/* 유효기간 */}
            <div className="space-y-2">
              <Label>
                견적 유효기간 <span className="text-destructive">*</span>
              </Label>
              <Popover>
                <PopoverTrigger asChild>
                  <Button
                    variant="outline"
                    className={cn(
                      "w-full justify-start text-left font-normal",
                      !validUntil && "text-muted-foreground"
                    )}
                    disabled={!canEdit}
                  >
                    <CalendarIcon className="mr-2 h-4 w-4" />
                    {validUntil ? formatDate(validUntil) : "날짜를 선택하세요"}
                  </Button>
                </PopoverTrigger>
                <PopoverContent className="w-auto p-0" align="start">
                  <Calendar
                    mode="single"
                    selected={validUntil}
                    onSelect={setValidUntil}
                    disabled={(date) => date < new Date()}
                    initialFocus
                  />
                </PopoverContent>
              </Popover>
            </div>

            {/* 비고 */}
            <div className="space-y-2">
              <Label htmlFor="remark">비고</Label>
              <Textarea
                id="remark"
                placeholder="추가 설명이나 조건을 입력하세요"
                value={remark}
                onChange={(e) => setRemark(e.target.value)}
                disabled={!canEdit}
                rows={4}
              />
            </div>

            {/* 액션 버튼 */}
            {canEdit && (
              <div className="flex gap-2 pt-4">
                <Button
                  variant="outline"
                  onClick={handleSaveDraft}
                  disabled={isLoading}
                  className="flex-1"
                >
                  <Save className="mr-2 h-4 w-4" />
                  임시 저장
                </Button>
                {canSubmit && (
                  <Button
                    onClick={handleSubmit}
                    disabled={isLoading || !totalPrice || !currency || !validUntil}
                    className="flex-1"
                  >
                    <Send className="mr-2 h-4 w-4" />
                    견적서 제출
                  </Button>
                )}
              </div>
            )}
          </CardContent>
        </Card>

        {/* 현재 견적 정보 (읽기 전용) */}
        {quotation.totalPrice && (
          <Card>
            <CardHeader>
              <CardTitle>현재 견적 정보</CardTitle>
              <CardDescription>
                저장된 견적 정보
              </CardDescription>
            </CardHeader>
            <CardContent className="space-y-4">
              <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
                <div className="space-y-2">
                  <div className="text-sm font-medium text-muted-foreground">총 가격</div>
                  <div className="text-lg font-semibold">
                    {parseFloat(quotation.totalPrice).toLocaleString()} {quotation.currency}
                  </div>
                </div>
                <div className="space-y-2">
                  <div className="text-sm font-medium text-muted-foreground">통화</div>
                  <div className="text-sm">{quotation.currency}</div>
                </div>
                <div className="space-y-2">
                  <div className="text-sm font-medium text-muted-foreground">유효기간</div>
                  <div className="text-sm">
                    {quotation.validUntil ? formatDate(quotation.validUntil) : "N/A"}
                  </div>
                </div>
              </div>
              {quotation.remark && (
                <div className="space-y-2">
                  <div className="text-sm font-medium text-muted-foreground">비고</div>
                  <div className="text-sm p-3 bg-muted rounded-md">{quotation.remark}</div>
                </div>
              )}
            </CardContent>
          </Card>
        )}
      </div>
    </ScrollArea>
  )
}