import React from 'react';
import { Button, Card, Space, Tag, Timeline, Tooltip, Typography } from 'antd';
import { RollbackOutlined } from '@ant-design/icons';
import type { WorkflowVersion } from '../types';

const { Text } = Typography;

interface Props {
  versions: WorkflowVersion[];
  currentVersion: number | null;
  onSelectVersion: (version: WorkflowVersion) => void;
  onRollback: (version: WorkflowVersion) => void;
}

export function VersionPanel({
  versions,
  currentVersion,
  onSelectVersion,
  onRollback,
}: Props) {
  if (versions.length === 0) {
    return (
      <Card size="small" title="Versions" style={{ width: 260 }}>
        <Text type="secondary">No published versions yet.</Text>
      </Card>
    );
  }

  return (
    <Card
      size="small"
      title="Versions"
      style={{
        width: 260,
        overflowY: 'auto',
        maxHeight: 'calc(100vh - 200px)',
      }}
    >
      <Timeline
        items={versions.map((v) => ({
          color: v.version === currentVersion ? 'blue' : 'gray',
          children: (
            <div
              style={{ cursor: 'pointer' }}
              onClick={() => onSelectVersion(v)}
            >
              <Space direction="vertical" size={2} style={{ width: '100%' }}>
                <Space>
                  <Tag
                    color={v.version === currentVersion ? 'blue' : undefined}
                  >
                    v{v.version}
                  </Tag>
                  {v.version !== currentVersion && (
                    <Tooltip title="Rollback to this version">
                      <Button
                        size="small"
                        type="text"
                        icon={<RollbackOutlined />}
                        onClick={(e) => {
                          e.stopPropagation();
                          onRollback(v);
                        }}
                      />
                    </Tooltip>
                  )}
                </Space>
                <Text type="secondary" style={{ fontSize: 12 }}>
                  {v.changeSummary || v.prompt.slice(0, 50)}
                </Text>
                <Text type="secondary" style={{ fontSize: 11 }}>
                  {new Date(v.createdAt).toLocaleString()}
                </Text>
              </Space>
            </div>
          ),
        }))}
      />
    </Card>
  );
}
