import Link from 'next/link';
import AccountDropdown from '../../../components/AccountDropdown';
import InlineLink from "../../../components/InlineLink";
import Image from 'next/image';
import classnames from 'classnames';
import { Menu, MenuButton, MenuItem, MenuItems } from '@headlessui/react'

import { Schibsted_Grotesk } from 'next/font/google'
import DashboardPieChart from '@/components/DashboardPieChart';
import { FaRegIdCard } from "react-icons/fa";
import { GrMapLocation } from "react-icons/gr";
import { FiDownload } from "react-icons/fi";
import LocationSearchInput from '@/components/LocationSearchInput';
import Button from '@/components/Button';

const font = Schibsted_Grotesk({ subsets: ['latin'] })

export default function Member() {
  return (
    <div className="relative w-full h-200">
        <div className="absolute bottom-0 right-0 flex flex-col justify-end items-end w-full h-full">
            <div className="w-full -mb-[2px] flex justify-start">
                <div className="relative w-31 bg-copper rounded-out-br-4xl" />
                <div className="w-21/24 h-20 border-b-2 border-copper" />
            </div>
            <div className="w-1/24 h-full flex justify-start">
                <div className="w-[calc(50%+6px)] flex flex-col">
                    <div className={classnames(
                        "relative h-full border-r-6 rounded-out-tl-4xl rounded-tr-4xl bg-copper border-atmosphere"
                    )} />
                </div>
            </div>
        </div>
        <div className="w-full h-full flex flex-col justify-start items-center">
            <div className="w-21/24">
                <div className="h-20 flex justify-between items-center">
                    <div className={classnames('-ml-[1px] z-1')}>
                        <Image
                            src="/images/bbstpa-forsite.png"
                            alt="Britton Logo"
                            width={205}
                            height={60}
                        />
                    </div>
                    <div className="-mr-[1px] z-1">
                        <AccountDropdown userRole="member" />
                    </div>
                </div>
            </div>
            <div className="w-full h-full flex justify-start">
                <div className="relative w-31 h-full flex flex-col text-deepcove text-center bg-atmosphere rounded-out-tr-4xl divide-y divide-bluetang">
                    <a href="#" className="w-full h-20 mt-15 flex justify-center items-center bg-bluetang text-platinum">
                        Dashboard
                    </a>
                    <a href="#" className="w-full h-20 flex justify-center items-center hover:text-platinum">
                        My Plan & Benefits
                    </a>
                    <a href="#" className="w-full h-20 flex justify-center items-center hover:text-platinum">
                        Plan Utilization
                    </a>
                    <a href="#" className="w-full h-20 flex justify-center items-center hover:text-platinum">
                        Claims & Authorizations
                    </a>
                    <a href="#" className="w-full h-20 flex justify-center items-center hover:text-platinum">
                        Providers & Services
                    </a>
                    <a href="#" className="w-full h-20 flex justify-center items-center hover:text-platinum">
                        Insurance Card
                    </a>
                    <a href="#" className="w-full h-20 flex justify-center items-center hover:text-platinum border-b border-bluetang">
                        Benefits Documents
                    </a>
                </div>
                <div className="flex w-21/24 ml-8 pt-4">
                    <div className="w-full flex flex-col justify-start">
                        <div className={classnames(
                            "text-4xl text-left z-1 text-bluemana font-semibold"
                        )}>
                            Robert La'Blah
                        </div>
                        <div className={classnames(
                            "w-full h-[6px] rounded-s bg-atmosphere z-1"
                            )}>
                        </div>
                        <div className={classnames("w-full flex justify-start pt-4 z-2 space-x-4")}>
                            <div className="flex flex-col space-y-4">
                                <div className="flex space-x-4">
                                    <div className="flex flex-col justify-center items-center text-xl border border-6 border-bluetang rounded-4xl">
                                        <div className="flex justify-between items-end px-4">
                                            <p className={classnames("pb-18 text-[#32CD32] font-semibold", font.className)}>Paid</p>
                                            <div className="flex flex-col items-center">
                                                <DashboardPieChart paid={1207.23} remaining={292.77} />
                                                <p className="text-2xl">Deductable Progress</p>
                                            </div>
                                            <p className={classnames("pb-18 font-semibold", font.className)}>Remaining</p>
                                        </div>
                                    </div>
                                    <div className="flex flex-col justify-center items-center px-4 py-3 text-xl border border-6 border-atmosphere rounded-4xl">
                                        <div className="text-deepcove -mb-11 z-3 font-semibold">My Card</div>
                                        <FaRegIdCard size={150} className="text-bluemana" />
                                        <div className={classnames("w-full flex justify-evenly items-center space-x-1", font.className)}>
                                            <Button className="hover:text-bronze">
                                                View
                                            </Button>
                                            {/* <div className="hover:text-bronze">View</div> */}
                                            <p>|</p>
                                            <Button className="hover:text-bronze">
                                                Download
                                            </Button>
                                            {/* <div className="hover:text-bronze">Download</div> */}
                                        </div>
                                    </div>
                                </div>
                                <div className="flex">
                                    <div className="w-full flex flex-col px-4 py-3 border border-6 border-bluemana rounded-4xl space-y-2">
                                        <div className="w-full flex justify-center text-2xl text-bronze z-3 font-semibold">
                                            <p>Find A Provider</p>
                                        </div>
                                        <div className={classnames("w-full flex items-start px-2 text-xl", font.className)}>
                                            <GrMapLocation size={50} className="pr-4 pb-5" />
                                            <LocationSearchInput className="pl-3 rounded-l-xl border-y-2 border-l-2 border-platinum" />
                                            <Button className="pr-3 pl-2 bg-platinum hover:bg-bluemana text-center text-deepcove font-semibold rounded-r-xl border-y-2 border-r-2 border-platinum  hover:border-bluemana">
                                                Search
                                            </Button>
                                        </div>
                                    </div>
                                </div>
                                {/* <div className="flex space-x-4">
                                    <div className="flex flex-col justify-center items-center text-xl border border-6 border-bluetang rounded-4xl">
                                        <div className="flex justify-between items-end px-4">
                                            <p className={classnames("pb-18 text-[#32CD32] font-semibold", font.className)}>Paid</p>
                                            <div className="flex flex-col items-center">
                                                <DashboardPieChart paid={758.72} remaining={741.28} />
                                                <p className="text-2xl">Deductable Progress</p>
                                            </div>
                                            <p className={classnames("pb-18 font-semibold", font.className)}>Remaining</p>
                                        </div>
                                    </div>
                                    <div className="flex flex-col justify-center items-center px-4 py-3 text-xl border border-6 border-copper rounded-4xl">
                                        <div className="text-deepcove -mb-11 z-3 font-semibold">My Card</div>
                                        <FaRegIdCard size={150} className="text-bronze" />
                                        <div className={classnames("w-full flex justify-evenly items-center space-x-1", font.className)}>
                                            <div className="hover:text-bronze">View</div>
                                            <p>|</p>
                                            <div className="hover:text-bronze">Download</div>
                                        </div>
                                    </div>
                                </div> */}
                            </div>
                            <div className="w-2/5 flex flex-col justify-start items-center px-4 py-3 text-xl border border-6 border-platinum rounded-4xl">
                                <p className="text-3xl underline py-2">Benefits At A Glance</p>
                                <p className={classnames("text-2xl font-semibold py-2", font.className)}>CLASSIC 5K 100/5000</p>
                                <div className={classnames("w-full flex justify-between", font.className)}>
                                    <div className="flex flex-col">
                                        <p>Physician Visit</p>
                                        <p>Specialist Visit</p>
                                        <p>Urgent Care</p>
                                        <p>INN-Ind Ded</p>
                                        <p>INN-Family Ded</p>
                                        <p>OON-Ind Ded</p>
                                        <p>OON-Family Ded</p>
                                        <p>Co-Insurance</p>
                                        <p>INN-Ind OOP</p>
                                        <p>INN-Family OOP</p>
                                        <p>OON-Ind OOP</p>
                                        <p>OON-Family OOP</p>
                                        <p>Emergency Room</p>
                                        <p>Preventive Care</p>
                                    </div>
                                    <div className="flex flex-col">
                                        <p>$25.00</p>
                                        <p>$50.00</p>
                                        <p>$50.00</p>
                                        <p>$5,000</p>
                                        <p>$10,000</p>
                                        <p>$10,000</p>
                                        <p>$20,000</p>
                                        <p>100%/0%</p>
                                        <p>$5,000</p>
                                        <p>$10,000</p>
                                        <p>$10,000</p>
                                        <p>$20,000</p>
                                        <p>Ded & Coin</p> 
                                        <p>100%</p>
                                    </div>
                                </div>

                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
  )
}