import React from "react";
import { Button } from "@/components/ui/button";
import { Badge } from "@/components/ui/badge";
import { Card, CardContent } from "@/components/ui/card";
import { Baby, ArrowRight } from "lucide-react";

interface LitterOriginSectionProps {
  animal: any;
  onViewSiblings?: (litterId: number) => void;
}

export default function LitterOriginSection({ animal, onViewSiblings }: LitterOriginSectionProps) {
  // Solo mostrar si pertenece a una camada
  if (!animal?.litter) {
    return null;
  }

  const litter = animal.litter;

  return (
    <div className="space-y-4 sm:space-y-6">
      <div className="flex items-center gap-2 mb-3 sm:mb-4">
        <Baby className="text-primary h-4 w-4 sm:h-5 sm:w-5" />
        <h3 className="text-lg sm:text-xl font-bold text-foreground">Camada de Origen</h3>
      </div>
      
      <Card className="border-2 overflow-hidden hover:shadow-xl transition-shadow duration-300">
        <CardContent className="p-4 sm:p-5 md:p-6 bg-gradient-to-br from-background to-muted/20">
          <div className="flex items-start justify-between mb-3 sm:mb-4 gap-2">
            <div className="min-w-0 flex-1">
              <h4 className="font-bold text-foreground text-base sm:text-lg truncate">
                {litter.code || `Camada #${litter.id}`}
              </h4>
              <p className="text-[10px] sm:text-xs text-muted-foreground mt-1">
                Nacido el {litter.birth_date ? new Date(litter.birth_date).toLocaleDateString('es-ES', { year: 'numeric', month: 'long', day: 'numeric' }) : 'Fecha no registrada'}
              </p>
            </div>
            {litter.for_sale && litter.sale_price && (
              <Badge className="bg-emerald-500/10 text-emerald-500 text-[9px] sm:text-[10px] font-black px-1.5 sm:px-2 py-0.5 uppercase whitespace-nowrap flex-shrink-0">
                En Venta
              </Badge>
            )}
          </div>

          <div className="grid grid-cols-1 sm:grid-cols-2 gap-3 sm:gap-4 mb-3 sm:mb-4">
            {litter.father && (
              <div className="flex items-center gap-2">
                <div className="w-8 h-8 sm:w-10 sm:h-10 rounded-full overflow-hidden border-2 border-blue-500 flex-shrink-0">
                  <img
                    src={litter.father.main_photo || '/placeholder.svg'}
                    alt={litter.father.name}
                    className="w-full h-full object-cover"
                  />
                </div>
                <div className="min-w-0 flex-1">
                  <p className="text-[9px] sm:text-[10px] text-muted-foreground font-bold uppercase">Padre</p>
                  <p className="text-xs sm:text-sm font-bold text-foreground truncate">{litter.father.name}</p>
                </div>
              </div>
            )}
            {litter.mother && (
              <div className="flex items-center gap-2">
                <div className="w-8 h-8 sm:w-10 sm:h-10 rounded-full overflow-hidden border-2 border-pink-500 flex-shrink-0">
                  <img
                    src={litter.mother.main_photo || '/placeholder.svg'}
                    alt={litter.mother.name}
                    className="w-full h-full object-cover"
                  />
                </div>
                <div className="min-w-0 flex-1">
                  <p className="text-[9px] sm:text-[10px] text-muted-foreground font-bold uppercase">Madre</p>
                  <p className="text-xs sm:text-sm font-bold text-foreground truncate">{litter.mother.name}</p>
                </div>
              </div>
            )}
          </div>

          {litter.for_sale && litter.sale_price && (
            <div className="mt-3 sm:mt-4 p-3 sm:p-4 bg-emerald-500/5 border border-emerald-500/20 rounded-lg">
              <div className="flex items-center justify-between mb-2 gap-2">
                <p className="text-xs sm:text-sm font-bold text-emerald-600 dark:text-emerald-400">
                  Camada disponible
                </p>
                <p className="text-xl sm:text-2xl font-black text-emerald-600 dark:text-emerald-400 whitespace-nowrap">
                  ${Number(litter.sale_price).toFixed(2)}
                  <span className="text-xs font-medium ml-1">USD</span>
                </p>
              </div>
              {litter.sale_description && (
                <p className="text-[10px] sm:text-xs text-muted-foreground line-clamp-2 mb-2 sm:mb-3">
                  {litter.sale_description}
                </p>
              )}
              <Button
                size="sm"
                className="w-full rounded-lg font-bold text-[10px] sm:text-xs uppercase"
                variant="outline"
                onClick={() => onViewSiblings?.(litter.id)}
              >
                Ver Hermanos de Camada
                <ArrowRight className="h-3 w-3 ml-1" />
              </Button>
            </div>
          )}
        </CardContent>
      </Card>
    </div>
  );
}