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';

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);

  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="light" size="small">엑셀 다운로드</Button>
                <Button color="primary" size="small">영상 등록</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>
  );
}
