import { Button, Separator } from "@repo/shadcn-ui/components";
import {
  CreditCard,
  EyeIcon,
  MapPinHouseIcon,
  RefreshCwIcon,
  UserIcon,
  UserPlusIcon,
} from "lucide-react";
import { CustomerSummary } from "../../schemas";

interface CustomerCardProps {
  customer: CustomerSummary;

  onViewCustomer?: () => void;
  onChangeCustomer?: () => void;
  onAddNewCustomer?: () => void;

  className: string;
}

export const CustomerCard = ({
  customer,
  onViewCustomer,
  onChangeCustomer,
  onAddNewCustomer,
  className,
}: CustomerCardProps) => {
  const hasAddress =
    customer.street ||
    customer.street2 ||
    customer.city ||
    customer.postal_code ||
    customer.province ||
    customer.country;

  return (
    <div className={className}>
      <div className='flex items-start gap-4'>
        {/* Avatar mejorado con gradiente sutil */}
        <div className='flex size-12 items-center justify-center rounded-full bg-muted group-hover:bg-primary/15'>
          <UserIcon className='size-6 text-muted-foreground group-hover:text-primary' />
        </div>

        <div className='flex-1 min-w-0 '>
          {/* Nombre del cliente */}
          <h3 className='font-semibold text-foreground text-lg leading-tight mb-1 text-left text-balance'>
            {customer.name}
          </h3>

          {/* NIF/CIF con icono */}
          {customer.tin && (
            <div className='flex items-center gap-2 text-sm text-muted-foreground mb-3'>
              <CreditCard className='h-4 w-4 shrink-0' />
              <span className='font-medium'>{customer.tin}</span>
            </div>
          )}

          {/* Separador si hay dirección */}
          {hasAddress && <Separator className='my-3' />}

          {/* Dirección con mejor estructura */}
          {hasAddress && (
            <div className='space-y-2'>
              <div className='flex items-start gap-2 text-sm text-muted-foreground'>
                <MapPinHouseIcon className='h-4 w-4 shrink-0 mt-0.5 text-primary/60' />
                <div className='space-y-0.5 leading-relaxed  flex-1 text-left'>
                  {customer.street && <div>{customer.street}</div>}
                  {customer.street2 && <div>{customer.street2}</div>}
                  <div className='flex flex-wrap gap-x-2'>
                    {customer.postal_code && <span>{customer.postal_code}</span>}
                    {customer.city && <span>{customer.city}</span>}
                  </div>
                  <div className='flex flex-wrap gap-x-2'>
                    {customer.province && <span>{customer.province}</span>}
                    {customer.country && <span>{customer.country}</span>}
                  </div>
                </div>
              </div>
            </div>
          )}
        </div>
      </div>

      <Separator className='my-4' />
      <div className='flex flex-wrap gap-2'>
        <Button
          variant='outline'
          size='sm'
          onClick={onViewCustomer}
          className='flex-1 min-w-[140px] gap-2 bg-transparent'
        >
          <EyeIcon className='h-4 w-4' />
          Ver ficha completa
        </Button>
        <Button
          variant='outline'
          size='sm'
          onClick={onChangeCustomer}
          className='flex-1 min-w-[140px] gap-2 bg-transparent'
        >
          <RefreshCwIcon className='h-4 w-4' />
          Cambiar de cliente
        </Button>
        <Button
          variant='outline'
          size='sm'
          onClick={onAddNewCustomer}
          className='flex-1 min-w-[140px] gap-2 bg-transparent'
        >
          <UserPlusIcon className='h-4 w-4' />
          Nuevo cliente
        </Button>
      </div>
    </div>
  );
};