import React from 'react';
import { Show } from "@refinedev/antd";
import { useShow, useOne } from "@refinedev/core";
import { Card, Descriptions, Tag, Typography } from 'antd';
import { RefreshButton, DateField } from '@refinedev/antd';

const { Title } = Typography;

export const DeploymentShow = () => {
  const { queryResult } = useShow();
  const { data, isLoading } = queryResult;
  const record = data?.data;

  const { data: clientData, isLoading: clientIsLoading } = useOne({
    resource: "clients",
    id: record?.clientId || "",
    queryOptions: {
      enabled: !!record?.clientId,
    },
  });

  const { data: appData, isLoading: appIsLoading } = useOne({
    resource: "apps",
    id: record?.appId || "",
    queryOptions: {
      enabled: !!record?.appId,
    },
  });

  const getEnvironmentColor = (environment: string) => {
    const colorMap: Record<string, string> = {
      dev: 'green',
      preprod: 'orange',
      prod: 'red',
    };
    return colorMap[environment] || 'default';
  };

  return (
    <Show
      isLoading={isLoading}
      headerButtons={[<RefreshButton />]}
    >
      <Title level={4}>Deployment Details</Title>

      <Card>
        <Descriptions column={2} bordered>
          <Descriptions.Item label="App" span={2}>
            {appIsLoading ? (
              "Loading..."
            ) : (
              <a href={`/apps/show/${record?.appId}`}>
                {appData?.data?.name || `App ${record?.appId}`}
              </a>
            )}
          </Descriptions.Item>
          
          <Descriptions.Item label="Environment">
            <Tag color={getEnvironmentColor(record?.environment)}>
              {record?.environment?.toUpperCase()}
            </Tag>
          </Descriptions.Item>
          
          <Descriptions.Item label="Version">
            <Tag color="blue">{record?.version}</Tag>
          </Descriptions.Item>
          
          <Descriptions.Item label="Client" span={2}>
            {clientIsLoading ? (
              "Loading..."
            ) : (
              <a href={`/clients/show/${record?.clientId}`}>
                {clientData?.data?.name || `Client ${record?.clientId}`}
              </a>
            )}
          </Descriptions.Item>
          
          <Descriptions.Item label="Created">
            <DateField value={record?.createdAt} />
          </Descriptions.Item>
          
          <Descriptions.Item label="Updated">
            <DateField value={record?.updatedAt} />
          </Descriptions.Item>
        </Descriptions>
      </Card>
    </Show>
  );
};