import { createAction, Property } from '@activepieces/pieces-framework';
import { chartlyAuth } from '../common/auth';

export const createChartAction = createAction({
  auth: chartlyAuth,
  name: 'create_chart',
  displayName: 'Create Chart',
  description: 'Generates a chart image based on the provided data, configuration, and chart type',
  audience: 'both',
  aiMetadata: { description: 'Renders a Chart.js configuration into a PNG or SVG image via the Chartly API and returns it as a base64 data URL. Build the chart from the simple props (chart type, labels, dataset values, colors, dimensions) or, for full control, pass a complete Chart.js config JSON in the advanced config prop, which overrides the simple settings. Use when an agent needs to produce a chart visualization from numeric data. Each call creates a new cached chart on Chartly, so it is not idempotent.', idempotent: false },
  props: {
    chart_type: Property.StaticDropdown({
      displayName: 'Chart Type',
      description: 'Type of chart to generate',
      required: true,
      options: {
        options: [
          { label: 'Bar Chart', value: 'bar' },
          { label: 'Line Chart', value: 'line' },
          { label: 'Pie Chart', value: 'pie' },
          { label: 'Doughnut Chart', value: 'doughnut' },
          { label: 'Radar Chart', value: 'radar' },
          { label: 'Polar Area Chart', value: 'polarArea' },
          { label: 'Scatter Chart', value: 'scatter' },
          { label: 'Bubble Chart', value: 'bubble' },
        ],
      },
      defaultValue: 'bar',
    }),
    chart_title: Property.ShortText({
      displayName: 'Chart Title',
      description: 'Title for the chart',
      required: false,
    }),
    labels: Property.Array({
      displayName: 'Labels',
      description: 'Labels for the data points (e.g., ["Jan", "Feb", "Mar"])',
      required: true,
    }),
    dataset_label: Property.ShortText({
      displayName: 'Dataset Label',
      description: 'Label for the data series',
      required: true,
      defaultValue: 'Data',
    }),
    data_values: Property.Array({
      displayName: 'Data Values',
      description: 'Numeric values for the chart (e.g., [10, 20, 30])',
      required: true,
    }),
    background_color: Property.ShortText({
      displayName: 'Background Color',
      description: 'Background color for data points (e.g., "rgba(54, 162, 235, 0.8)" or "#36A2EB")',
      required: false,
      defaultValue: 'rgba(54, 162, 235, 0.8)',
    }),
    width: Property.Number({
      displayName: 'Width',
      description: 'Image width in pixels (1-2000)',
      required: true,
      defaultValue: 600,
    }),
    height: Property.Number({
      displayName: 'Height',
      description: 'Image height in pixels (1-2000)',
      required: true,
      defaultValue: 400,
    }),
    format: Property.StaticDropdown({
      displayName: 'Format',
      description: 'Output format for the chart image',
      required: true,
      options: {
        options: [
          { label: 'PNG', value: 'png' },
          { label: 'SVG', value: 'svg' },
        ],
      },
      defaultValue: 'png',
    }),
    background_color_image: Property.ShortText({
      displayName: 'Image Background Color',
      description: 'Background color for the image (e.g., "white", "transparent", "#FFFFFF")',
      required: false,
      defaultValue: 'white',
    }),
    advanced_config: Property.LongText({
      displayName: 'Advanced Chart.js Configuration',
      description: 'Complete Chart.js configuration as JSON (overrides other settings)',
      required: false,
    }),
  },
  async run(context) {
    const {
      chart_type,
      chart_title,
      labels,
      dataset_label,
      data_values,
      background_color,
      width,
      height,
      format,
      background_color_image,
      advanced_config,
    } = context.propsValue;

    let chartConfig: any;

    if (advanced_config) {
      try {
        chartConfig = JSON.parse(advanced_config);
      } catch (error) {
        throw new Error('Invalid JSON in advanced configuration');
      }
    } else {
      chartConfig = {
        type: chart_type,
        data: {
          labels: labels,
          datasets: [{
            label: dataset_label,
            data: data_values,
            backgroundColor: background_color,
          }],
        },
        options: {
          responsive: false,
        },
      };

      if (chart_title) {
        chartConfig.options.plugins = {
          title: {
            display: true,
            text: chart_title,
          },
        };
      }
    }

    const requestBody: any = {
      chart: chartConfig,
      width,
      height,
      format,
    };

    if (background_color_image) {
      requestBody.backgroundColor = background_color_image;
    }

    const response = await fetch('https://api.chartly.dev/v1/chart', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
        'X-Api-Key': context.auth.secret_text,
      },
      body: JSON.stringify(requestBody),
    });

    if (!response.ok) {
      const errorText = await response.text();
      throw new Error(`Chartly API error: ${response.status} ${response.statusText} - ${errorText}`);
    }

    // Get the image data as base64
    const imageBuffer = await response.arrayBuffer();
    const base64Image = Buffer.from(imageBuffer).toString('base64');
    const dataUrl = `data:image/${format};base64,${base64Image}`;

    return {
      success: true,
      chart_url: dataUrl,
      format,
      width,
      height,
      chart_config: chartConfig,
    };
  },
});
