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 { MdLocationOn } from "react-icons/md";
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="w-31 bg-atmosphere border-b-2 border-copper" />
                <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-[55px] 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 divide-y divide-bluetang">
                    <a href="#" className="w-full h-20 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(
                            "-mb-[34px] text-4xl text-left z-2 text-bluemana font-semibold text-shadow-[1px_1px_0,-1px_1px_0,-1px_-1px_0,1px_-1px_0] text-shadow-deepcove"
                        )}>
                            Robert La'Blah
                        </div>
                        <div className="flex items-center">
                            <div className={classnames(
                                "w-full h-[6px] rounded-s bg-atmosphere z-1 -mr-[20px]"
                                )}>
                            </div>
                            <div className="w-1/24 h-full flex justify-end">
                                <div className="w-[calc(50%+10px)] flex flex-col justify-start z-1 bg-deepcove">
                                    <div className={classnames(
                                        "h-9 -mb-[3px] relative border-b-6 border-r-6 rounded-br-4xl rounded-out-bl-4xl bg-copper border-atmosphere"
                                        )} />
                                    <div className={classnames(
                                        "h-9 -mt-[3px] relative border-t-6 border-r-6 rounded-tr-4xl rounded-out-tl-4xl bg-copper border-atmosphere"
                                        )} />
                                </div>
                            </div>
                        </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={1007.23} remaining={492.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>
                                            <p>|</p>
                                            <Button className="hover:text-bronze">
                                                Download
                                            </Button>
                                        </div>
                                    </div>
                                </div>
                                <div className="flex">
                                    <div className="w-full flex flex-col px-4 py-3 border border-6 border-bluemana rounded-4xl">
                                        <div className="w-full pb-2 flex justify-center text-2xl text-bronze font-semibold">
                                            <p>Find A Provider By...</p>
                                        </div>
                                        <div className="w-full flex px-2">
                                            <div className="w-full flex border-x-2 border-t-2 rounded-t-xl font-semibold divide-x-2 divide-bronze">
                                                <a href="#" className="w-full h-9 flex justify-center items-center rounded-tl-lg bg-bluetang text-platinum">
                                                    Location
                                                </a>
                                                <a href="#" className="w-full h-9 flex justify-center items-center text-platinum hover:text-bronze">
                                                    Procedure
                                                </a>
                                                <a href="#" className="w-full h-9 flex justify-center items-center rounded-tr-lg text-platinum hover:text-bronze">
                                                    Provider/Facility
                                                </a>
                                            </div>
                                        </div>
                                        <div className={classnames("w-full flex items-start px-2 pb-2 text-xl", font.className)}>
                                            {/* <p className='pr-3'><GrMapLocation size={30} /></p> */}
                                            <Button className="h-10 text-deepcove hover:text-atmosphere bg-platinum rounded-bl-xl">
                                                <MdLocationOn size={30} />
                                            </Button>
                                            <LocationSearchInput className="h-10 pl-3 text-bluemana border-y-2 border-platinum" />
                                            <Button className="h-10 pr-3 pl-2 bg-platinum hover:bg-bluemana text-center text-deepcove font-semibold rounded-br-xl border-y-2 border-r-2 border-platinum">
                                                Search
                                            </Button>
                                        </div>
                                        <div className="w-full flex justify-end text-platinum font-semibold">
                                            <Button className="mr-2 underline hover:text-bronze">
                                                View Full Provider List
                                            </Button>
                                        </div>
                                    </div>
                                </div>
                                <div className="flex">
                                    <div className="w-full flex flex-col px-4 py-3 border border-6 border-bronze rounded-4xl space-y-2">
                                        <div className="w-full flex justify-center text-2xl text-atmosphere font-semibold">
                                            <p>Recent Claims</p>
                                        </div>
                                        <div className={classnames("w-full flex flex-col px-2 text-lg", font.className)}>
                                            <div className="flex">
                                                <div className="w-1/6">
                                                    <Button className="hover:text-bronze text-bluemana">
                                                        2907457
                                                    </Button>
                                                </div>
                                                <div className="w-2/6">
                                                    LA'BLAH, ROBERT 
                                                </div>
                                                <div className="w-2/6">
                                                    HOUSE, GREGORY
                                                </div>
                                                <div className="w-1/6">
                                                    07/21/2025
                                                </div>
                                            </div>
                                            <div className="flex">
                                                <div className="w-1/6">
                                                    <Button className="hover:text-bronze text-bluemana">
                                                        2907201
                                                    </Button>
                                                </div>
                                                <div className="w-2/6">
                                                    LA'BLAH, ROBERT 
                                                </div>
                                                <div className="w-2/6">
                                                    QUINN, MICHAELA
                                                </div>
                                                <div className="w-1/6">
                                                    07/02/2025
                                                </div>
                                            </div>
                                            <div className="flex">
                                                <div className="w-1/6">
                                                    <Button className="hover:text-bronze text-bluemana">
                                                        2905891
                                                    </Button>
                                                </div>
                                                <div className="w-2/6">
                                                    LA'BLAH, JENNY
                                                </div>
                                                <div className="w-2/6">
                                                    HOWSER, DOGGIE
                                                </div>
                                                <div className="w-1/6">
                                                    05/15/2025
                                                </div>
                                            </div>
                                            <div className="flex">
                                                <div className="w-1/6">
                                                    <Button className="hover:text-bronze text-bluemana">
                                                        2905547
                                                    </Button>
                                                </div>
                                                <div className="w-2/6">
                                                    LA'BLAH, ROBERT 
                                                </div>
                                                <div className="w-2/6">
                                                    HOUSE, GREGORY
                                                </div>
                                                <div className="w-1/6">
                                                    04/29/2025
                                                </div>
                                            </div>
                                        </div>
                                        <div className="w-full flex justify-end text-platinum font-semibold">
                                            <Button className="mr-2 underline hover:text-bronze">
                                                View All Claims
                                            </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>
  )
}