import { DollarSign } from "lucide-react";

import { useLocalization } from "@/lib/hooks";
import { Card, CardContent, CardDescription, CardHeader, CardTitle, Separator } from "@/ui";
import { useFormContext } from "react-hook-form";

export const QuotePricesResume = () => {
  const { watch } = useFormContext();
  const { formatNumber, formatCurrency, formatPercentage } = useLocalization();

  const subtotal_price = formatNumber(watch("subtotal_price"));
  const discount = formatPercentage(watch("discount"));
  const total_price = formatNumber(watch("total_price"));

  return (
    <Card className='w-full'>
      <CardContent className='flex flex-row items-end gap-2 p-4 border-t'>
        <div className='grid flex-1 h-16 grid-cols-1 auto-rows-max'>
          <div className='grid gap-1 font-semibold text-muted-foreground'>
            <CardDescription className='text-sm'>Importe neto</CardDescription>
            <CardTitle className='flex items-baseline text-2xl tabular-nums'>
              {subtotal_price}
              <span className='ml-1 text-lg tracking-normal'>€</span>
            </CardTitle>
          </div>
        </div>
        <Separator orientation='vertical' className='w-px h-16 mx-2' />
        <div className='grid flex-1 h-16 grid-cols-2 gap-2 auto-rows-max'>
          <div className='grid gap-1 font-medium text-muted-foreground'>
            <CardDescription className='text-sm'>Descuento</CardDescription>
            <CardTitle className='flex items-baseline gap-1 text-xl tabular-nums'>
              {discount}
              <span className='text-base tracking-normal'>%</span>
            </CardTitle>
          </div>
          <div className='grid gap-1 font-semibold text-muted-foreground'>
            <CardDescription className='text-sm'>Imp. descuento</CardDescription>
            <CardTitle className='flex items-baseline text-2xl tabular-nums'>
              {subtotal_price}
              <span className='ml-1 text-lg tracking-normal'>€</span>
            </CardTitle>
          </div>
        </div>
        <Separator orientation='vertical' className='w-px h-16 mx-2' />
        <div className='grid flex-1 h-16 grid-cols-2 gap-2 auto-rows-max'>
          <div className='grid gap-1 font-medium text-muted-foreground'>
            <CardDescription className='text-sm'>IVA</CardDescription>
            <CardTitle className='flex items-baseline gap-1 text-xl tabular-nums'>
              {discount}
              <span className='text-base tracking-normal'>%</span>
            </CardTitle>
          </div>
          <div className='grid gap-1 font-semibold text-muted-foreground'>
            <CardDescription className='text-sm'>Importe IVA</CardDescription>
            <CardTitle className='flex items-baseline gap-1 text-2xl tabular-nums'>
              {subtotal_price}
              <span className='text-base font-medium tracking-normal'>€</span>
            </CardTitle>
          </div>
        </div>{" "}
        <Separator orientation='vertical' className='w-px h-16 mx-2' />
        <div className='grid flex-1 h-16 grid-cols-1 auto-rows-max'>
          <div className='grid gap-0'>
            <CardDescription className='text-sm font-semibold'>Importe total</CardDescription>
            <CardTitle className='flex items-baseline gap-1 text-3xl tabular-nums'>
              {total_price}
              <span className='ml-1 text-lg tracking-normal'>€</span>
            </CardTitle>
          </div>
        </div>
      </CardContent>
    </Card>
  );

  return (
    <Card className='w-full'>
      <CardContent className='flex flex-row items-center w-full gap-2 p-4 border-t'>
        <div className='flex flex-row items-center gap-4 space-y-0 pb-2 [&>div]:flex-1 border border-blue-600'>
          <div>
            <CardDescription>Descuento</CardDescription>
            <CardTitle className='flex items-baseline gap-1 text-4xl tabular-nums'>
              62
              <span className='text-sm font-normal tracking-normal text-muted-foreground'>%</span>
            </CardTitle>
          </div>
          <div>
            <CardDescription>Importe dto.</CardDescription>
            <CardTitle className='flex items-baseline gap-1 text-4xl tabular-nums'>
              3.346
              <span className='text-sm font-normal tracking-normal text-muted-foreground'>€</span>
            </CardTitle>
          </div>
        </div>

        <div className='flex flex-row gap-3 items-center space-y-0 [&>div]:flex-1 border border-blue-600'>
          <div className='grid flex-1 gap-3 bg-red-500 auto-rows-min'></div>
          <div className='grid flex-1 gap-3 bg-red-500 auto-rows-min'>
            <CardDescription className='font-medium text-right'>Importe neto</CardDescription>
            <div className='flex items-baseline justify-end gap-1 text-2xl font-semibold leading-none tabular-nums text-muted-foreground'>
              {subtotal_price.amount}
              <span className='text-sm font-normal tracking-normal text-muted-foreground'>
                {subtotal_price.currency_code}
              </span>
            </div>
          </div>
        </div>

        <Separator orientation='vertical' className='w-px h-10 mx-2' />

        <div className='flex flex-row gap-3 items-center space-y-0 [&>div]:flex-1 border border-blue-600'>
          <div className='grid flex-1 gap-3 bg-red-500 auto-rows-min'>
            <div className='text-sm font-medium text-left text-muted-foreground'>Descuento</div>
            <div className='flex items-baseline justify-between gap-1 text-2xl font-semibold leading-none tabular-nums text-muted-foreground'>
              <div>
                73
                <span className='text-sm font-normal text-muted-foreground'>%</span>
              </div>
            </div>
          </div>
          <div className='grid flex-1 gap-3 bg-green-500 auto-rows-min'>
            <div className='text-sm font-medium text-muted-foreground'>Descuento</div>
            <div>
              73
              <span className='text-sm font-normal text-muted-foreground'>€</span>
            </div>
          </div>
        </div>

        <Separator orientation='vertical' className='w-px h-10 mx-2' />
        <div className='grid flex-1 gap-3 border border-blue-600 auto-rows-min'>
          <div className='text-sm font-medium text-right text-muted-foreground'>Base imponible</div>
          <div className='flex items-baseline justify-end gap-1 text-2xl font-semibold leading-none tabular-nums text-muted-foreground'>
            14
            <span className='text-sm font-normal text-muted-foreground'>€</span>
          </div>
        </div>
        <Separator orientation='vertical' className='w-px h-10 mx-2' />
        <div className='grid flex-1 gap-3 auto-rows-min'>
          <div className='text-sm font-medium text-muted-foreground'>IVA</div>
          <div className='flex items-baseline justify-end gap-1 text-2xl font-semibold leading-none tabular-nums text-muted-foreground'>
            14
            <span className='text-sm font-normal text-muted-foreground'>€</span>
          </div>
        </div>
        <Separator orientation='vertical' className='w-px h-10 mx-2' />
        <div className='grid flex-1 gap-3 auto-rows-min'>
          <div className='text-sm font-medium text-muted-foreground'>Importe total</div>
          <div className='flex items-baseline justify-end gap-1 text-2xl font-bold leading-none tabular-nums'>
            14
            <span className='text-sm font-normal text-muted-foreground'>€</span>
          </div>
        </div>
      </CardContent>
    </Card>
  );

  return (
    <Card>
      <CardHeader className='flex flex-row items-center justify-between pb-2 space-y-0'>
        <CardTitle className='text-sm font-medium'>Total Revenue</CardTitle>
        <DollarSign className='w-4 h-4 text-muted-foreground' />
      </CardHeader>
      <CardContent>
        <div className='text-2xl font-bold'>$45,231.89</div>
        <p className='text-sm font-medium text-muted-foreground'>+20.1% from last month</p>
      </CardContent>
    </Card>
  );
};