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

import React from 'react';
import {
  titleColumn,
  statusColumn,
  createdColumn,
  wordCountColumn,
  sectorColumn,
} from '../snippets/columns.snippets';
import Badge from '../../components/ui/badge/Badge';
import { formatRelativeDate } from '../../utils/date';
import { Content } from '../../services/api';
import { FileIcon, MoreDotIcon } from '../../icons';

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

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: { content: any[]; totalCount: number }) => number;
}

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

const getList = (primary?: string[], fallback?: any): string[] => {
  if (primary && primary.length > 0) return primary;
  if (!fallback) return [];
  if (Array.isArray(fallback)) return fallback;
  return [];
};

const renderBadgeList = (items: string[], emptyLabel = '-') => {
  if (!items || items.length === 0) {
    return <span className="text-gray-400 dark:text-gray-500">{emptyLabel}</span>;
  }

  return (
    <div className="flex flex-wrap gap-1">
      {items.map((item, index) => (
        <Badge key={`${item}-${index}`} color="light" size="sm" variant="light">
          {item}
        </Badge>
      ))}
    </div>
  );
};

export const createContentPageConfig = (
  handlers: {
    activeSector: { id: number; name: string } | null;
    searchTerm: string;
    setSearchTerm: (value: string) => void;
    statusFilter: string;
    setStatusFilter: (value: string) => void;
    setCurrentPage: (page: number) => void;
  }
): ContentPageConfig => {
  const showSectorColumn = !handlers.activeSector;

  const statusColors: Record<string, 'warning' | 'info' | 'success' | 'primary'> = {
    draft: 'warning',
    review: 'info',
    publish: 'success',
  };

  return {
    columns: [
      {
        ...titleColumn,
        sortable: true,
        sortField: 'title',
        toggleable: true,
        toggleContentKey: 'html_content',
        toggleContentLabel: 'Generated Content',
        render: (value: string, row: Content) => (
          <div>
            <div className="font-medium text-gray-900 dark:text-white">
              {row.meta_title || row.title || row.task_title || `Task #${row.task_id}`}
            </div>
            {row.meta_description && (
              <div className="mt-1 text-sm text-gray-500 dark:text-gray-400 line-clamp-2">
                {row.meta_description}
              </div>
            )}
          </div>
        ),
      },
      ...(showSectorColumn ? [{
        ...sectorColumn,
        render: (value: string, row: Content) => (
          <Badge color="info" size="sm" variant="light">
            {row.sector_name || '-'}
          </Badge>
        ),
      }] : []),
      {
        key: 'primary_keyword',
        label: 'Primary Keyword',
        sortable: false,
        width: '150px',
        render: (value: string, row: Content) => (
          row.primary_keyword ? (
            <Badge color="info" size="sm" variant="light">
              {row.primary_keyword}
            </Badge>
          ) : (
            <span className="text-gray-400 dark:text-gray-500">-</span>
          )
        ),
      },
      {
        key: 'secondary_keywords',
        label: 'Secondary Keywords',
        sortable: false,
        width: '200px',
        render: (_value: any, row: Content) => {
          const secondaryKeywords = getList(
            row.secondary_keywords,
            row.metadata?.secondary_keywords
          );
          return renderBadgeList(secondaryKeywords);
        },
      },
      {
        key: 'tags',
        label: 'Tags',
        sortable: false,
        width: '150px',
        render: (_value: any, row: Content) => {
          const tags = getList(row.tags, row.metadata?.tags);
          return renderBadgeList(tags);
        },
      },
      {
        key: 'categories',
        label: 'Categories',
        sortable: false,
        width: '150px',
        render: (_value: any, row: Content) => {
          const categories = getList(row.categories, row.metadata?.categories);
          return renderBadgeList(categories);
        },
      },
      {
        ...wordCountColumn,
        sortable: true,
        sortField: 'word_count',
        render: (value: number) => value?.toLocaleString() ?? '-',
      },
      {
        ...statusColumn,
        sortable: true,
        sortField: 'status',
        render: (value: string) => {
          const status = value || 'draft';
          const color = statusColors[status] || 'primary';
          const label = status.replace('_', ' ').replace(/^\w/, (c) => c.toUpperCase());
          return (
            <Badge color={color} size="sm" variant="light">
              {label}
            </Badge>
          );
        },
      },
      {
        ...createdColumn,
        sortable: true,
        sortField: 'generated_at',
        label: 'Generated',
        align: 'right',
        render: (value: string, row: Content) => {
          const hasPrompts = row.has_image_prompts || false;
          const hasImages = row.has_generated_images || false;
          
          return (
            <div className="flex items-center justify-end gap-3 pr-10">
              <span className="text-gray-700 dark:text-gray-300 whitespace-nowrap">
                {formatRelativeDate(value)}
              </span>
              <div className="flex items-center gap-2">
                {/* Prompt Icon */}
                <div
                  className={`w-5 h-5 flex items-center justify-center flex-shrink-0 ${
                    hasPrompts
                      ? 'text-green-500 dark:text-green-400'
                      : 'text-gray-300 dark:text-gray-600'
                  }`}
                  title={hasPrompts ? 'Image prompts generated' : 'No image prompts'}
                >
                  <svg
                    xmlns="http://www.w3.org/2000/svg"
                    viewBox="0 0 24 24"
                    fill="none"
                    stroke="currentColor"
                    strokeWidth="2"
                    strokeLinecap="round"
                    strokeLinejoin="round"
                    className="w-4 h-4"
                  >
                    <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z" />
                    <polyline points="14 2 14 8 20 8" />
                    <line x1="16" y1="13" x2="8" y2="13" />
                    <line x1="16" y1="17" x2="8" y2="17" />
                    <polyline points="10 9 9 9 8 9" />
                  </svg>
                </div>
                
                {/* Image Icon */}
                <div
                  className={`w-5 h-5 flex items-center justify-center flex-shrink-0 ${
                    hasImages
                      ? 'text-green-500 dark:text-green-400'
                      : 'text-gray-300 dark:text-gray-600'
                  }`}
                  title={hasImages ? 'Images generated' : 'No images generated'}
                >
                  <svg
                    xmlns="http://www.w3.org/2000/svg"
                    viewBox="0 0 24 24"
                    fill="none"
                    stroke="currentColor"
                    strokeWidth="2"
                    strokeLinecap="round"
                    strokeLinejoin="round"
                    className="w-4 h-4"
                  >
                    <rect x="3" y="3" width="18" height="18" rx="2" ry="2" />
                    <circle cx="8.5" cy="8.5" r="1.5" />
                    <polyline points="21 15 16 10 5 21" />
                  </svg>
                </div>
              </div>
            </div>
          );
        },
      },
    ],
    filters: [
      {
        key: 'search',
        label: 'Search',
        type: 'text',
        placeholder: 'Search content...',
      },
      {
        key: 'status',
        label: 'Status',
        type: 'select',
        options: [
          { value: '', label: 'All Status' },
          { value: 'draft', label: 'Draft' },
          { value: 'review', label: 'Review' },
          { value: 'publish', label: 'Publish' },
        ],
      },
    ],
    headerMetrics: [
      {
        label: 'Total Content',
        value: 0,
        accentColor: 'blue' as const,
        calculate: (data) => data.totalCount || 0,
      },
      {
        label: 'Draft',
        value: 0,
        accentColor: 'warning' as const,
        calculate: (data) => data.content.filter((c: Content) => c.status === 'draft').length,
      },
      {
        label: 'Review',
        value: 0,
        accentColor: 'info' as const,
        calculate: (data) => data.content.filter((c: Content) => c.status === 'review').length,
      },
      {
        label: 'Published',
        value: 0,
        accentColor: 'success' as const,
        calculate: (data) => data.content.filter((c: Content) => c.status === 'publish').length,
      },
    ],
  };
};