import {
  DeleteOutlined,
  EditOutlined,
  PlusOutlined,
  ReloadOutlined,
} from '@ant-design/icons';
import { Button, Card, Checkbox, Space, Table, theme } from 'antd';

interface CameraTableProps {
  cameraData: MasterModel.Camera[] | null;
  onCreateCamera: () => void;
  onReload?: () => void;
  loading?: boolean;
}

const CameraTable: React.FC<CameraTableProps> = ({
  cameraData,
  onCreateCamera,
  onReload,
  loading = false,
}) => {
  const { token } = theme.useToken();

  const handleReload = () => {
    console.log('Reload cameras');
    onReload?.();
  };

  const handleDelete = () => {
    console.log('Delete selected cameras');
    // TODO: Implement delete functionality
  };

  const handleEdit = (camera: MasterModel.Camera) => {
    console.log('Edit camera:', camera);
    // TODO: Implement edit functionality
  };

  const columns = [
    {
      title: '',
      dataIndex: 'checkbox',
      width: 50,
      render: () => <Checkbox />,
    },
    {
      title: 'Tên',
      dataIndex: 'name',
      key: 'name',
      render: (text: string) => (
        <a style={{ color: token.colorPrimary }}>{text || '-'}</a>
      ),
    },
    {
      title: 'Loại',
      dataIndex: 'cate_id',
      key: 'cate_id',
      render: (text: string) => text || '-',
    },
    {
      title: 'Địa chỉ IP',
      dataIndex: 'ip',
      key: 'ip',
      render: (text: string) => text || '-',
    },
    {
      title: 'Thao tác',
      key: 'action',
      render: (_: any, record: MasterModel.Camera) => (
        <Button
          size="small"
          icon={<EditOutlined />}
          onClick={() => handleEdit(record)}
        />
      ),
    },
  ];

  return (
    <Card bodyStyle={{ padding: 16 }}>
      <Space style={{ marginBottom: 16 }}>
        <Button type="primary" icon={<PlusOutlined />} onClick={onCreateCamera}>
          Tạo mới camera
        </Button>
        <Button icon={<ReloadOutlined />} onClick={handleReload} />
        <Button icon={<DeleteOutlined />} onClick={handleDelete} />
      </Space>

      <Table
        dataSource={cameraData || []}
        columns={columns}
        rowKey="id"
        size="small"
        loading={loading}
        pagination={{
          size: 'small',
          showTotal: (total: number, range: [number, number]) =>
            `Hiển thị ${range[0]}-${range[1]} của ${total} camera`,
          pageSize: 10,
        }}
      />
    </Card>
  );
};

export default CameraTable;
