"use client";
import React, { useState, useEffect } from "react";
import Link from "next/link";
import { Loader2 } from "lucide-react";
import { toast } from "sonner";
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
import { api } from "@/lib/trpc/client";
import { UserInvoices } from "@/types/interfaces";
import formatDate from "@/lib/utils/format-date";

function getYear(dateInput: string | Date | number): string {
    let date: Date;

    if (typeof dateInput === "number") {
        date = new Date(dateInput);
    } else {
        date = new Date(dateInput);
    }

    return date.getFullYear().toString();
}

export const InvoiceListBlock = () => {
    const [filteredInvoices, setFilteredInvoices] = useState<UserInvoices[]>([]),
        [availableYears, setAvailableYears] = useState<string[]>([]),
        [selectedYear, setSelectedYear] = useState<string>("");

    const { data: invoices, isLoading, error } = api.payment.invoice.list.useQuery();

    useEffect(() => {
        if (error) {
            toast.error("Fejl ved hentning af fakturaer");
        }
    }, [error]);

    useEffect(() => {
        const yearSet = new Set<string>();

        (invoices || []).forEach((invoice) => {
            yearSet.add(getYear(invoice.date));
        });

        const years = Array.from(yearSet).sort((a, b) => parseInt(b) - parseInt(a));

        setAvailableYears(years);

        if (years.length > 0 && !selectedYear) {
            setSelectedYear(years[0]);
        }
    }, [invoices, selectedYear]);

    useEffect(() => {
        if (!selectedYear) {
            return;
        }

        const filtered = (invoices || []).filter((invoice) => getYear(invoice.date) === selectedYear) as UserInvoices[];

        setFilteredInvoices(filtered);
    }, [selectedYear, invoices]);

    return (
        <div className='mt-5'>
            <div className='mb-3 flex items-center justify-between border-b pb-3'>
                <p className='text-lg font-bold text-neutral-900'>Faktura</p>

                {availableYears.length > 0 && (
                    <div className='flex items-center gap-2'>
                        <p className='gap-2 text-lg font-bold text-neutral-900'>År</p>
                        <Select value={selectedYear} onValueChange={setSelectedYear}>
                            <SelectTrigger className='bg-neutral-200 text-lg text-neutral-900 [&>svg]:!text-neutral-900 [&>svg]:!opacity-100'>
                                <SelectValue placeholder='År' />
                            </SelectTrigger>

                            <SelectContent>
                                {availableYears.map((year) => (
                                    <SelectItem key={year} value={year}>
                                        {year}
                                    </SelectItem>
                                ))}
                            </SelectContent>
                        </Select>
                    </div>
                )}
            </div>

            {isLoading && (
                <div className='flex items-center justify-center p-8'>
                    <Loader2 className='text-client-red h-8 w-8 animate-spin' />
                </div>
            )}

            {filteredInvoices.length === 0 && (
                <p className='py-4 text-center text-neutral-500'>Ingen fakturaer fundet for {selectedYear}</p>
            )}

            {filteredInvoices.length > 0 && (
                <ul>
                    {filteredInvoices.map((item) => {
                        return (
                            <li
                                key={item.id}
                                className='animate-fadeInUp flex justify-between not-last:mb-3 not-last:border-b not-last:pb-3'
                            >
                                <p className='text-neutral-700'>
                                    {formatDate(item.date, { month: "long", year: "numeric" })}
                                </p>
                                <Link
                                    className='text-client-red relative flex items-center gap-2 hover:underline'
                                    rel='noopener noreferrer'
                                    target='_blank'
                                    href={item.url}
                                >
                                    <span>Download</span>
                                    <svg
                                        xmlns='http://www.w3.org/2000/svg'
                                        viewBox='0 0 448 512'
                                        className='size-5 shrink-0 fill-neutral-700'
                                    >
                                        <path d='M256 32c0-17.7-14.3-32-32-32s-32 14.3-32 32l0 210.7-41.4-41.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3l96 96c12.5 12.5 32.8 12.5 45.3 0l96-96c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L256 242.7 256 32zM64 320c-35.3 0-64 28.7-64 64l0 32c0 35.3 28.7 64 64 64l320 0c35.3 0 64-28.7 64-64l0-32c0-35.3-28.7-64-64-64l-46.9 0-56.6 56.6c-31.2 31.2-81.9 31.2-113.1 0L110.9 320 64 320zm304 56a24 24 0 1 1 0 48 24 24 0 1 1 0-48z' />
                                    </svg>
                                </Link>
                            </li>
                        );
                    })}
                </ul>
            )}
        </div>
    );
};