"use client";
import { useEffect, useState } from "react";
import { useLang } from "@/lib/lang";
import { useConfig } from "@/lib/config";
import Link from "next/link";
import { Loading } from "@/Theme/Midone/Utils";
import { Button, Input, Pic, Tools, FeatherIcon, useData, useFormRefs, ButtonContainer } from "@/Theme/Midone";
import { useAuth } from "@/lib/auth";

export default function ViewProfile() {
    const { laraAdmin, nextAdmin, mediaPath } = useConfig();
    const { Lang, local } = useLang();
    const { save, get } = useData();
    const component = useFormRefs();
    const { user } = useAuth({ guard: "admin" });
    const id = user?.id;
    const url = `${laraAdmin}/users/profile-info/${id}`;

    useEffect(() => { get(url, component, "info"); }, []);

    const [displayForm, setDisplayForm] = useState(false);
    const changeDisplayForm = (flag = true) => setDisplayForm(flag);

    const saveItem = () => {
        save(`${laraAdmin}/users/edit-email/${id}`, component, 'edit', "", () => {
            changeDisplayForm(false);
            get(url, component, "info");
        });
    };

    const data = component?.state?.info?.item;
    const gender = Tools?.displayGender(data?.gender, data?.gender_id);

    return (
        <>
            <div className="flex items-center mt-8">
                <h2 className="text-lg font-medium ml-auto">{Lang("public.profile")}</h2>
            </div>

            {!data ? <Loading className="mt-5" /> :
                <div className="box px-5 pt-5 mt-5">
                    <div className="flex flex-col lg:flex-row border-b pb-5">
                        {/* پروفایل */}
                        <div className="flex-1 px-5 flex items-center">
                            <div className="w-20 h-20 sm:w-40 sm:h-24 lg:w-32 lg:h-32 relative">
                                <Pic src={`${mediaPath}/users/${data?.photo}`} defaultImg={`${mediaPath}/public/default/avatar.png`} classImg="rounded-full" />
                            </div>
                            <div className="mr-5">
                                <div className="text-lg font-medium">{gender} {data?.firstname} {data?.lastname}</div>
                                <div className="text-gray-600">{data?.role?.["title_" + local]}</div>
                            </div>
                        </div>

                        {/* جزئیات */}
                        <div className="flex-1 px-5 border-r">
                            <h4 className="text-xl font-medium mt-3">{Lang("public.detail")}</h4>
                            <div className="mt-4 space-y-3">
                                <DetailItem icon="UserCheck" label="studentID" value={data?.studentID} />
                                <DetailItem icon="User" label="username" value={data?.username} />
                                <DetailItem icon="Tag" label="codemeli" value={data?.codemeli} />
                                <DetailItem icon="PhoneCall" label="mobile" value={data?.mobile} />
                                <DetailItem icon="Mail" label="email" value={data?.email} />
                            </div>
                        </div>

                        {/* رزومه */}
                        {data?.resume && (
                            <div className="flex-1 px-5 border-t lg:border-t-0">
                                <h4 className="text-xl font-medium mt-3">{Lang("public.resume")}</h4>
                                <div className="mt-3">{data?.resume ?? "---"}</div>
                            </div>
                        )}
                    </div>

                    {/* دکمه‌ها */}
                    <div className="flex justify-ent m-3 pb-3 space-x-2">
                        {displayForm ? (
                            <>
                                <Input dir="ltr" label="email" refItem={[component, "email"]} defaultValue={data?.email} />
                                <ButtonContainer>

                                    <Button className="btn btn-primary w-20 mr-2 mt-3" label="save" onClick={saveItem} />
                                    <Button className="btn btn-danger w-20 mr-2 mt-3" label="cancel" onClick={() => changeDisplayForm(false)} />
                                </ButtonContainer>
                            </>
                        ) : (
                            <>
                                <Link className="btn btn-primary flex items-center ml-3" href={`${nextAdmin}/changePassword`}>
                                    <FeatherIcon className="mr-2" size="18" name="Lock" />
                                    {Lang('public.edit')} {Lang('public.password')}
                                </Link>
                                <button className="btn btn-primary flex items-center" onClick={() => changeDisplayForm(true)}>
                                    <FeatherIcon className="mr-2" size="18" name="Edit2" />
                                    {Lang('public.edit')} {Lang('public.email')}
                                </button>
                            </>
                        )}
                    </div>
                </div>
            }
        </>
    );
}

function DetailItem({ icon, label, value }) {
    const { Lang } = useLang();
    return (
        <div className="flex items-center justify-between">
            <div className="flex items-center">
                <FeatherIcon iconClassName="ml-2" size="18" name={icon} />
                {Lang(`public.${label}`)}
            </div>
            <span>{value ?? "---"}</span>
        </div>
    );
}