"use client";

import HeaderManagement from "@/components/landing-page/header-management";
import SidebarManagement from "@/components/landing-page/sidebar-management";
import { useRouter } from "@/i18n/routing";
import { getCookiesDecrypt } from "@/lib/utils";
import { useSearchParams } from "next/navigation";
import React, { useState } from "react";
import Swal from "sweetalert2";
import withReactContent from "sweetalert2-react-content";
import { Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectTrigger, SelectValue } from "@/components/ui/select";

const page = () => {
  // const { states } = props;
  const [profile, setProfile] = useState();
  const MySwal = withReactContent(Swal);
  const router = useRouter();
  const [, setLoadingState] = useState(false);
  const searchParams = useSearchParams();
  const id: any = searchParams?.get("title");
  const [content, setContent] = useState([]);
  const [isFromSPIT, setIsFromSPIT] = useState(false);
  const [listSuggestion, setListSuggestion] = useState();
  const [main, setMain] = useState();
  const userId = getCookiesDecrypt("uie");
  const userRoleId = getCookiesDecrypt("urie");
  const [articleIds, setArticleIds] = useState([]);
  const [isGeneratedArticle, setIsGeneratedArticle] = useState(false);
  const [selectedArticleId, setSelectedArticleId] = useState(null);
  const [articleBody, setArticleBody] = useState("");
  const [selectedAdvConfig, setSelectedAdvConfig] = useState("");
  const [selectedWritingStyle, setSelectedWritingStyle] = useState("");
  const [selectedContextType, setSelectedContextType] = useState("");
  const [selectedLanguage, setSelectedLanguage] = useState("");
  const [selectedTitle, setSelectedTitle] = useState("");
  const [selectedMainKeyword, setSelectedMainKeyword] = useState("");
  const [selectedSEO, setSelectedSEO] = useState("");
  const [selectedSize, setSelectedSize] = useState("");
  const [detailArticle, setDetailArticle] = useState(null);
  const [contentType, setContentType] = useState("all");

  const userLevelId = getCookiesDecrypt("ulie");
  const roleId = getCookiesDecrypt("urie");
  return (
    <>
      <HeaderManagement />

      <div className="flex flex-row">
        <SidebarManagement />
        <div className="w-2/3 p-12">
          <div className="flex flex-col">
            <div className="text-xl font-bold mb-5">Content Rewrite</div>
            <div className="p-8 border border-black rounded-lg">
              <form>
                <div className="flex flex-row gap-2 justify-between mb-3">
                  <div className="gap-1">
                    <p className="font-semibold">Bahasa</p>
                    <Select value={selectedLanguage} onValueChange={(e: any) => setSelectedLanguage(e.target.value)}>
                      <SelectTrigger className="w-[180px]">
                        <SelectValue placeholder="Pilih Bahasa" />
                      </SelectTrigger>
                      <SelectContent>
                        <SelectGroup>
                          <SelectLabel>Pilih Bahasa</SelectLabel>
                          <SelectItem value="indonesia">Indonesia</SelectItem>
                          <SelectItem value="english">English</SelectItem>
                        </SelectGroup>
                      </SelectContent>
                    </Select>
                  </div>
                  <div className="gap-1">
                    <p className="font-semibold">Context Type</p>
                    <Select value={selectedContextType} onValueChange={(e: any) => setSelectedContextType(e.target.value)}>
                      <SelectTrigger className="w-[180px]">
                        <SelectValue placeholder="Select Context" />
                      </SelectTrigger>
                      <SelectContent>
                        <SelectGroup>
                          <SelectLabel>Select Context Type</SelectLabel>
                          <SelectItem value="text">Text</SelectItem>
                          <SelectItem value="article">Article</SelectItem>
                          <SelectItem value="transcript">Transcript</SelectItem>
                          <SelectItem value="url">URL</SelectItem>
                        </SelectGroup>
                      </SelectContent>
                    </Select>
                  </div>
                  <div className="gap-1">
                    <p className="font-semibold">Writing Style</p>
                    <Select value={selectedWritingStyle} onValueChange={(e: any) => setSelectedWritingStyle(e.target.value)}>
                      <SelectTrigger className="w-[180px]">
                        <SelectValue placeholder="Select Writing" />
                      </SelectTrigger>
                      <SelectContent>
                        <SelectGroup>
                          <SelectLabel>Select Writing Style</SelectLabel>
                          <SelectItem value="firendly">Friendly</SelectItem>
                          <SelectItem value="profesional">Profesional</SelectItem>
                          <SelectItem value="informational">Informational</SelectItem>
                          <SelectItem value="neutral">Neutral</SelectItem>
                          <SelectItem value="witty">Witty</SelectItem>
                        </SelectGroup>
                      </SelectContent>
                    </Select>
                  </div>
                  <div className="gap-1">
                    <p className="font-semibold">Article Size</p>
                    <Select value={selectedSize} onValueChange={(e: any) => setSelectedSize(e.target.value)}>
                      <SelectTrigger className="w-[180px]">
                        <SelectValue placeholder="Select Size" />
                      </SelectTrigger>
                      <SelectContent>
                        <SelectGroup>
                          <SelectLabel>Select Article Size</SelectLabel>
                          <SelectItem value="news">News (300 - 900 words)</SelectItem>
                          <SelectItem value="info">Info (900 - 2000 words)</SelectItem>
                          <SelectItem value="detail">Detail (2000 - 5000 words)</SelectItem>
                        </SelectGroup>
                      </SelectContent>
                    </Select>
                  </div>
                </div>
                <div>
                  <p className="text-xl font-semibold mb-5">Judul</p>
                  <input
                    type="text"
                    className="w-full border rounded-lg"
                    // {...register("title", {
                    //   value: content?.title,
                    // })}
                    id="title"
                    // defaultValue={content?.title}
                    // onChange={(e) => setSelectedTitle(e.target.value)}
                  />
                </div>
              </form>
            </div>
          </div>
        </div>
      </div>
    </>
  );
};

export default page;