import {
  DeleteButton,
  EditButton,
  List,
  ShowButton,
  useTable,
} from "@refinedev/antd";
import type { BaseRecord } from "@refinedev/core";
import { Space, Table, Tag, Button, Tooltip, Typography } from "antd";
import { PlusOutlined, ApiOutlined, ForkOutlined, LockOutlined } from '@ant-design/icons';

const { Title } = Typography;

export const BlueprintList = () => {
  const { tableProps } = useTable({
    syncWithLocation: true,
  });

  return (
    <>
      <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", marginBottom: 16 }}>
        <Title level={4}>Deployment Blueprints</Title>
        <Button type="primary" icon={<PlusOutlined />} href="/blueprints/create">
          Create New Blueprint
        </Button>
      </div>

      <List>
        <Table {...tableProps} rowKey="id">
          <Table.Column dataIndex="id" title="ID" />
          <Table.Column
            dataIndex="name"
            title="Name"
          />
          <Table.Column
            dataIndex="description"
            title="Description"
          />
          <Table.Column
            dataIndex="version"
            title="Version"
          />
          <Table.Column
            title="Components"
            render={(_, record: BaseRecord) => (
              <Tag color="blue">
                {record?.config?.components?.length || 0} Components
              </Tag>
            )}
          />
          <Table.Column
            title="Network Policies"
            render={(_, record: BaseRecord) => (
              <Tag color="purple">
                {record?.config?.networkPolicies?.length || 0} Policies
              </Tag>
            )}
          />
          <Table.Column
            title="Actions"
            dataIndex="actions"
            render={(_, record: BaseRecord) => (
              <Space>
                <Tooltip title="Deploy">
                  <Button 
                    type="primary" 
                    size="small" 
                    icon={<ApiOutlined />}
                    href={`/deployments/create?blueprintId=${record.id}`} 
                  />
                </Tooltip>
                <Tooltip title="Clone">
                  <Button 
                    size="small" 
                    icon={<ForkOutlined />}
                    href={`/blueprints/create?clone=${record.id}`} 
                  />
                </Tooltip>
                <ShowButton hideText size="small" recordItemId={record.id} />
                <EditButton hideText size="small" recordItemId={record.id} />
                <DeleteButton hideText size="small" recordItemId={record.id} />
              </Space>
            )}
          />
        </Table>
      </List>
    </>
  );
};