import {
  Button, Item,
  ItemContent,
  ItemDescription,
  ItemFooter,
  ItemTitle
} from "@repo/shadcn-ui/components";
import {
  EyeIcon,
  RefreshCwIcon,
  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 (
    <Item variant="outline" className={className}>
      <ItemContent>
        <ItemTitle className='flex gap-2 w-full justify-between'>
          <span className='grow'>{customer.name}</span>
          <Button
            type='button'
            variant='ghost'
            size='sm'
            className='cursor-pointer'
            onClick={onViewCustomer}
          >
            <EyeIcon className='size-4 text-muted-foreground' />
            <span className='sr-only'>Ver ficha completa</span>
          </Button>
        </ItemTitle>
        <ItemDescription className='text-sm text-muted-foreground'>
          {customer.tin && (<span>{customer.tin}</span>)}
          {/* Dirección con mejor estructura */}
          {hasAddress && (
            <div className='x'>

              {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>

          )}
        </ItemDescription>
      </ItemContent>
      <ItemFooter>
        <div className='flex flex-wrap gap-2'>
          <Button
            type="button"
            variant='outline'
            size='sm'
            onClick={onChangeCustomer}
            className='flex-1 min-w-36 gap-2 cursor-pointer'
          >
            <RefreshCwIcon className='size-4' />
            <span className='text-sm text-muted-foreground'>
              Cambiar de cliente
            </span>
          </Button>
          <Button
            type="button"
            variant='outline'
            size='sm'
            onClick={onAddNewCustomer}
            className='flex-1 min-w-36 gap-2 cursor-pointer'
          >
            <UserPlusIcon className='size-4' />
            <span className='text-sm text-muted-foreground'>
              Nuevo cliente
            </span>
          </Button>
        </div>
      </ItemFooter>
    </Item>
  );
};