import type { Route } from './+types/route'

import Fuse from 'fuse.js'
import { BanIcon } from 'lucide-react'
import { DateTime as LuxonDateTime } from 'luxon'
import { Suspense, useMemo } from 'react'
import { Await, useSearchParams } from 'react-router'

import { Abbr } from '@repo/ui/components/abbr'
import { Currency } from '@repo/ui/components/currency'
import { DateTime } from '@repo/ui/components/datetime'
import { SearchForm } from '@repo/ui/components/search-form'
import { Skeleton } from '@repo/ui/components/skeleton'
import { Button } from '@repo/ui/components/ui/button'
import { Card, CardContent } from '@repo/ui/components/ui/card'
import {
  Empty,
  EmptyDescription,
  EmptyHeader,
  EmptyMedia,
  EmptyTitle
} from '@repo/ui/components/ui/empty'
import { Kbd } from '@repo/ui/components/ui/kbd'
import {
  Table,
  TableBody,
  TableCell,
  TableFooter,
  TableHead,
  TableHeader,
  TableRow
} from '@repo/ui/components/ui/table'
import { cn } from '@repo/ui/lib/utils'
import { request as req } from '@repo/util/request'

import { TZ } from '@/conf'
import { statuses } from './data'
import { RangePeriod } from './range-period'
import { billingPeriod, formatDate } from './util'

export function meta({}) {
  return [{ title: 'Resumo de cobranças' }]
}

export async function loader({ context, request, params }: Route.LoaderArgs) {
  const { searchParams } = new URL(request.url)
  const subscription = await req({
    url: `/orgs/${params.orgid}/subscription`,
    context,
    request
  })

  const { billing_day = 1 } = (await subscription.json()) as {
    billing_day: number
  }

  const [startDate, endDate] = billingPeriod(
    billing_day,
    LuxonDateTime.now().setZone(TZ).toJSDate()
  )
  const start = searchParams.get('start') || formatDate(startDate)
  const end = searchParams.get('end') || formatDate(endDate)

  const billing = req({
    url: `/orgs/${params.orgid}/billing?start_date=${start}&end_date=${end}`,
    context,
    request
  }).then((r) => r.json())

  return {
    billing_day,
    billing,
    startDate: LuxonDateTime.fromISO(start, { zone: TZ }).toJSDate(),
    endDate: LuxonDateTime.fromISO(end, { zone: TZ }).toJSDate()
  }
}

export default function Route({
  loaderData: { billing_day, billing, startDate, endDate }
}: Route.ComponentProps) {
  const [searchParams, setSearchParams] = useSearchParams()
  const search = searchParams.get('s') as string

  return (
    <>
      <Suspense fallback={<Skeleton />}>
        <div className="space-y-0.5 mb-8">
          <h1 className="text-2xl font-bold tracking-tight">
            Resumo de cobranças
          </h1>
          <p className="text-muted-foreground">
            Acompanhe as cobranças em tempo real e garanta mais eficiência no
            controle financeiro.
          </p>
        </div>

        <Await resolve={billing}>
          {({ items = [], ...billing }) => {
            const {
              icon: Icon,
              label: status,
              color
            } = statuses?.[billing?.status || 'CLOSED']

            return (
              <Card>
                <CardContent className="space-y-4">
                  <div className="flex max-lg:flex-col gap-2.5">
                    <div className="w-full xl:w-1/4">
                      <SearchForm
                        defaultValue={search || ''}
                        placeholder={
                          <>
                            Digite <Kbd className="border font-mono">/</Kbd>{' '}
                            para pesquisar
                          </>
                        }
                        onChange={(value) =>
                          setSearchParams((searchParams) => {
                            searchParams.set('s', String(value))
                            return searchParams
                          })
                        }
                      />
                    </div>

                    <RangePeriod
                      startDate={startDate}
                      endDate={endDate}
                      billingDay={billing_day}
                    />

                    <Button
                      className={cn('pointer-events-none lg:ml-auto', color)}
                      variant="outline"
                      asChild
                    >
                      <span>
                        <Icon className="size-3.5" /> {status}
                      </span>
                    </Button>
                  </div>

                  <List items={items} search={search} />
                </CardContent>
              </Card>
            )
          }}
        </Await>
      </Suspense>
    </>
  )
}

function List({ items, search }) {
  const fuse = useMemo(() => {
    return new Fuse(items, {
      keys: ['user.name'],
      threshold: 0.3,
      includeMatches: true
    })
  }, [items])

  const filtered = useMemo(() => {
    if (!search) {
      return items
    }

    return fuse.search(search).map(({ item }) => item)
  }, [search, fuse, items])

  const charges = filtered
    ?.filter((item) => item?.unit_price > 0)
    ?.sort(sortBy('enrolled_at'))
  const credits = filtered
    ?.filter((item) => item?.unit_price < 0)
    ?.sort(sortBy('created_at'))

  if (items.length === 0) {
    return (
      <Empty className="border border-dashed">
        <EmptyHeader>
          <EmptyMedia variant="icon">
            <BanIcon />
          </EmptyMedia>
          <EmptyTitle>Nenhuma cobrança encontrada</EmptyTitle>
          <EmptyDescription>
            Não há nenhuma cobrança para este período.
          </EmptyDescription>
        </EmptyHeader>
      </Empty>
    )
  }

  if (filtered.length === 0) {
    return (
      <Empty className="border border-dashed">
        <EmptyHeader>
          <EmptyMedia variant="icon">
            <BanIcon />
          </EmptyMedia>
          <EmptyTitle>Nada encontrado</EmptyTitle>
          <EmptyDescription>
            Nenhum resultado para <mark>{search}</mark>.
          </EmptyDescription>
        </EmptyHeader>
      </Empty>
    )
  }

  const subtotal = filtered
    ?.filter(({ unit_price }) => unit_price > 0)
    ?.reduce((acc, { unit_price }) => acc + unit_price, 0)

  const discounts = filtered
    ?.filter(({ unit_price }) => unit_price < 0)
    ?.reduce((acc, { unit_price }) => acc + unit_price, 0)

  const total = filtered?.reduce((acc, { unit_price }) => acc + unit_price, 0)

  return (
    <Table className="table-auto w-full">
      {charges.length ? (
        <>
          <TableHeader>
            <TableRow className="bg-muted-foreground/10 pointer-events-none">
              <TableHead>Colaborador</TableHead>
              <TableHead>Curso</TableHead>
              <TableHead>Matriculado por</TableHead>
              <TableHead>Matriculado em</TableHead>
              <TableHead>Valor unit.</TableHead>
            </TableRow>
          </TableHeader>

          <TableBody>
            {charges?.map(
              (
                { user, course, author: created_by, unit_price, enrolled_at },
                index
              ) => (
                <TableRow key={index}>
                  <TableCell>
                    <Abbr>{user.name}</Abbr>
                  </TableCell>
                  <TableCell>
                    <Abbr>{course.name}</Abbr>
                  </TableCell>
                  <TableCell>
                    <Abbr>{created_by ? created_by.name : 'N/A'}</Abbr>
                  </TableCell>
                  <TableCell>
                    <DateTime>{enrolled_at}</DateTime>
                  </TableCell>
                  <TableCell>
                    <Currency>{unit_price}</Currency>
                  </TableCell>
                </TableRow>
              )
            )}
          </TableBody>
        </>
      ) : null}

      {credits.length ? (
        <>
          <TableHeader>
            <TableRow className="bg-muted-foreground/10 pointer-events-none border-t">
              <TableHead colSpan={2}></TableHead>
              <TableHead>Cancelado por</TableHead>
              <TableHead colSpan={2}>Cancelado em</TableHead>
            </TableRow>
          </TableHeader>
          <TableBody>
            {credits?.map(
              (
                { user, course, author: canceled_by, unit_price, created_at },
                index
              ) => (
                <TableRow key={index}>
                  <TableCell>
                    <Abbr>{user.name}</Abbr>
                  </TableCell>
                  <TableCell>
                    <Abbr>{course.name}</Abbr>
                  </TableCell>
                  <TableCell>
                    <Abbr>{canceled_by ? canceled_by.name : 'N/A'}</Abbr>
                  </TableCell>
                  <TableCell>
                    <DateTime>{created_at}</DateTime>
                  </TableCell>
                  <TableCell>
                    <Currency>{unit_price}</Currency>
                  </TableCell>
                </TableRow>
              )
            )}
          </TableBody>
        </>
      ) : null}

      <TableFooter>
        <TableRow>
          <TableCell colSpan={4} className="text-right pointer-events-none">
            Subtotal
          </TableCell>
          <TableCell>
            <Currency>{subtotal}</Currency>
          </TableCell>
        </TableRow>

        <TableRow>
          <TableCell colSpan={4} className="text-right pointer-events-none">
            Descontos
          </TableCell>
          <TableCell>
            <Currency>{discounts}</Currency>
          </TableCell>
        </TableRow>

        <TableRow>
          <TableCell colSpan={4} className="text-right pointer-events-none">
            Total
          </TableCell>
          <TableCell>
            <Currency>{total}</Currency>
          </TableCell>
        </TableRow>
      </TableFooter>
    </Table>
  )
}

const sortBy = (field: 'enrolled_at' | 'created_at') => (a: any, b: any) =>
  new Date(a[field]).getTime() - new Date(b[field]).getTime()