'use client';

import { Invoice, InvoiceSchema } from '@/models/invoice';
import { zodResolver } from '@hookform/resolvers/zod';
import {
  useFieldArray,
  useForm,
  useWatch,
  SubmitHandler,
} from 'react-hook-form';
import { Input } from './ui/input';
import { cn } from '@/utils/cn';
import { Button } from './ui/button';
import { generateInvoice } from '@/lib/generate';

const defaultItem = {
  description: '',
  quantity: 1,
  rate: 0,
};

const defaultValues: Invoice = {
  invoice_number: 0,
  from: '',
  line_items: [defaultItem],
  currency: 'USD',
};

export const InvoiceGenerator = () => {
  const {
    register,
    handleSubmit,
    control,
    watch,
    formState: { errors },
  } = useForm<Invoice>({
    resolver: zodResolver(InvoiceSchema),
    defaultValues,
  });

  const { fields, append, remove } = useFieldArray({
    control,
    name: 'line_items',
  });
  const lineItems = useWatch({ control, name: 'line_items' });
  const currency = watch('currency', 'USD');

  const onSubmit: SubmitHandler<Invoice> = async (data) => {
    console.log(data);
    const blob = await generateInvoice(data);
    const a = document.createElement('a');
    a.href = URL.createObjectURL(blob);
    a.download = 'invoice.pdf';
    document.body.appendChild(a);
    a.click();

    document.body.removeChild(a);
    a.remove();
  };

  return (
    <form
      onSubmit={handleSubmit(onSubmit)}
      className="max-w-5xl rounded-sm border p-4 shadow-lg"
    >
      <div className="flex justify-between gap-4">
        <section className="grid auto-rows-min gap-2 md:grid-cols-2">
          <Input
            {...register('from')}
            placeholder="Who is this from?"
            className="md:col-span-2"
          />
          {errors['from'] && (
            <p className="md:col-span-2">{errors['from'].message ?? 'Error'}</p>
          )}
          <div className="grid">
            <label>Bill To</label>
            <Input
              {...register('bill_to')}
              className="w-full"
              placeholder="Who is this for?"
            />
          </div>
          <div className="grid">
            <label>Ship To</label>
            <Input
              {...register('ship_to')}
              className="w-full"
              placeholder="(optional)"
            />
          </div>
        </section>
        <section className="grid auto-rows-min grid-cols-2 gap-2">
          <label>Invoice #</label>
          <Input {...register('invoice_number', { valueAsNumber: true })} />
          <label>Date</label>
          <Input {...register('date')} type="date" />
          <label>Due Date</label>
          <Input {...register('due_date')} type="date" />
          <label>PO number</label>
          <Input {...register('po_number')} />
        </section>
      </div>
      <h2>Your Items</h2>
      <div
        className={cn(
          'bg-foreground text-background rounded-sm px-2 py-1',
          'mb-2 grid grid-cols-11 gap-2',
        )}
      >
        <p className="col-span-7">Item</p>
        <p className="pl-2">Quantity</p>
        <p className="pl-2">Rate</p>
        <p className="col-span-2 pr-4 text-right">Amount</p>
      </div>
      <section className="space-y-2">
        {fields.map((f, ind) => (
          <div key={f.id} className="group relative grid grid-cols-11 gap-2">
            <Input
              {...register(`line_items.${ind}.description`)}
              placeholder="Description of item/service..."
              className="col-span-7"
            />
            <Input
              {...register(`line_items.${ind}.quantity`, {
                valueAsNumber: true,
              })}
            />
            <Input
              {...register(`line_items.${ind}.rate`, { valueAsNumber: true })}
            />
            <div className="relative col-span-2 my-auto flex justify-end pr-6 text-right">
              <p>
                {(
                  (lineItems[ind]?.rate ?? 0) * (lineItems[ind]?.quantity ?? 0)
                ).toLocaleString(undefined, { style: 'currency', currency })}
              </p>
              <Button
                type="button"
                onClick={() => remove(ind)}
                className={cn(
                  'absolute -right-1 m-auto hidden size-fit',
                  'border-none group-hover:block hover:text-gray-500',
                )}
              >
                X
              </Button>
            </div>
          </div>
        ))}
        <Button
          type="button"
          className="border-green-700 text-green-700 hover:bg-gray-100"
          onClick={() => append(defaultItem)}
        >
          + Item
        </Button>
      </section>
      <section className="mt-2 grid grid-cols-2">
        <div className="flex flex-col">
          <label>Notes</label>
          <textarea
            {...register('notes')}
            rows={1}
            placeholder="Notes - any relevant information not provided before"
            className="rounded-sm border p-2"
          />
          <label>Terms</label>
          <textarea
            {...register('terms')}
            rows={1}
            placeholder="Terms and conditions"
            className="rounded-sm border p-2"
          />
        </div>
        <div className="pr-6 text-right text-xl">
          Total:{' '}
          <b>
            {lineItems
              .reduce(
                (acc, cur) => acc + (cur.rate ?? 0) * (cur.quantity ?? 0),
                0,
              )
              .toLocaleString(undefined, { style: 'currency', currency })}
          </b>
        </div>
      </section>
      <section className={cn('mt-4 flex flex-row-reverse')}>
        <Button
          className={cn('border-green-700 text-green-700', 'hover:bg-gray-100')}
        >
          Download
        </Button>
      </section>
    </form>
  );
};