import { Badge, Button, Input, Label } from "@repo/shadcn-ui/components";
import { Trash2 } from "lucide-react";
import { useFormContext } from "react-hook-form";

import { useTranslation } from "../../../i18n";
import { InvoiceFormData } from "../../../schemas";
import { CustomerInvoiceTaxesMultiSelect } from '../../customer-invoice-taxes-multi-select';
import { CustomItemViewProps } from "./types";

export interface BlocksViewProps extends CustomItemViewProps { }

export const BlocksView = ({ items, removeItem, updateItem }: BlocksViewProps) => {
  const { t } = useTranslation();
  const { control } = useFormContext<InvoiceFormData>();

  return (
    <div className='space-y-4'>
      {items.map((item: any, index: number) => (
        <div key={`item-${String(index)}`} className='border rounded-lg p-4 space-y-4'>
          <div className='flex items-center justify-between'>
            <Badge variant='outline' className='text-xs'>
              Línea {item.position}
            </Badge>
            {items.length > 1 && (
              <Button
                variant='ghost'
                size='sm'
                onClick={() => removeItem(index)}
                className='text-destructive hover:text-destructive'
              >
                <Trash2 className='h-4 w-4' />
              </Button>
            )}
          </div>

          <div className='grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4'>
            <div className='col-span-full space-y-2'>
              <Label className='text-sm font-medium'>Descripción</Label>
              <Input
                value={item.description}
                onChange={(e) => updateItem(index, "description", e.target.value)}
                placeholder='Descripción del producto o servicio...'
              />
            </div>

            <div className='space-y-2'>
              <Label className='text-sm font-medium'>Cantidad</Label>
              <Input
                type='number'
                step='0.01'
                value={item.quantity}
                onChange={(e) =>
                  updateItem(index, "quantity", Number.parseFloat(e.target.value) || 0)
                }
              />
            </div>

            <div className='space-y-2'>
              <Label className='text-sm font-medium'>Precio Unitario</Label>
              <Input
                type='number'
                step='0.0001'
                value={item.unit_amount}
                onChange={(e) =>
                  updateItem(index, "unit_amount", Number.parseFloat(e.target.value) || 0)
                }
              />
            </div>

            <div className='space-y-2'>
              <Label className='text-sm font-medium'>% Descuento</Label>
              <Input
                type='number'
                step='0.0001'
                value={item.discount_percentage}
                onChange={(e) =>
                  updateItem(index, "discount_percentage", Number.parseFloat(e.target.value) || 0)
                }
              />
            </div>

            <div className='space-y-2 col-start-1'>
              <CustomerInvoiceTaxesMultiSelect
                control={control}
                name={`items.${index}.tax_codes`}
                required
                label={t("form_fields.item.tax_codes.label")}
                placeholder={t("form_fields.item.tax_codes.placeholder")}
                description={t("form_fields.item.tax_codes.description")}
              />

              {/*
                  <Label className='text-sm font-medium'>Impuestos</Label>
                  <Select>
                    <SelectTrigger>
                      <SelectValue placeholder='Seleccionar...' />
                    </SelectTrigger>
                    <SelectContent>
                      <SelectItem value='iva21'>IVA 21%</SelectItem>
                      <SelectItem value='iva10'>IVA 10%</SelectItem>
                      <SelectItem value='iva4'>IVA 4%</SelectItem>
                      <SelectItem value='exento'>Exento</SelectItem>
                    </SelectContent>
                  </Select>
                  */}
            </div>
          </div>

          {/* Calculated amounts */}
          <div className='bg-muted/30 rounded-lg p-3'>
            <div className='grid grid-cols-2 md:grid-cols-5 gap-4 text-sm'>
              <div>
                <Label className='text-xs text-muted-foreground'>SUBTOTAL</Label>
                <p className='font-medium'>{formatCurrency(item.subtotal_amount)}</p>
              </div>
              <div>
                <Label className='text-xs text-muted-foreground'>DESCUENTO</Label>
                <p className='font-medium'>{formatCurrency(item.discount_amount)}</p>
              </div>
              <div>
                <Label className='text-xs text-muted-foreground'>BASE IMPONIBLE</Label>
                <p className='font-medium'>{formatCurrency(item.taxable_amount)}</p>
              </div>
              <div>
                <Label className='text-xs text-muted-foreground'>IMPUESTOS</Label>
                <p className='font-medium'>{formatCurrency(item.taxes_amount)}</p>
              </div>
              <div>
                <Label className='text-xs text-muted-foreground'>TOTAL</Label>
                <p className='font-semibold text-primary'>{formatCurrency(item.total_amount)}</p>
              </div>
            </div>
          </div>
        </div>
      ))}
    </div>
  );
};
