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

const statusColors: Record<string, string> = {
  대기: 'text-dabeeo-gray-99',
  처리중: 'text-primary',
  완료: 'text-dabeeo-navy-tertiary',
  실패: 'text-red-500',
};

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">파일크기(MB)</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">
                      <span className={statusColors[item.status] ?? 'text-dabeeo-gray-99'}>
                        {item.status}
                      </span>
                    </Table.Cell>
                  </Table.Row>
                ))
              )}
            </Table.Body>
          </Table.Container>
        </Table>
      </div>
    </Section>
  );
}
