import { useEffect, useState } from 'react';
import { Button } from '~/shared/components/button/Button';
import { Section } from '~/shared/components/section/Section';
import { Table } from '~/shared/components/table';
import type { AerialItem } from '../types/aerial';
import { AerialRegisterModal } from './AerialRegisterModal';

export function AerialList() {
  const [selectedId, setSelectedId] = useState<string | null>(null);
  const [isLoading, setIsLoading] = useState(false);
  const [data, setData] = useState<AerialItem[]>([]);
  const [totalCount, setTotalCount] = useState(0);
  const [isRegisterModalOpen, setIsRegisterModalOpen] = useState(false);

  useEffect(() => {
    const load = async () => {
      setIsLoading(true);
      try {
        // const result = await fetchAerialList('YEAR', strtDttm, endDttm);
        const result = {
          list: [],
          pagination: {
            currentPage: 0,
            pagiSize: 0,
            totalPages: 0,
            totalItems: 0,
          },
        };
        if (result) {
          setData(result.list);
          setTotalCount(result.pagination.totalItems);
        }
      } finally {
        setIsLoading(false);
      }
    };

    load();
  }, []);

  return (
    <>
      <Section className="w-full pb-4" variant="list">
        <div className="flex flex-col h-full p-4 gap-4">
          <h1 className="text-xl font-bold">항공영상관리</h1>

          <Table isLayoutFixed isFullHeight>
            <Table.Caption>
              <Table.CaptionLeft>
                <Table.Total count={totalCount} />
              </Table.CaptionLeft>
              <Table.CaptionRight>
                <div className="flex gap-2">
                  <Button color="primary" onClick={() => setIsRegisterModalOpen(true)}>항공영상 등록</Button>
                </div>
              </Table.CaptionRight>
            </Table.Caption>

            <Table.Container>
              <Table.Colgroup>
                <Table.Col width={60} />
                <Table.Col width={180} />
                <Table.Col width={200} />
                <Table.Col width={120} />
                <Table.Col width={100} />
                <Table.Col width={120} />
                <Table.Col width={80} />
              </Table.Colgroup>

              <Table.Header>
                <Table.HeaderRow>
                  <Table.HeaderCell align="center">No</Table.HeaderCell>
                  <Table.HeaderCell>파일명</Table.HeaderCell>
                  <Table.HeaderCell>지역</Table.HeaderCell>
                  <Table.HeaderCell align="center">촬영일시</Table.HeaderCell>
                  <Table.HeaderCell align="center">축적</Table.HeaderCell>
                  <Table.HeaderCell align="right">용량</Table.HeaderCell>
                  <Table.HeaderCell align="center">전처리</Table.HeaderCell>
                </Table.HeaderRow>
              </Table.Header>

              <Table.Body>
                {isLoading ? (
                  <Table.Loading colSpan={7} />
                ) : data.length === 0 ? (
                  <Table.Empty colSpan={7}>등록된 항공영상이 없습니다.</Table.Empty>
                ) : (
                  data.map((item, index) => (
                    <Table.Row
                      key={item.mapId}
                      isSelected={selectedId === item.mapId}
                      onClick={() => setSelectedId(item.mapId)}
                    >
                      <Table.Cell align="center">{index + 1}</Table.Cell>
                      <Table.Cell>{item.fileName}</Table.Cell>
                      <Table.Cell>{item.region}</Table.Cell>
                      <Table.Cell align="center">{item.capturedDttm}</Table.Cell>
                      <Table.Cell align="center">{item.scale}</Table.Cell>
                      <Table.Cell align="right">{item.fileSize}</Table.Cell>
                      <Table.Cell align="center">
                        {item.status}
                      </Table.Cell>
                    </Table.Row>
                  ))
                )}
              </Table.Body>
            </Table.Container>
          </Table>
        </div>
      </Section>
      {isRegisterModalOpen && <AerialRegisterModal isOpen={isRegisterModalOpen} onClose={() => setIsRegisterModalOpen(false)} />}
    </>
  );
}