"use client"

import { Button } from "@/components/ui/button"
import { AppSidebar } from "@/components/app-sidebar"
import { SiteHeader } from "@/components/site-header"
import { SidebarInset, SidebarProvider } from "@/components/ui/sidebar"
import Link from "next/link"
import { useEffect, useState } from "react"
import { useTranslation } from "react-i18next"
import { DataTableWithSearch } from "@/components/data-table-with-search"
import { ColumnDef, VisibilityState } from "@tanstack/react-table"
import { Badge } from "@/components/ui/badge"
import { IconCircleCheckFilled, IconLoader, IconCircleMinus, IconCircleX, IconEye, IconSearch, IconCopyPlus } from "@tabler/icons-react"
import { EFacturaSimpleCards } from "@/components/efactura-simple-cards"
import { Input } from "@/components/ui/input"
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from "@/components/ui/select"
import {
  DropdownMenu,
  DropdownMenuCheckboxItem,
  DropdownMenuContent,
  DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu"
import { Combobox } from "@/components/combobox"
import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogHeader,
  DialogTitle,
  DialogTrigger,
} from "@/components/ui/dialog"

export default function Template() {
    const { t } = useTranslation();
    const [selectedContractType, setSelectedContractType] = useState<string>("");
    const [isDialogOpen, setIsDialogOpen] = useState(false);

    const contractTypes = [
        { value: "bizz", label: "BizzConf" },
        { value: "contracts", label: "Contract" },
        { value: "anex", label: "Annex" }
    ];

    const getGoogleDocsUrl = (type: string) => {
        // Replace these with your actual Google Docs template URLs
        const urls = {
            bizz: "https://docs.google.com/document/d/your-bizz-template-id/edit",
            contracts: "https://docs.google.com/document/d/your-contracts-template-id/edit",
            anex: "https://docs.google.com/document/d/your-anex-template-id/edit"
        };
        return urls[type as keyof typeof urls] || "";
    };

    return (
        <SidebarProvider
            style={{
                "--sidebar-width": "calc(var(--spacing) * 72)",
                "--header-height": "calc(var(--spacing) * 12)",
            } as React.CSSProperties}
        >
            <AppSidebar variant="inset" />
            <SidebarInset>
                <SiteHeader title="template.new" />
                <div className="flex flex-1 flex-col">
                    <div className="@container/main flex flex-1 flex-col gap-2">
                        <div className="flex flex-col gap-4 py-4 md:gap-6 md:py-6">
                            <Dialog open={isDialogOpen} onOpenChange={setIsDialogOpen}>
                                <DialogTrigger asChild>
                                    <Button className="w-fit">
                                        <IconCopyPlus className="mr-2 h-4 w-4" />
                                        {t("template.createNew")}
                                    </Button>
                                </DialogTrigger>
                                <DialogContent className="max-w-4xl h-[80vh]">
                                    <DialogHeader>
                                        <DialogTitle>{t("template.selectType")}</DialogTitle>
                                        <DialogDescription>
                                            {t("template.selectTypeDescription")}
                                        </DialogDescription>
                                    </DialogHeader>
                                    <div className="flex flex-col gap-4">
                                        <Select
                                            value={selectedContractType}
                                            onValueChange={(value) => {
                                                setSelectedContractType(value);
                                            }}
                                        >
                                            <SelectTrigger className="w-full">
                                                <SelectValue placeholder={t("template.selectContractType")} />
                                            </SelectTrigger>
                                            <SelectContent>
                                                {contractTypes.map((type) => (
                                                    <SelectItem key={type.value} value={type.value}>
                                                        {type.label}
                                                    </SelectItem>
                                                ))}
                                            </SelectContent>
                                        </Select>
                                        
                                        {selectedContractType && (
                                            <div className="flex-1 min-h-[500px]">
                                                <iframe
                                                    src={getGoogleDocsUrl(selectedContractType)}
                                                    className="w-full h-full border-0"
                                                    allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
                                                />
                                            </div>
                                        )}
                                    </div>
                                </DialogContent>
                            </Dialog>
                        </div>
                    </div>
                </div>
            </SidebarInset>
        </SidebarProvider>
    )
}