import { Trans } from "react-i18next";

import {
  Button,
  Label,
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
  Tabs,
  TabsContent,
  TabsList,
  TabsTrigger,
} from "@repo/shadcn-ui/components";

import { t } from "i18next";
import { PlusIcon } from "lucide-react";
import { useState } from "react";
import { useNavigate } from "react-router-dom";
import { InvoicesGrid } from "../components/invoices-grid";

export const InvoicesList = () => {
  const navigate = useNavigate();
  const [status, setStatus] = useState("all");

  const InvoiceStatuses = [
    { value: "all", label: t("Invoices.list.tabs.all") },
    { value: "draft", label: t("Invoices.list.tabs.draft") },
    { value: "ready", label: t("Invoices.list.tabs.ready") },
    { value: "delivered", label: t("Invoices.list.tabs.delivered") },
    { value: "accepted", label: t("Invoices.list.tabs.accepted") },
    { value: "rejected", label: t("Invoices.list.tabs.rejected") },
    { value: "archived", label: t("Invoices.list.tabs.archived") },
  ];

  return (
    <>
      <div className='flex items-center justify-between space-y-2'>
        <div>
          <h2 className='text-2xl font-bold tracking-tight'>
            <Trans i18nKey='Invoices.list.title' />
          </h2>
          <p className='text-muted-foreground'>
            <Trans i18nKey='Invoices.list.subtitle' />
          </p>
        </div>
        <div className='flex items-center space-x-2'>
          <Button onClick={() => navigate("/Invoices/add")}>
            <PlusIcon className='w-4 h-4 mr-2' />
            {t("Invoices.create.title")}
          </Button>
        </div>
      </div>

      <Tabs value={status} onValueChange={setStatus}>
        <div className='flex flex-col items-start justify-between mb-4 sm:flex-row sm:items-center'>
          <div className='w-full mb-4 sm:w-auto sm:mb-0'>
            <TabsList className='hidden sm:flex'>
              {InvoiceStatuses.map((s) => (
                <TabsTrigger key={s.value} value={s.value}>
                  {s.label}
                </TabsTrigger>
              ))}
            </TabsList>
            <div className='flex items-center w-full space-x-2 sm:hidden'>
              <Label>{t("Invoices.list.tabs_title")}</Label>
              <Select value={status} onValueChange={setStatus}>
                <SelectTrigger>
                  <SelectValue placeholder='Seleccionar estado' />
                </SelectTrigger>
                <SelectContent>
                  {InvoiceStatuses.map((s) => (
                    <SelectItem key={s.value} value={s.value}>
                      {s.label}
                    </SelectItem>
                  ))}
                </SelectContent>
              </Select>
            </div>
          </div>
        </div>
        {InvoiceStatuses.map((s) => (
          <TabsContent key={s.value} value={s.value}>
            <InvoicesGrid />
          </TabsContent>
        ))}
      </Tabs>
    </>
  );
};