import {
  ChevronLeft,
  ChevronRight,
  CreditCard,
  DownloadIcon,
  FilePenLineIcon,
  MoreVertical,
} from "lucide-react";

import { cn } from "@/lib/utils";
import {
  Button,
  Card,
  CardContent,
  CardDescription,
  CardFooter,
  CardHeader,
  CardTitle,
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuSeparator,
  DropdownMenuTrigger,
  Pagination,
  PaginationContent,
  PaginationItem,
  Separator,
  Tabs,
  TabsContent,
  TabsList,
  TabsTrigger,
} from "@/ui";
import { t } from "i18next";
import { useNavigate } from "react-router-dom";
import { useQuotes } from "../hooks";
import { QuoteStatusEditor } from "./editors";

type QuoteResumeProps = {
  quoteId: string;
  className: string;
};

export const QuoteResume = ({ quoteId, className }: QuoteResumeProps) => {
  const { useOne, useUpdate } = useQuotes();
  const { data, status, error: queryError } = useOne(quoteId);
  const navigate = useNavigate();

  if (status === "error") {
    return null;
  }

  if (status !== "success") {
    return null;
  }

  if (!data) {
    return (
      <Card className={cn("overflow-hidden", className)}>
        <CardContent className='px-4 py-6 text-center'>
          <p className='mx-auto'>Select a quote</p>
        </CardContent>
      </Card>
    );
  }

  return (
    <Tabs defaultValue='resume'>
      <Card className='w-full overflow-hidden'>
        <CardHeader className='flex flex-row items-start border-b'>
          <div className='grid gap-0.5'>
            <CardTitle className='flex items-center gap-2 text-lg group'>
              {`${t("quotes.list.preview.quote")} #${data.reference}`}
            </CardTitle>
            <CardDescription>assaasassa</CardDescription>
          </div>
          <div className='flex items-center gap-1 ml-auto'>
            <Button
              size='sm'
              variant='outline'
              className='h-8 gap-1'
              onClick={(e) => {
                e.preventDefault();
                navigate(`/quotes/edit/${data.id}`, { relative: "path" });
              }}
            >
              <FilePenLineIcon className='h-3.5 w-3.5' />
              <span className='lg:sr-only xl:not-sr-only xl:whitespace-nowrap'>
                {t("quotes.list.columns.actions.edit")}
              </span>
            </Button>
            <Button size='sm' variant='outline' className='h-8 gap-1' onClick={() => null}>
              <DownloadIcon className='h-3.5 w-3.5' />
              <span className='xl:sr-only 2xl:not-sr-only 2xl:whitespace-nowrap'>
                {t("quotes.list.preview.download_quote")}
              </span>
            </Button>
            <DropdownMenu>
              <DropdownMenuTrigger asChild>
                <Button size='icon' variant='outline' className='w-8 h-8'>
                  <MoreVertical className='h-3.5 w-3.5' />
                  <span className='sr-only'>More</span>
                </Button>
              </DropdownMenuTrigger>
              <DropdownMenuContent align='end'>
                <DropdownMenuItem>Edit</DropdownMenuItem>
                <DropdownMenuItem>Export</DropdownMenuItem>
                <DropdownMenuSeparator />
                <DropdownMenuItem>Trash</DropdownMenuItem>
              </DropdownMenuContent>
            </DropdownMenu>
          </div>
        </CardHeader>
        <CardHeader className='flex flex-row items-start border-b'>
          <QuoteStatusEditor quote={data} onChangeStatus={() => null} />
        </CardHeader>
        <CardContent className='p-6 text-sm'>
          <TabsList className='grid w-full grid-cols-2'>
            <TabsTrigger value='resume'>Resume</TabsTrigger>
            <TabsTrigger value='preview'>Preview</TabsTrigger>
          </TabsList>
          <TabsContent value='resume' className='pt-4'>
            <div className='grid gap-3'>
              <div className='grid gap-3'>
                <div className='font-semibold'>Customer Information</div>
                Date: {new Date(data.date).toLocaleDateString()}
                <div>{data.customer_information}</div>
                <dl className='grid gap-3'>
                  <div className='flex items-center justify-between'>
                    <dt className='text-muted-foreground'>Customer</dt>
                    <dd>Liam Johnson</dd>
                  </div>
                  <div className='flex items-center justify-between'>
                    <dt className='text-muted-foreground'>Email</dt>
                    <dd>
                      <a href='mailto:'>liam@acme.com</a>
                    </dd>
                  </div>
                  <div className='flex items-center justify-between'>
                    <dt className='text-muted-foreground'>Phone</dt>
                    <dd>
                      <a href='tel:'>+1 234 567 890</a>
                    </dd>
                  </div>
                </dl>
              </div>
              <Separator className='my-4' />
              <div className='font-semibold'>Order Details</div>
              <ul className='grid gap-3'>
                <li className='flex items-center justify-between'>
                  <span className='text-muted-foreground'>
                    Glimmer Lamps x <span>2</span>
                  </span>
                  <span>$250.00</span>
                </li>
                <li className='flex items-center justify-between'>
                  <span className='text-muted-foreground'>
                    Aqua Filters x <span>1</span>
                  </span>
                  <span>$49.00</span>
                </li>
              </ul>
              <Separator className='my-2' />
              <ul className='grid gap-3'>
                <li className='flex items-center justify-between'>
                  <span className='text-muted-foreground'>Subtotal</span>
                  <span>$299.00</span>
                </li>
                <li className='flex items-center justify-between'>
                  <span className='text-muted-foreground'>Shipping</span>
                  <span>$5.00</span>
                </li>
                <li className='flex items-center justify-between'>
                  <span className='text-muted-foreground'>Tax</span>
                  <span>$25.00</span>
                </li>
                <li className='flex items-center justify-between font-semibold'>
                  <span className='text-muted-foreground'>Total</span>
                  <span>$329.00</span>
                </li>
              </ul>
            </div>
            <Separator className='my-4' />
            <div className='grid grid-cols-2 gap-4'>
              <div className='grid gap-3'>
                <div className='font-semibold'>Shipping Information</div>
                <address className='grid gap-0.5 not-italic text-muted-foreground'>
                  <span>Liam Johnson</span>
                  <span>1234 Main St.</span>
                  <span>Anytown, CA 12345</span>
                </address>
              </div>
              <div className='grid gap-3 auto-rows-max'>
                <div className='font-semibold'>Billing Information</div>
                <div className='text-muted-foreground'>Same as shipping address</div>
              </div>
            </div>
            <Separator className='my-4' />

            <div className='grid gap-3'>
              <div className='font-semibold'>Payment Information</div>
              <dl className='grid gap-3'>
                <div className='flex items-center justify-between'>
                  <dt className='flex items-center gap-1 text-muted-foreground'>
                    <CreditCard className='w-4 h-4' />
                    Visa
                  </dt>
                  <dd>**** **** **** 4532</dd>
                </div>
              </dl>
            </div>
          </TabsContent>
          <TabsContent value='preview'></TabsContent>
        </CardContent>
        <CardFooter className='flex flex-row items-center px-6 py-3 border-t'>
          <div className='text-xs text-muted-foreground'>Updated...</div>
          <Pagination className='w-auto ml-auto mr-0'>
            <PaginationContent>
              <PaginationItem>
                <Button size='icon' variant='outline' className='w-6 h-6'>
                  <ChevronLeft className='h-3.5 w-3.5' />
                  <span className='sr-only'>Previous Order</span>
                </Button>
              </PaginationItem>
              <PaginationItem>
                <Button size='icon' variant='outline' className='w-6 h-6'>
                  <ChevronRight className='h-3.5 w-3.5' />
                  <span className='sr-only'>Next Order</span>
                </Button>
              </PaginationItem>
            </PaginationContent>
          </Pagination>
        </CardFooter>
      </Card>
    </Tabs>
  );
};