/**
 * Images Page Configuration
 * Centralized config for Images page table, filters, and actions
 */

import React from 'react';
import {
  titleColumn,
  statusColumn,
  createdColumn,
} from '../snippets/columns.snippets';
import Badge from '../../components/ui/badge/Badge';
import { formatRelativeDate } from '../../utils/date';
import { TaskImage } from '../../services/api';

export interface ColumnConfig {
  key: string;
  label: string;
  sortable?: boolean;
  sortField?: string;
  align?: 'left' | 'center' | 'right';
  width?: string;
  render?: (value: any, row: any) => React.ReactNode;
}

export interface FilterConfig {
  key: string;
  label: string;
  type: 'text' | 'select';
  placeholder?: string;
  options?: Array<{ value: string; label: string }>;
}

export interface HeaderMetricConfig {
  label: string;
  value: number;
  accentColor: 'blue' | 'green' | 'amber' | 'purple';
  calculate: (data: { images: any[]; totalCount: number }) => number;
}

export interface ImagesPageConfig {
  columns: ColumnConfig[];
  filters: FilterConfig[];
  headerMetrics: HeaderMetricConfig[];
}

export const createImagesPageConfig = (
  handlers: {
    searchTerm: string;
    setSearchTerm: (value: string) => void;
    imageTypeFilter: string;
    setImageTypeFilter: (value: string) => void;
    statusFilter: string;
    setStatusFilter: (value: string) => void;
    setCurrentPage: (page: number) => void;
  }
): ImagesPageConfig => {
  return {
    columns: [
      {
        key: 'task_title',
        label: 'Task',
        sortable: false,
        width: '250px',
        render: (_value: string, row: TaskImage) => (
          <span className="font-medium text-gray-800 dark:text-white/90">
            {row.task_title || '-'}
          </span>
        ),
      },
      {
        key: 'image_type',
        label: 'Image Type',
        sortable: false,
        width: '150px',
        render: (value: string) => (
          <Badge color="info" size="sm" variant="light">
            {value?.replace('_', ' ') || '-'}
          </Badge>
        ),
      },
      {
        key: 'image_url',
        label: 'Image',
        sortable: false,
        width: '200px',
        render: (value: string) => {
          if (!value) return <span className="text-gray-400">-</span>;
          return (
            <a
              href={value}
              target="_blank"
              rel="noopener noreferrer"
              className="text-brand-500 hover:text-brand-600 text-sm truncate block max-w-[200px]"
            >
              View Image
            </a>
          );
        },
      },
      {
        ...statusColumn,
        sortable: true,
        sortField: 'status',
        render: (value: string) => {
          const statusColors: Record<string, 'success' | 'warning' | 'error'> = {
            'pending': 'warning',
            'generated': 'success',
            'failed': 'error',
          };
          return (
            <Badge
              color={statusColors[value] || 'warning'}
              size="sm"
            >
              {value}
            </Badge>
          );
        },
      },
      {
        key: 'position',
        label: 'Position',
        sortable: false,
        width: '100px',
        render: (value: number) => value || 0,
      },
      {
        ...createdColumn,
        sortable: true,
        sortField: 'created_at',
        render: (value: string) => formatRelativeDate(value),
      },
    ],
    filters: [
      {
        key: 'search',
        label: 'Search',
        type: 'text',
        placeholder: 'Search by task title...',
      },
      {
        key: 'image_type',
        label: 'Image Type',
        type: 'select',
        options: [
          { value: '', label: 'All Types' },
          { value: 'featured', label: 'Featured Image' },
          { value: 'desktop', label: 'Desktop Image' },
          { value: 'mobile', label: 'Mobile Image' },
          { value: 'in_article', label: 'In-Article Image' },
        ],
      },
      {
        key: 'status',
        label: 'Status',
        type: 'select',
        options: [
          { value: '', label: 'All Status' },
          { value: 'pending', label: 'Pending' },
          { value: 'generated', label: 'Generated' },
          { value: 'failed', label: 'Failed' },
        ],
      },
    ],
    headerMetrics: [
      {
        label: 'Total Images',
        value: 0,
        accentColor: 'blue' as const,
        calculate: (data) => data.totalCount || 0,
      },
      {
        label: 'Generated',
        value: 0,
        accentColor: 'green' as const,
        calculate: (data) => data.images.filter((i: TaskImage) => i.status === 'generated').length,
      },
      {
        label: 'Pending',
        value: 0,
        accentColor: 'amber' as const,
        calculate: (data) => data.images.filter((i: TaskImage) => i.status === 'pending').length,
      },
      {
        label: 'Failed',
        value: 0,
        accentColor: 'error' as const,
        calculate: (data) => data.images.filter((i: TaskImage) => i.status === 'failed').length,
      },
    ],
  };
};

