<template>
    <div class="flex flex-col flex-1 w-full max-w-[800px]">
        <TabGroup>
            <TabList class="flex gap-1 px-4 overflow-x-auto">
                <Tab
                    v-for="tab in tabs"
                    :key="tab"
                    ref="tabRefs"
                    class="pt-4 font-semibold focus:outline-none focus:border-none"
                    as="button"
                    v-slot="{ selected }"
                    @click="addUrlParam({ name: 'tab', value: tab })"
                >
                    <span
                        :class="[
                            ' px-1 capitalize mx-1 pb-3 inline-block whitespace-nowrap',
                            selected
                                ? 'text-blue-300 border-b-[3px] border-blue-300'
                                : 'text-gray-200 border-none',
                        ]"
                    >
                        {{ $t(tab) }}
                        {{ counts[tab] != null ? `(${counts[tab]})` : "" }}
                    </span>
                </Tab>
            </TabList>

            <TabPanels class="mt-0.5">
                <TabPanel as="div" class="flex flex-1 w-full gap-5">
                    <Project
                        v-if="project"
                        :project="project"
                        :languages="languages"
                        :levelsOfExperience="levelsOfExperience"
                    />
                </TabPanel>
                <TabPanel
                    v-if="
                        !(
                            project.status === 'Completed' ||
                            project.status === 'Cancelled' ||
                            project.hired
                        )
                    "
                    as="div"
                    class="flex flex-1 w-full gap-5"
                >
                    <Card title="Register.invitations">
                        <template #actions>
                            <Button
                                v-if="invited.length > 0"
                                type="button"
                                @click="openInviteModal"
                                size="md"
                                >{{ $t("Register.invite") }}</Button
                            >
                        </template>
                        <div
                            v-if="invited.length == 0"
                            class="flex min-h-[480px] items-center justify-center"
                        >
                            <div
                                class="max-w-[290px] w-full flex flex-col items-center justify-center gap-5"
                            >
                                <svg
                                    width="166"
                                    height="151"
                                    viewBox="0 0 166 151"
                                    fill="none"
                                    xmlns="http://www.w3.org/2000/svg"
                                >
                                    <path
                                        opacity="0.2"
                                        d="M4.23242 11.5342C4.23242 6.01134 8.70958 1.53418 14.2324 1.53418H130.709C136.232 1.53418 140.709 6.01133 140.709 11.5342V121.65C140.709 127.173 136.232 131.65 130.709 131.65H14.2324C8.70958 131.65 4.23242 127.173 4.23242 121.65V11.5342Z"
                                        fill="#50CD89"
                                    />
                                    <path
                                        d="M81.1408 79.5726C94.407 79.5726 105.161 68.8182 105.161 55.5519C105.161 42.2857 94.407 31.5312 81.1408 31.5312C67.8745 31.5312 57.1201 42.2857 57.1201 55.5519C57.1201 68.8182 67.8745 79.5726 81.1408 79.5726Z"
                                        stroke="#50CD89"
                                        stroke-width="10.5"
                                        stroke-linecap="round"
                                        stroke-linejoin="round"
                                    />
                                    <path
                                        d="M45.1099 139.625V127.614C45.1099 121.244 47.6406 115.134 52.1454 110.629C56.6501 106.124 62.7599 103.594 69.1305 103.594H93.1512C99.5219 103.594 105.632 106.124 110.136 110.629C114.641 115.134 117.172 121.244 117.172 127.614V139.625"
                                        stroke="#50CD89"
                                        stroke-width="10.5"
                                        stroke-linecap="round"
                                        stroke-linejoin="round"
                                    />
                                    <path
                                        d="M141.192 61.5566V97.5877M123.177 79.5721H159.208H123.177Z"
                                        stroke="#50CD89"
                                        stroke-width="10.5"
                                        stroke-linecap="round"
                                        stroke-linejoin="round"
                                    />
                                </svg>
                                <p class="text-xs text-center text-gray-200">
                                    {{ $t("Register.no_invitations") }}
                                </p>
                                <Button
                                    @click="openInviteModal"
                                    size="full-sm"
                                    >{{ $t("Register.invite") }}</Button
                                >
                            </div>
                        </div>
                        <ul v-else>
                            <li
                                v-for="worker in invited"
                                :key="worker.id"
                                class="flex flex-1 text-center justify-center items-center md:items-start md:justify-start gap-2.5 w-full flex-wrap py-5 flex-col md:flex-row"
                            >
                                <div class="rounded-full">
                                    <img
                                        class="object-cover aspect-square w-[65px] h-[65px] rounded-full overflow-hidden no-magnify"
                                        :src="worker.user.profile_photo_url"
                                        alt="profile image"
                                    />
                                </div>
                                <div
                                    class="flex flex-1 h-full justify-center md:items-start items-center flex-col gap-1.5"
                                >
                                    <p class="font-medium text-gray-300">
                                        <a
                                            :href="route( worker.type === 'App\\Models\\Engineer'? 'engineer.profile.slugged': 'firm.profile.slugged', worker.slug)"
                                            class="text-sm font-medium grey-200"
                                        >
                                        {{ worker.name }}
                                        </a>
                                    </p>
                                    <p
                                        v-if="worker.tag_line"
                                        class="text-sm text-blue-300 overflow-ellipsis"
                                    >
                                        {{ worker.tag_line }}
                                    </p>
                                    <p
                                        class="flex gap-1 text-xs font-medium leading-4 text-gray-200 cont_spans normal font-Inter"
                                    >
                                        <svg
                                            width="14"
                                            height="14"
                                            viewBox="0 0 14 14"
                                            fill="none"
                                            xmlns="http://www.w3.org/2000/svg"
                                        >
                                            <path
                                                d="M7.00015 10.8543L3.39982 12.7472L4.08757 8.73797L1.1709 5.89889L5.1959 5.31555L6.99606 1.66797L8.79623 5.31555L12.8212 5.89889L9.90456 8.73797L10.5923 12.7472L7.00015 10.8543Z"
                                                stroke="#FA8C16"
                                                stroke-width="1.5"
                                                stroke-linecap="round"
                                                stroke-linejoin="round"
                                            />
                                        </svg>
                                        {{ worker.averageRating }}
                                    </p>
                                </div>
                            </li>
                        </ul>
                    </Card>
                </TabPanel>

                <TabPanel as="div" class="flex flex-1 w-full gap-5">
                    <Card
                        v-if="project.proposals.length > 0"
                        :title="$t('Register.proposals')"
                    >
                        <Proposals :proposals="project.proposals" />
                    </Card>
                    <Card v-else>
                        <div
                            class="flex min-h-[480px] items-center justify-center"
                        >
                            <div
                                class="max-w-[290px] w-full flex flex-col items-center justify-center gap-5"
                            >
                                <svg
                                    width="166"
                                    height="150"
                                    viewBox="0 0 166 150"
                                    fill="none"
                                    xmlns="http://www.w3.org/2000/svg"
                                >
                                    <path
                                        opacity="0.2"
                                        d="M4.23242 11.0342C4.23242 5.51134 8.70958 1.03418 14.2324 1.03418H130.709C136.232 1.03418 140.709 5.51133 140.709 11.0342V121.15C140.709 126.673 136.232 131.15 130.709 131.15H14.2324C8.70958 131.15 4.23242 126.673 4.23242 121.15V11.0342Z"
                                        fill="#50CD89"
                                    />
                                    <path
                                        d="M123.657 25V50.0403C123.657 51.7006 124.317 53.2929 125.491 54.4669C126.665 55.6408 128.257 56.3004 129.917 56.3004H154.958"
                                        stroke="#50CD89"
                                        stroke-width="10.5"
                                        stroke-linecap="round"
                                        stroke-linejoin="round"
                                    />
                                    <path
                                        d="M67.3164 87.6008V37.5202C67.3164 34.1996 68.6355 31.0151 70.9834 28.6671C73.3314 26.3191 76.516 25 79.8365 25H123.657L154.957 56.3004V125.161C154.957 128.482 153.638 131.666 151.29 134.014C148.942 136.362 145.758 137.681 142.437 137.681H108.007M48.5361 125.161H92.3567M92.3567 125.161L73.5764 106.381M92.3567 125.161L73.5764 143.941"
                                        stroke="#50CD89"
                                        stroke-width="10.5"
                                        stroke-linecap="round"
                                        stroke-linejoin="round"
                                    />
                                </svg>

                                <p class="text-xs text-center text-gray-200">
                                    {{ $t("Register.no_proposals") }}
                                </p>
                            </div>
                        </div>
                    </Card>
                </TabPanel>

                <TabPanel as="div" class="flex flex-1 w-full gap-5">
                    <section
                        class="flex flex-col w-full gap-5"
                        v-if="project.hired"
                    >
                        <HiredSummaryCard :proposal="project.hired" />
                        <Milestones
                            :milestones="project.hired.milestones"
                            :accepted="project.hired.accepted"
                            :canPay="
                                project.status != 'Completed' &&
                                project.status != 'Cancelled'
                            "
                        />

                        <Reviews
                            v-if="
                                project.status === 'Completed' ||
                                project.status === 'Cancelled'
                            "
                            :reviews="project.user_rates"
                            :reviewable="project"
                            type="project"
                            :canManage="true"
                        />
                    </section>
                    <Card v-else>
                        <div
                            class="flex min-h-[480px] items-center justify-center"
                        >
                            <div
                                class="max-w-[290px] w-full flex flex-col items-center justify-center gap-5"
                            >
                                <svg
                                    width="166"
                                    height="150"
                                    viewBox="0 0 166 150"
                                    fill="none"
                                    xmlns="http://www.w3.org/2000/svg"
                                >
                                    <path
                                        opacity="0.2"
                                        d="M4.23242 11.0342C4.23242 5.51134 8.70958 1.03418 14.2324 1.03418H130.709C136.232 1.03418 140.709 5.51133 140.709 11.0342V121.15C140.709 126.673 136.232 131.15 130.709 131.15H14.2324C8.70958 131.15 4.23242 126.673 4.23242 121.15V11.0342Z"
                                        fill="#50CD89"
                                    />
                                    <path
                                        d="M144.333 59.2852H59.6665C52.9865 59.2852 47.5713 64.7004 47.5713 71.3804V125.809C47.5713 132.489 52.9865 137.904 59.6665 137.904H144.333C151.013 137.904 156.428 132.489 156.428 125.809V71.3804C156.428 64.7004 151.013 59.2852 144.333 59.2852Z"
                                        stroke="#50CD89"
                                        stroke-width="8.5"
                                        stroke-linecap="round"
                                        stroke-linejoin="round"
                                    />
                                    <path
                                        d="M77.8086 59.2852V47.1899C77.8086 43.9821 79.0829 40.9056 81.3512 38.6373C83.6195 36.369 86.696 35.0947 89.9038 35.0947H114.094C117.302 35.0947 120.379 36.369 122.647 38.6373C124.915 40.9056 126.189 43.9821 126.189 47.1899V59.2852"
                                        stroke="#50CD89"
                                        stroke-width="8.5"
                                        stroke-linecap="round"
                                        stroke-linejoin="round"
                                    />
                                    <path
                                        d="M102 89.5234V89.5845"
                                        stroke="#50CD89"
                                        stroke-width="8.5"
                                        stroke-linecap="round"
                                        stroke-linejoin="round"
                                    />
                                    <path
                                        d="M47.5713 95.5713C64.4537 104.078 83.0951 108.51 102 108.51C120.904 108.51 139.546 104.078 156.428 95.5713"
                                        stroke="#50CD89"
                                        stroke-width="8.5"
                                        stroke-linecap="round"
                                        stroke-linejoin="round"
                                    />
                                </svg>

                                <p class="text-xs text-center text-gray-200">
                                    {{ $t("Register.didnot_accept") }}!
                                </p>
                            </div>
                        </div>
                    </Card>
                </TabPanel>
            </TabPanels>
        </TabGroup>
    </div>
    <Modal ref="inviteRef" size="lg" @closed="null">
        <div
            class="flex flex-col items-center justify-center w-full gap-5 min-h-[250px]"
        >
            <FormKit
                form-class="flex flex-col flex-1 w-full mt-5"
                name="tagline_form"
                type="form"
                @submit="submitInvite"
                :actions="false"
                #default="{ state: { valid } }"
                submit-behavior="live"
            >
                <div class="flex-1">
                    <template v-if="invitedWorkers.length < 5">
                        <FormKit
                            v-model="search"
                            type="text"
                            :label="$t('Register.search_engineers_firms')"
                            :help="$t('Register.search_engineers_firms_help')"
                        >
                            <template #suffix>
                                <button
                                    class="text-gray-200"
                                    type="button"
                                    @click="search = ''"
                                >
                                    <svg
                                        xmlns="http://www.w3.org/2000/svg"
                                        class="icon icon-tabler icon-tabler-x"
                                        width="16"
                                        height="16"
                                        viewBox="0 0 24 24"
                                        stroke-width="2"
                                        stroke="currentColor"
                                        fill="none"
                                        stroke-linecap="round"
                                        stroke-linejoin="round"
                                    >
                                        <path
                                            stroke="none"
                                            d="M0 0h24v24H0z"
                                            fill="none"
                                        />
                                        <line x1="18" y1="6" x2="6" y2="18" />
                                        <line x1="6" y1="6" x2="18" y2="18" />
                                    </svg>
                                </button>
                            </template>
                        </FormKit>
                        <div
                            class="relative z-10 w-full max-w-3xl ltr:-translate-y-10 rtl:-translate-y-14"
                        >
                            <AlgoliaLiveSearch
                                :q="search"
                                :targets="['Engineers', 'Firms']"
                                @select="handleSelect"
                            />
                        </div>
                    </template>
                    <template v-else>
                        <p class="text-xs text-gray-200">
                            {{ $t("Register.max_invites") }}
                        </p>
                    </template>

                    <ul
                        class="flex flex-col w-full gap-2 py-3"
                        v-if="invitedWorkers.length > 0"
                    >
                        <li
                            v-for="invitedWorker in invitedWorkers"
                            :key="invitedWorker.id"
                            class="flex items-start justify-start w-full gap-2 p-2 transition-all rounded-lg"
                        >
                            <img
                                v-if="invitedWorker.profile_photo_url"
                                class="w-10 h-10 rounded-full"
                                :src="invitedWorker.profile_photo_url"
                                :alt="invitedWorker.name"
                            />
                            <span class="flex flex-col flex-1 gap-1 my-auto">
                                <span class="line-clamp-1 text-start">
                                    {{
                                        invitedWorker.title ||
                                        invitedWorker.name
                                    }}
                                </span>
                                <span
                                    class="text-xs text-gray-200 text-start line-clamp-2"
                                >
                                    {{
                                        invitedWorker.description ||
                                        invitedWorker.tag_line
                                    }}
                                </span>
                            </span>
                            <Button
                                size="xs"
                                buttonStyle="danger"
                                @click="removeInvitedWorker(invitedWorker)"
                            >
                                <svg
                                    xmlns="http://www.w3.org/2000/svg"
                                    class="icon icon-tabler icon-tabler-x"
                                    width="16"
                                    height="16"
                                    viewBox="0 0 24 24"
                                    stroke-width="2"
                                    stroke="#ffffff"
                                    fill="none"
                                    stroke-linecap="round"
                                    stroke-linejoin="round"
                                >
                                    <path
                                        stroke="none"
                                        d="M0 0h24v24H0z"
                                        fill="none"
                                    />
                                    <line x1="18" y1="6" x2="6" y2="18" />
                                    <line x1="6" y1="6" x2="18" y2="18" />
                                </svg>
                            </Button>
                        </li>
                    </ul>
                    <ul v-else></ul>
                </div>
                <div
                    class="flex items-center justify-end w-full gap-2.5 mt-auto"
                >
                    <Button
                        size="md"
                        @click="closeInviteModal"
                        buttonStyle="white"
                        >{{ $t("Register.cancel") }}
                    </Button>
                    <Button
                        size="md"
                        @click="submitInvite"
                        :disabled="
                            inviteForm.processing || invitedWorkers.length < 1
                        "
                        :loading="inviteForm.processing"
                        >{{ $t("Register.invite") }}
                    </Button>
                </div>
            </FormKit>
        </div>
    </Modal>
</template>

<script setup>
import { TabGroup, TabList, Tab, TabPanels, TabPanel } from "@headlessui/vue";
import OrdersList from "@/Pages/Services/Engineer/Partials/OrdersList.vue";
import { onMounted, ref, computed } from "@vue/runtime-core";
import Card from "@/components/Containers/ContentCard";
import Button from "@/Jetstream/Button";
import Project from "@/components/Projects/SingleProject.vue";

import Proposals from "@/components/Projects/Client/Proposals/List.vue";

import HiredSummaryCard from "@/components/Projects/Client/Proposals/HiredSummaryCard.vue";
import Milestones from "@/components/Projects/Client/Proposals/HiredMilestonesCard.vue";
import { addUrlParam } from "@/composables/urlParams";
import Reviews from "@/components/Reviews/Create.vue";
import Modal from "@/components/General/Modal.vue";
import { useForm } from "@inertiajs/inertia-vue3";
import Listbox from "@/components/Listbox.vue";
import AlgoliaLiveSearch from "@/components/Filtration/AlgoliaLiveSearchMultiple";

const props = defineProps({
    project: Object,
    levelsOfExperience: {
        type: Array,
        required: true,
    },
    languages: {
        type: Array,
        required: true,
    },
    invited: {
        type: Array,
        required: true,
    },
});
const tabs =
    props.project.status === "Completed" ||
    props.project.status === "Cancelled" ||
    props.project.hired
        ? ["project_details", "proposals", "hired"]
        : ["project_details", "invited", "proposals", "hired"];

const tabRefs = ref([]);
const inviteRef = ref([]);

const search = ref("");

const inviteForm = useForm({
    workers: [],
    project_id: props.project.id,
});

const invitedWorkers = ref([]);

const navigateToQueryTab = () => {
    const params = new URLSearchParams(window.location.search);
    const tab = params.get("tab")?.toLowerCase();
    if (tabs.includes(tab)) {
        const tabRef = tabRefs.value[tabs.indexOf(tab)];
        tabRef?.el?.click();
    }
};

const openInviteModal = () => {
    inviteRef.value.open();
};
const closeInviteModal = () => {
    inviteRef.value.close();
};

const submitInvite = () => {
    // add invited workers to form
    inviteForm.workers = invitedWorkers.value.map((worker) => ({
        id: worker.id,
        type: worker.target,
    }));

    inviteForm.post(
        route("client.projects.invite-worker", props.project.slug),
        {
            onSuccess: () => {
                closeInviteModal();
                invitedWorkers.value = [];
            },
        }
    );
};

const handleSelect = (item) => {
    inviteForm.worker_id = item.id;
    inviteForm.worker_type = item.type;
    addInvitedWorker(item);

    search.value = "";
};

const removeInvitedWorker = (worker) => {
    invitedWorkers.value = invitedWorkers.value.filter(
        (invitedWorker) => invitedWorker.id !== worker.id
    );
};

const addInvitedWorker = (worker) => {
    // check if worker is already invited
    if (
        invitedWorkers.value.some(
            (invitedWorker) =>
                invitedWorker.id === worker.id &&
                worker.target === invitedWorker.target
        ) ||
        invitedWorkers.value.length >= 5
    )
        return;

    invitedWorkers.value.push(worker);
};

const counts = computed(() => {
    return {
        "project details": null,
        invited: props.invited?.length ?? 0,
        proposals: props.project.proposals.length,
        hired: props.project.hired ? 1 : 0,
    };
});

onMounted(() => {
    navigateToQueryTab();
});
</script>
