import { DataTableProvider } from "@/lib/hooks";
import { Trans } from "react-i18next";
import { QuotesDataTable } from "./components";

import { HelpButton } from "@/components";
import {
  Button,
  Label,
  ScrollArea,
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
  Tabs,
  TabsContent,
  TabsList,
  TabsTrigger,
  Toggle,
} from "@/ui";
import { useToggle } from "@wojtekmaj/react-hooks";
import { t } from "i18next";
import { EyeIcon, EyeOffIcon, PlusIcon } from "lucide-react";
import { useState } from "react";
import { useNavigate } from "react-router-dom";

export const QuotesList = () => {
  const navigate = useNavigate();
  const [status, setStatus] = useState("all");
  const [enabledPreview, toggleEnabledPreview] = useToggle(true);

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

  return (
    <DataTableProvider>
      <div className='flex items-center justify-between space-y-2'>
        <div>
          <h2 className='text-2xl font-bold tracking-tight'>
            <Trans i18nKey='quotes.list.title' />
          </h2>
          <p className='text-muted-foreground'>
            <Trans i18nKey='quotes.list.subtitle' />
          </p>
        </div>
        <div className='flex items-center space-x-2'>
          <Button onClick={() => navigate("/quotes/add")}>
            <PlusIcon className='w-4 h-4 mr-2' />
            {t("quotes.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'>
              {quoteStatuses.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("quotes.list.tabs_title")}</Label>
              <Select value={status} onValueChange={setStatus}>
                <SelectTrigger>
                  <SelectValue placeholder='Seleccionar estado' />
                </SelectTrigger>
                <SelectContent>
                  {quoteStatuses.map((s) => (
                    <SelectItem key={s.value} value={s.value}>
                      {s.label}
                    </SelectItem>
                  ))}
                </SelectContent>
              </Select>
            </div>
          </div>
          <div className='flex items-baseline justify-center mr-4 font-medium'>
            <HelpButton
              buttonText='Ayuda'
              title='Ayuda sobre el Estado de Cotizaciones'
              content={HelpContent}
            />
          </div>
          <div className='flex items-center gap-2 ml-auto'>
            <Toggle
              aria-label='Show quote preview'
              variant={"outline"}
              defaultPressed={false}
              pressed={enabledPreview}
              onPressedChange={toggleEnabledPreview}
            >
              {enabledPreview ? (
                <>
                  <EyeOffIcon className='w-4 h-4 mr-2' />
                  {t("common.disable_preview")}
                </>
              ) : (
                <>
                  <EyeIcon className='w-4 h-4 mr-2' />
                  {t("common.enable_preview")}
                </>
              )}
            </Toggle>
          </div>
        </div>
        {quoteStatuses.map((s) => (
          <TabsContent key={s.value} value={s.value}>
            <QuotesDataTable status={s.value} preview={enabledPreview} />
          </TabsContent>
        ))}
      </Tabs>
    </DataTableProvider>
  );
};

const HelpContent = (
  <ScrollArea className='grid gap-4 py-4'>
    <p>El estado de una cotización indica su posición actual en el proceso de negocio.</p>
    <p>Los estados posibles son:</p>
    <ul className='pl-6 space-y-2 list-disc'>
      <li>
        <strong>Borrador:</strong> La cotización está en proceso de creación o edición.
      </li>
      <li>
        <strong>Preparado:</strong> La cotización está lista para ser enviada al cliente.
      </li>
      <li>
        <strong>Entregado:</strong> La cotización ha sido enviada al cliente.
      </li>
      <li>
        <strong>Aceptado:</strong> El cliente ha aprobado la cotización.
      </li>
      <li>
        <strong>Rechazado:</strong> El cliente no ha aceptado la cotización.
      </li>
      <li>
        <strong>Arcivado:</strong> La cotización ha sido guardada para referencia futura y ya no
        está activa.
      </li>
    </ul>
    <p>
      Utiliza estos estados para hacer un seguimiento eficiente de tus cotizaciones y optimizar tu
      proceso de ventas. El estado <strong>Archivado</strong> es útil para mantener un historial de
      cotizaciones pasadas sin que interfieran con las cotizaciones activas.
    </p>
  </ScrollArea>
);