<template>
    <div class="flex flex-col flex-1 w-full">
        <TabGroup>
            <TabList class="flex gap-1 px-4">
                <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 })"
                >
                    <div
                        :class="[
                            'mx-2 pb-3',
                            selected
                                ? 'border-b-[3px] border-blue-300'
                                : 'border-none',
                        ]"
                    >
                        <span
                            :class="[
                                ' px-1 capitalize',
                                selected ? 'text-blue-300 ' : 'text-gray-200',
                            ]"
                        >
                            {{ $t(tab) }}
                            {{ counts[tab] != null ? `(${counts[tab]})` : "" }}
                        </span>
                    </div>
                </Tab>
            </TabList>

            <TabPanels class="mt-0.5">
                <TabPanel
                    as="div"
                    class="flex flex-col flex-1 w-full gap-5 md:flex-row"
                >
                    <Project
                        class="max-w-[800px]"
                        v-if="project"
                        :project="project"
                        :languages="languages"
                        :levelsOfExperience="levelsOfExperience"
                    />

                    <div
                        class="flex flex-col gap-5 md:flex-1 md:max-w-[250px] lg:max-w-xs"
                    >
                        <ProviderInfo
                            :user="project.user"
                            :address="project.user.location?.address"
                            :project="project"
                            :proposal="acceptedProposal"
                        />
                        <Card :title="$t('Register.project_analytics')">
                            <div class="flex flex-col w-full gap-5">
                                <div
                                    class="bg-blue-200 p-2.5 flex flex-col gap-5 rounded-lg"
                                >
                                    <div
                                        class="text-sm font-medium text-gray-300"
                                    >
                                        {{ $t("Register.total_proposals") }}
                                        <span class="block mt-1 text-green-300">
                                            {{ project.proposalCount || 0 }}
                                        </span>
                                    </div>
                                    <template v-if="acceptedProposal">
                                        <div
                                            class="text-sm font-medium text-gray-300"
                                        >
                                            <p class="mb-1">
                                                {{ $t("Register.progress") }}
                                            </p>
                                            <p class="text-green-300">
                                                %
                                                {{
                                                    project.completionPercentage.toFixed(
                                                        2
                                                    )
                                                }}
                                            </p>
                                            <div
                                                class="w-full bg-white rounded-full h-1.5"
                                            >
                                                <div
                                                    class="bg-green-300 h-1.5 rounded-full"
                                                    :style="{
                                                        width: `${project.completionPercentage}%`,
                                                    }"
                                                ></div>
                                            </div>
                                        </div>
                                    </template>
                                </div>
                                <template v-if="acceptedProposal">
                                    <Contract
                                        type="worker"
                                        :project="project"
                                        :proposal="project.hired"
                                    />
                                </template>
                                <template v-else-if="unacceptedProposal">
                                    <Button
                                        size="full-sm"
                                        :href="
                                            route(
                                                'engineer.proposals.show',
                                                unacceptedProposal.id
                                            )
                                        "
                                    >
                                        <span
                                            class="flex items-center justify-center gap-2.5 w-full"
                                        >
                                            <svg
                                                width="21"
                                                height="20"
                                                viewBox="0 0 21 20"
                                                fill="none"
                                                xmlns="http://www.w3.org/2000/svg"
                                            >
                                                <g
                                                    clip-path="url(#clip0_1072_44153)"
                                                >
                                                    <path
                                                        d="M10.5002 11.6663C11.4206 11.6663 12.1668 10.9201 12.1668 9.99967C12.1668 9.0792 11.4206 8.33301 10.5002 8.33301C9.57969 8.33301 8.8335 9.0792 8.8335 9.99967C8.8335 10.9201 9.57969 11.6663 10.5002 11.6663Z"
                                                        stroke="white"
                                                        stroke-width="1.5"
                                                        stroke-linecap="round"
                                                        stroke-linejoin="round"
                                                    />
                                                    <path
                                                        d="M18.8332 10.0003C16.6107 13.8895 13.8332 15.8337 10.4998 15.8337C7.1665 15.8337 4.389 13.8895 2.1665 10.0003C4.389 6.11116 7.1665 4.16699 10.4998 4.16699C13.8332 4.16699 16.6107 6.11116 18.8332 10.0003Z"
                                                        stroke="white"
                                                        stroke-width="1.5"
                                                        stroke-linecap="round"
                                                        stroke-linejoin="round"
                                                    />
                                                </g>
                                                <defs>
                                                    <clipPath
                                                        id="clip0_1072_44153"
                                                    >
                                                        <rect
                                                            width="20"
                                                            height="20"
                                                            fill="white"
                                                            transform="translate(0.5)"
                                                        />
                                                    </clipPath>
                                                </defs>
                                            </svg>

                                            {{
                                                $t("Register.view_my_proposal")
                                            }}
                                        </span>
                                    </Button>
                                </template>
                            </div>
                        </Card>
                        <Card
                            :title="$t('Register.share')"
                            class="!overflow-auto"
                        >
                            <ul>
                                <ProfileLink
                                    copy
                                    :link="route('project.show', project.slug)"
                                    :type="'muhandisin'"
                                />
                            </ul>
                        </Card>
                    </div>
                </TabPanel>
                <TabPanel
                    as="div"
                    class="flex flex-col flex-1 w-full gap-5 md:flex-row"
                >
                    <section
                        class="flex flex-col w-full gap-5"
                        v-if="acceptedProposal"
                    >
                        <HiredSummaryCard worker :proposal="acceptedProposal" />
                        <Milestones
                            :milestones="acceptedProposal.milestones"
                            :accepted="acceptedProposal.accepted"
                            worker
                        />
                    </section>
                    <section
                        class="flex flex-col w-full gap-5"
                        v-else-if="unacceptedProposal"
                    >
                        <HiredSummaryCard :proposal="unacceptedProposal" />
                        <Milestones
                            :milestones="unacceptedProposal.milestones"
                            :accepted="unacceptedProposal.accepted"
                        />
                    </section>
                    <div
                        class="flex flex-col gap-5 md:flex-1 md:max-w-[250px] lg:max-w-xs"
                    >
                        <ProviderInfo
                            :user="project.user"
                            :address="project.user.location?.address"
                            :project="project"
                            :proposal="acceptedProposal"
                        />
                        <Card :title="$t('Register.project_analytics')">
                            <div class="flex flex-col w-full gap-5">
                                <div
                                    class="bg-blue-200 p-2.5 flex flex-col gap-5 rounded-lg"
                                >
                                    <div
                                        class="text-sm font-medium text-gray-300"
                                    >
                                        {{ $t("Register.total_proposals") }}
                                        <span class="block mt-1 text-green-300">
                                            {{ project.proposalCount || 0 }}
                                        </span>
                                    </div>
                                    <template v-if="acceptedProposal">
                                        <div
                                            class="text-sm font-medium text-gray-300"
                                        >
                                            <p class="mb-1">
                                                {{ $t("Register.progress") }}
                                            </p>
                                            <p class="text-green-300">
                                                %
                                                {{
                                                    project.completionPercentage.toFixed(
                                                        2
                                                    )
                                                }}
                                            </p>
                                            <div
                                                class="w-full bg-white rounded-full h-1.5"
                                            >
                                                <div
                                                    class="bg-green-300 h-1.5 rounded-full"
                                                    :style="{
                                                        width: `${project.completionPercentage}%`,
                                                    }"
                                                ></div>
                                            </div>
                                        </div>
                                    </template>
                                </div>
                                <template v-if="acceptedProposal">
                                    <Contract
                                        type="worker"
                                        :project="project"
                                        :proposal="project.hired"
                                    />
                                </template>
                                <template v-else-if="unacceptedProposal">
                                    <Button
                                        size="full-sm"
                                        :href="
                                            route(
                                                'engineer.proposals.show',
                                                unacceptedProposal.id
                                            )
                                        "
                                    >
                                        <span
                                            class="flex items-center justify-center gap-2.5 w-full"
                                        >
                                            <svg
                                                width="21"
                                                height="20"
                                                viewBox="0 0 21 20"
                                                fill="none"
                                                xmlns="http://www.w3.org/2000/svg"
                                            >
                                                <g
                                                    clip-path="url(#clip0_1072_44153)"
                                                >
                                                    <path
                                                        d="M10.5002 11.6663C11.4206 11.6663 12.1668 10.9201 12.1668 9.99967C12.1668 9.0792 11.4206 8.33301 10.5002 8.33301C9.57969 8.33301 8.8335 9.0792 8.8335 9.99967C8.8335 10.9201 9.57969 11.6663 10.5002 11.6663Z"
                                                        stroke="white"
                                                        stroke-width="1.5"
                                                        stroke-linecap="round"
                                                        stroke-linejoin="round"
                                                    />
                                                    <path
                                                        d="M18.8332 10.0003C16.6107 13.8895 13.8332 15.8337 10.4998 15.8337C7.1665 15.8337 4.389 13.8895 2.1665 10.0003C4.389 6.11116 7.1665 4.16699 10.4998 4.16699C13.8332 4.16699 16.6107 6.11116 18.8332 10.0003Z"
                                                        stroke="white"
                                                        stroke-width="1.5"
                                                        stroke-linecap="round"
                                                        stroke-linejoin="round"
                                                    />
                                                </g>
                                                <defs>
                                                    <clipPath
                                                        id="clip0_1072_44153"
                                                    >
                                                        <rect
                                                            width="20"
                                                            height="20"
                                                            fill="white"
                                                            transform="translate(0.5)"
                                                        />
                                                    </clipPath>
                                                </defs>
                                            </svg>

                                            {{
                                                $t("Register.view_my_proposal")
                                            }}
                                        </span>
                                    </Button>
                                </template>
                            </div>
                        </Card>
                        <Card
                            :title="$t('Register.share')"
                            class="!overflow-auto"
                        >
                            <ul>
                                <ProfileLink
                                    copy
                                    :link="route('project.show', project.slug)"
                                    :type="'muhandisin'"
                                />
                            </ul>
                        </Card>
                    </div>
                </TabPanel>
            </TabPanels>
        </TabGroup>
    </div>
</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 ProfileLink from "@/components/General/ProfileLink.vue";

import ProviderInfo from "@/components/Projects/ProviderInfo";

const props = defineProps({
    project: Object,
    levelsOfExperience: {
        type: Array,
        required: true,
    },
    languages: {
        type: Array,
        required: true,
    },
    acceptedProposal: Object,
    unacceptedProposal: Object,
});
const tabs = props.acceptedProposal
    ? ["project_details", "deliverables"]
    : ["project_details"];

const tabRefs = 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 counts = computed(() => {
    return {
        project_details: null,
        deliverables: null,
    };
});

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