'use client'

import { Button } from "@/components/ui/button"
import { Badge } from "@/components/ui/badge"
import { User, CheckCircle2 } from "lucide-react"
import { CowDetail } from "@/types/cow.types"

interface CowSelectSheetProps {
  isOpen: boolean
  onClose: () => void
  farmCows: CowDetail[]
  selectedCowsForCompare: number[]
  toggleCowForCompare: (cowNo: number) => void
  onCompare: () => void
  onClearSelection: () => void
}

export function CowSelectSheet({
  isOpen,
  onClose,
  farmCows,
  selectedCowsForCompare,
  toggleCowForCompare,
  onCompare,
  onClearSelection
}: CowSelectSheetProps) {
  if (!isOpen) return null

  return (
    <div className="fixed inset-0 bg-black/50 z-50 flex items-end md:items-center md:justify-center">
      <div className="bg-white w-full md:max-w-3xl md:max-h-[80vh] md:rounded-lg overflow-hidden flex flex-col max-h-[90vh] rounded-t-2xl md:rounded-2xl">
        {/* 헤더 */}
        <div className="p-4 border-b border-border flex items-center justify-between bg-primary/5">
          <div>
            <h2 className="text-lg font-bold flex items-center gap-2">
              <User className="w-5 h-5 text-primary" />
              농장 내 개체 비교
            </h2>
            <p className="text-sm text-muted-foreground mt-1">
              비교할 개체를 선택하세요 ({selectedCowsForCompare.length}/{farmCows.length})
            </p>
          </div>
          <Button onClick={onClose} variant="ghost" size="sm">
            닫기
          </Button>
        </div>

        {/* 개체 목록 */}
        <div className="flex-1 overflow-y-auto p-4">
          {farmCows.length === 0 ? (
            <div className="text-center py-12 text-muted-foreground">
              <User className="w-12 h-12 mx-auto mb-4 opacity-50" />
              <p>같은 농장에 다른 개체가 없습니다</p>
            </div>
          ) : (
            <div className="space-y-2">
              {farmCows.map((farmCow) => {
                const isSelected = selectedCowsForCompare.includes(farmCow.pkCowNo)
                return (
                  <div
                    key={farmCow.pkCowNo}
                    onClick={() => toggleCowForCompare(farmCow.pkCowNo)}
                    className={`p-4 rounded-lg border-2 cursor-pointer transition-all ${
                      isSelected
                        ? 'border-primary bg-primary/5'
                        : 'border-border hover:border-primary/50 hover:bg-muted/50'
                    }`}
                  >
                    <div className="flex items-start gap-3">
                      {/* 체크박스 */}
                      <div className="flex items-center pt-1">
                        <div
                          className={`w-5 h-5 rounded border-2 flex items-center justify-center ${
                            isSelected
                              ? 'bg-primary border-primary'
                              : 'border-muted-foreground'
                          }`}
                        >
                          {isSelected && (
                            <CheckCircle2 className="w-4 h-4 text-white" />
                          )}
                        </div>
                      </div>

                      {/* 개체 정보 */}
                      <div className="flex-1">
                        <div className="flex items-start justify-between mb-2">
                          <div>
                            <h4 className="font-bold text-foreground">{farmCow.cowId || farmCow.pkCowNo}</h4>
                            {farmCow.cowId && (
                              <p className="text-sm text-muted-foreground">{farmCow.cowId}</p>
                            )}
                          </div>
                        </div>

                        {/* 상세 정보 */}
                        <div className="grid grid-cols-3 gap-2 text-xs mt-2">
                          <div>
                            <div className="text-muted-foreground">생년월일</div>
                            <div className="font-semibold text-foreground">
                              {farmCow.cowBirthDt
                                ? new Date(farmCow.cowBirthDt).toLocaleDateString('ko-KR', {
                                    year: '2-digit',
                                    month: '2-digit',
                                    day: '2-digit'
                                  })
                                : 'N/A'}
                            </div>
                          </div>
                          <div>
                            <div className="text-muted-foreground">나이</div>
                            <div className="font-semibold text-foreground">
                              {farmCow.age ? `${farmCow.age}세` : 'N/A'}
                            </div>
                          </div>
                          <div>
                            <div className="text-muted-foreground">성별</div>
                            <div className="font-semibold text-foreground">
                              {farmCow.cowSex === 'F' ? '암' : farmCow.cowSex === 'M' ? '수' : 'N/A'}
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                )
              })}
            </div>
          )}
        </div>

        {/* 푸터 */}
        <div className="p-4 border-t border-border bg-muted/30 flex items-center justify-between">
          <div className="text-sm text-muted-foreground">
            {selectedCowsForCompare.length}개 개체 선택됨
          </div>
          <div className="flex gap-2">
            <Button
              onClick={onClearSelection}
              variant="ghost"
              size="sm"
              disabled={selectedCowsForCompare.length === 0}
            >
              선택 해제
            </Button>
            <Button
              onClick={onCompare}
              className="gap-2"
              disabled={selectedCowsForCompare.length === 0}
            >
              <CheckCircle2 className="w-4 h-4" />
              비교하기
            </Button>
          </div>
        </div>
      </div>
    </div>
  )
}
