'use client'
import Modal from "@/app/components/Modal";
import { useEffect, useState } from "react";

export default function Page() {
  const [noticeList, setNoticeList] = useState<{
    id: string;
    title: string;
    is_approved: boolean;
    createdAt: Date;
  }[]>([]);
  const [isreqmodal, setIsreqmodal] = useState(false);

  const [isAdmin, setIsAdmin] = useState(true);

  useEffect(() => {
    setNoticeList([
      {
        id: '1',
        title: '8월 정산 요청',
        is_approved: false,
        createdAt: new Date(),
      },
      {
        id: '2',
        title: '7월 정산 요청',
        is_approved: false,
        createdAt: new Date(),
      },
      {
        id: '3',
        title: '6월 정산 요청',
        is_approved: true,
        createdAt: new Date(),
      },
    ]);
  }, []);
  return (
    <div className="bg-white h-full">
      {isAdmin && (
        <div className="w-full flex flex-row justify-end items-center px-4   max-w-[800px] mx-auto">
          <div 
            className="w-[86px] h-[36px] border-1 border-[#d5d5d5] bg-[#f94b37] text-white font-semibold rounded-lg flex items-center justify-center my-4 hover:bg-[#d73b29] cursor-pointer"
            onClick={() => setIsreqmodal(true)}
          >
            정산요청
          </div>
        </div>
      )}
      <div className="h-[calc(100%-80px)] min-w-[500px] max-w-[800px] mx-auto overflow-y-auto p-4 flex flex-col">
        {noticeList.map((notice) => (
          <div key={notice.id} className="w-full h-[75px] border-[#d5d5d5] border-1 rounded-lg p-4 my-2 flex flex-row justify-between  hover:border-[#F94B37] cursor-pointer">

            <div className="flex flex-col justify-between">
              <div className="flex flex-row justify-start ">
                <div className="mr-2 flex items-center justify-center">
                  {!notice.is_approved && ( <div className="w-[40px] h-[20px] bg-[#FEDBD7] text-[#F94B37] font-semibold text-xs rounded-md text-center flex items-center justify-center">미정산</div>
                  )}
                  {notice.is_approved && ( <div className="w-[50px] h-[20px] bg-[#d5d5d5] text-black font-semibold text-xs rounded-md text-center flex items-center justify-center">정산완료</div>
                  )}

                </div>
                <div className="text-normal font-semibold flex justify-center items-center truncate overflow-hidden"> {notice.title} </div>
              </div>

              <div className="text-xs text-[#848484]">
                {notice.createdAt.toLocaleString('ko-KR', { year: 'numeric', month: '2-digit', day: '2-digit', hour: '2-digit', minute: '2-digit', hour12: false })}
              </div>
            </div>

            <div className="flex items-center justify-center">
              <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M7.5 15L12.5 10L7.5 5" stroke="#848484" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
              </svg>
            </div>
          </div>
        ))}
      </div>
      <Modal isOpen={isreqmodal} onClose={() => setIsreqmodal(false)}>
        <div className=" w-full h-full flex flex-col justify-between">

          <div className="flex flex-row justify-between items-center">
            <div className="text-3xl font-semibold">정산요청</div>
            <div className="text-3xl cursor-pointer" onClick={() => setIsreqmodal(false)}>
              <svg width="18" height="17" viewBox="0 0 18 17" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path fillRule="evenodd" clipRule="evenodd" d="M0.951569 0.451569C1.4202 -0.0170597 2.18 -0.0170597 2.64863 0.451569L9.0001 6.80304L15.3516 0.451569C15.8202 -0.0170597 16.58 -0.0170597 17.0486 0.451569C17.5173 0.920199 17.5173 1.68 17.0486 2.14863L10.6972 8.5001L17.0486 14.8516C17.5173 15.3202 17.5173 16.08 17.0486 16.5486C16.58 17.0173 15.8202 17.0173 15.3516 16.5486L9.0001 10.1972L2.64863 16.5486C2.18 17.0173 1.4202 17.0173 0.951569 16.5486C0.48294 16.08 0.48294 15.3202 0.951569 14.8516L7.30304 8.5001L0.951569 2.14863C0.48294 1.68 0.48294 0.920199 0.951569 0.451569Z" fill="#848484" />
              </svg>
            </div>
          </div>

          <div className="flex flex-col justify-between h-[287px]">
            <div className="flex flex-col justify-between">
              <div className="text-lg font-semibold text-black">총 미정산 수익</div>
              <div className="w-[428px] h-[56px] border-[#d5d5d5] border-1 bg-white  text-black font-bold rounded-lg flex items-center justify-center text-xl">
                000,000,000원
              </div>
            </div>
            <div className="flex flex-col justify-between">
              <div className="text-lg font-semibold text-black">정산 요청 금액</div>
              <div className="w-[428px] h-[56px] border-[#d5d5d5] border-1 bg-white  text-black font-bold rounded-lg flex items-center justify-center text-xl">
                000,000,000원
              </div>
            </div>
            <div className="flex flex-col justify-between">
              <div className="text-lg font-semibold text-black">정산 요청 채널</div>
              <div className="w-[428px] h-[56px] border-[#d5d5d5] border-1 bg-white  text-black font-normal rounded-lg flex items-center justify-starttext-xl p-5">
                @ 채널명 포함 3개 채널
              </div>
            </div>

          </div>

          <div>
            <div className="w-[428px] h-[56px] border-[#D73B29] bg-[#F94B37] text-white font-bold rounded-lg flex items-center justify-center text-xl cursor-pointer" onClick={() => setIsreqmodal(false)}>
              요청 하기
            </div>
          </div>
        </div>

      </Modal>
    </div>
  );
}