"use client";

import { useState } from "react";
import { useConfig } from "@/lib/config";
import { useLang } from "@/lib/lang";
import {
    useData,
    useFormRefs,
    Button,
    ButtonContainer,
    Frame,
    Box
} from "@/Theme/Midone/Forms";

import { useRouter } from "next/navigation";
import { Dropzone } from "@/Theme/Midone/Forms/Dropzone";
import Link from "next/link";

export default function Page() {

    const { Lang } = useLang();
    const { laraAdmin,mediaPath } = useConfig();
    const router = useRouter();

    let component = useFormRefs();
    const { save } = useData();

    const [result, setResult] = useState(null);

    let uploadUrl = laraAdmin + "/upload/.-media-users";
    let deleteUrl = laraAdmin + "/deleteFile/.-media-users";
    let uploadDir = "media/users/";

    const saveItem = () => save(
        laraAdmin + "/students/excel",
        component,
        "new",
        "",
        (data, res) => {
            console.log("response is:", res);
            setResult({
                inserted_count: res.inserted_count || 0,
                duplicate_count: res.duplicate_count || 0,
                duplicate_usernames: res.duplicate_usernames || [],
            });

        },
        router,
        Lang
    );
    // console.log(result);
    

    // const back = () => router.back();
    
    const back = () => router.back();
    const gotolist = () => {
        router.back();
    };
    const gotoform = () => {
        window.location.reload();
    }

    return (
        <>
            <Frame title={Lang(["public.students"])}>
                
                     {
                         result && (
                    <Box>
                    <div className="mt-5 col-span-12">

                        <div className="overflow-x-auto">

                            <table className="table table-bordered w-full border border-gray-300">

                                <thead>
                                    <tr className="bg-gray-100">
                                        <th className="bg-green-100 border p-2 text-center">
                                         {Lang(["public.students"])} {Lang(["public.inserted"])}
                                        </th>

                                        <th className="bg-red-100 border p-2 text-center">
                                          {Lang(["public.students"])} {Lang(["public.duplicate"])}
                                         
                                        </th>
                                    </tr>
                                </thead>

                                <tbody>
                                    <tr>
                                        <td className="border p-2 text-center">
                                            {result.inserted_count} {Lang(["public.person"])}
                                        </td>

                                        <td className="border p-2 text-center">
                                            {result.duplicate_count} {Lang(["public.person"])}
                                        </td>
                                    </tr>
                                </tbody>

                            </table>

                        </div>

                        {
                            result.duplicate_usernames.length > 0 && (
                                <div className="mt-5">

                                    <h3 className="text-lg font-bold mb-3">
                                       {Lang(["public.duplicate_text"])}
                                    </h3>

                                    <div className="overflow-x-auto">

                                        <table className="table table-bordered w-full border border-gray-300">

                                            <thead>
                                                <tr className="bg-red-100">
                                                    <th className="border p-2 text-center">
                                                        #
                                                    </th>

                                                    <th className="border p-2 text-center">
                                                       {Lang(["public.username"])}
                                                    </th>
                                                </tr>
                                            </thead>

                                            <tbody>

                                                {
                                                    result.duplicate_usernames.map((item, index) => (
                                                        <tr key={index}>

                                                            <td className="border p-2 text-center">
                                                                {index + 1}
                                                            </td>

                                                            <td className="border p-2 text-center">
                                                                {item}
                                                            </td>

                                                        </tr>
                                                    ))
                                                }

                                            </tbody>

                                        </table>

                                    </div>

                                </div>
                            )
                        }

                    </div>
                    </Box>
                )
            }
             {!result && ( <>
            <Box>
                    <div className="col-span-12">

                    <Link className="btn btn-success mr-1 ml-1" target="_blanket" href={`${mediaPath}/public/example_students.xlsx`}>{Lang(["public.example_excel"])}</Link>
                    </div>

                    <Dropzone
                        required={true}
                        refItem={[component, "excel_file"]}
                        uploadUrl={uploadUrl}
                        deleteUrl={deleteUrl + "/"}
                        uploadDir={uploadDir}
                        label="pls_enter_excel_file"
                    />

                </Box>
                </>)}
            </Frame>

            {/* <ButtonContainer>
                <Button label="save" onClick={saveItem} />
                <Button label="back" onClick={back} />
            </ButtonContainer> */}
             <ButtonContainer>
                {!result && ( 
                            <>
                                <Button label="save" onClick={saveItem} />
                                <Button label="back" onClick={back} />
                            </>
                )}
                {result && ( 
                            <>
                                <Button className="btn btn-primary mr-1 ml-1 w-30 " label="gotolist" onClick={gotolist} />
                                <Button className="btn btn-primary mr-1 ml-1 w-30 " label="gotoform" onClick={gotoform} />
                            </>
                )}
            </ButtonContainer>

           

        </>
    );
}