/**
 * Keywords Page Configuration
 * Centralized config for Keywords page table, filters, and actions
 * 
 * This config is fully dynamic - all columns, filters, actions, and form fields
 * are defined here instead of inline in the component.
 */

import React from 'react';
import {
  keywordColumn,
  volumeColumn,
  difficultyColumn,
  intentColumn,
  clusterColumn,
  sectorColumn,
  statusColumn,
  createdColumn,
} from '../snippets/columns.snippets';
// Icons removed - bulkActions and rowActions are now in table-actions.config.tsx
import Badge from '../../components/ui/badge/Badge';
import { getDifficultyNumber, getDifficultyOptions, getDifficultyValueFromNumber } from '../../utils/difficulty';
import { formatRelativeDate } from '../../utils/date';
import { Keyword } from '../../services/api';
import Input from '../../components/form/input/InputField';
import Label from '../../components/form/Label';
import Button from '../../components/ui/button/Button';
// SelectDropdown not used directly in config - removed

// Type definitions
export interface ColumnConfig {
  key: string;
  label: string;
  sortable?: boolean;
  sortField?: string;
  align?: 'left' | 'center' | 'right';
  width?: string;
  render?: (value: any, row: any) => React.ReactNode;
  defaultVisible?: boolean; // Whether column is visible by default (default: true)
}

// BulkActionConfig and RowActionConfig are now in table-actions.config.tsx

export interface FormFieldConfig {
  key: string;
  label: string;
  type: 'text' | 'number' | 'select';
  placeholder?: string;
  required?: boolean;
  min?: number;
  max?: number;
  className?: string;
  options?: Array<{ value: string; label: string }>;
  value: any; // Required for FormModal
  onChange: (value: any) => void; // Required for FormModal
}

export interface FilterConfig {
  key: string;
  label: string;
  type: 'text' | 'select' | 'daterange' | 'range' | 'custom';
  placeholder?: string;
  options?: Array<{ value: string; label: string }>;
  min?: number;
  max?: number;
  step?: number;
  className?: string;
  customRender?: () => React.ReactNode; // For complex custom filters like volume range
  dynamicOptions?: string; // e.g., 'clusters' - flag for dynamic option loading
}

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

export interface KeywordsPageConfig {
  columns: ColumnConfig[];
  filters: FilterConfig[];
  // bulkActions and rowActions are now global - defined in table-actions.config.tsx
  formFields: (clusters: Array<{ id: number; name: string }>) => FormFieldConfig[];
  headerMetrics: HeaderMetricConfig[];
  exportConfig: {
    endpoint: string;
    filename: string;
    formats: Array<'csv' | 'json'>;
  };
  importConfig: {
    endpoint: string;
    acceptedFormats: string[];
    maxFileSize: number;
  };
}

/**
 * Factory function to create keywords page config
 * Accepts handlers/closures from component for actions that need them
 */
export const createKeywordsPageConfig = (
  handlers: {
    clusters: Array<{ id: number; name: string }>;
    activeSector: { id: number; name: string } | null;
    availableSeedKeywords: Array<{ id: number; keyword: string; volume: number; difficulty: number; intent: string }>;
    formData: {
      seed_keyword_id: number;
      volume_override?: number | null;
      difficulty_override?: number | null;
      cluster_id?: number | null;
      status: string;
    };
    setFormData: React.Dispatch<React.SetStateAction<any>>;
    // Filter state handlers
    searchTerm: string;
    setSearchTerm: (value: string) => void;
    statusFilter: string;
    setStatusFilter: (value: string) => void;
    intentFilter: string;
    setIntentFilter: (value: string) => void;
    difficultyFilter: string;
    setDifficultyFilter: (value: string) => void;
    clusterFilter: string;
    setClusterFilter: (value: string) => void;
    volumeMin: number | '';
    volumeMax: number | '';
    setVolumeMin: (value: number | '') => void;
    setVolumeMax: (value: number | '') => void;
    isVolumeDropdownOpen: boolean;
    setIsVolumeDropdownOpen: (value: boolean) => void;
    tempVolumeMin: number | '';
    tempVolumeMax: number | '';
    setTempVolumeMin: (value: number | '') => void;
    setTempVolumeMax: (value: number | '') => void;
    volumeButtonRef: React.RefObject<HTMLButtonElement | null>;
    volumeDropdownRef: React.RefObject<HTMLDivElement | null>;
    setCurrentPage: (page: number) => void;
    loadKeywords: () => Promise<void>;
  }
): KeywordsPageConfig => {
  const showSectorColumn = !handlers.activeSector; // Show when viewing all sectors
  
  return {
    columns: [
      {
        ...keywordColumn,
        sortable: true,
        sortField: 'keyword',
      },
      // Sector column - only show when viewing all sectors
      ...(showSectorColumn ? [{
        ...sectorColumn,
        render: (value: string, row: Keyword) => (
          <Badge color="info" size="sm" variant="light">
            {row.sector_name || '-'}
          </Badge>
        ),
      }] : []),
      {
        ...volumeColumn,
        sortable: true,
        sortField: 'volume',
        render: (value: number) => value.toLocaleString(),
      },
      {
        ...clusterColumn,
        sortable: true,
        sortField: 'cluster_id',
        render: (_value: string, row: Keyword) => row.cluster_name || '-',
      },
      {
        ...difficultyColumn,
        sortable: true,
        sortField: 'difficulty',
        align: 'center' as const,
        render: (value: number) => {
          const difficultyNum = getDifficultyNumber(value);
          const difficultyBadgeVariant = 'light';
          const difficultyBadgeColor =
            typeof difficultyNum === 'number' && difficultyNum === 1
              ? 'success'
              : typeof difficultyNum === 'number' && difficultyNum === 2
              ? 'success'
              : typeof difficultyNum === 'number' && difficultyNum === 3
              ? 'warning'
              : typeof difficultyNum === 'number' && difficultyNum === 4
              ? 'error'
              : typeof difficultyNum === 'number' && difficultyNum === 5
              ? 'error'
              : 'light';
          return typeof difficultyNum === 'number' ? (
            <Badge
              color={difficultyBadgeColor}
              variant={difficultyBadgeVariant}
              size="sm"
            >
              {difficultyNum}
            </Badge>
          ) : (
            difficultyNum
          );
        },
      },
      {
        ...intentColumn,
        sortable: true,
        sortField: 'intent',
        render: (value: string) => {
          // Map intent values to badge colors
          // Transactional and Commercial → success (green, like active)
          // Navigational → warning (amber/yellow, like pending)
          // Informational → info (blue)
          const getIntentColor = (intent: string) => {
            const lowerIntent = intent?.toLowerCase() || '';
            if (lowerIntent === 'transactional' || lowerIntent === 'commercial') {
              return 'success'; // Green, like active status
            } else if (lowerIntent === 'navigational') {
              return 'warning'; // Amber/yellow, like pending status
            }
            return 'info'; // Blue for informational or default
          };

          return (
            <Badge
              color={getIntentColor(value)}
              size="sm"
              variant={value?.toLowerCase() === 'informational' ? 'light' : undefined}
            >
              {value}
            </Badge>
          );
        },
      },
      {
        ...statusColumn,
        sortable: true,
        sortField: 'status',
        render: (value: string) => {
          return (
            <Badge
              color={
                value === 'active'
                  ? 'success'
                  : value === 'pending'
                  ? 'warning'
                  : 'error'
              }
              size="sm"
            >
              {value}
            </Badge>
          );
        },
      },
      {
        ...createdColumn,
        sortable: true,
        sortField: 'created_at',
        render: (value: string) => formatRelativeDate(value),
      },
      // Optional columns - hidden by default
      {
        key: 'updated_at',
        label: 'Updated',
        sortable: true,
        sortField: 'updated_at',
        defaultVisible: false,
        render: (value: string) => formatRelativeDate(value),
      },
      {
        key: 'volume_override',
        label: 'Volume Override',
        sortable: true,
        sortField: 'volume_override',
        defaultVisible: false,
        render: (value: number | null) => value ? value.toLocaleString() : '-',
      },
      {
        key: 'difficulty_override',
        label: 'Difficulty Override',
        sortable: true,
        sortField: 'difficulty_override',
        defaultVisible: false,
        align: 'center' as const,
        render: (value: number | null) => {
          if (value === null || value === undefined) return '-';
          const difficultyNum = getDifficultyNumber(value);
          return typeof difficultyNum === 'number' ? (
            <Badge
              color={
                difficultyNum === 1 || difficultyNum === 2
                  ? 'success'
                  : difficultyNum === 3
                  ? 'warning'
                  : 'error'
              }
              variant={difficultyNum === 5 ? 'solid' : 'light'}
              size="sm"
            >
              {difficultyNum}
            </Badge>
          ) : (
            difficultyNum
          );
        },
      },
    ],
    filters: [
      {
        key: 'search',
        label: 'Search',
        type: 'text',
        placeholder: 'Search keywords...',
      },
      {
        key: 'status',
        label: 'Status',
        type: 'select',
        options: [
          { value: '', label: 'All Status' },
          { value: 'active', label: 'Active' },
          { value: 'pending', label: 'Pending' },
          { value: 'archived', label: 'Archived' },
        ],
      },
      {
        key: 'intent',
        label: 'Intent',
        type: 'select',
        options: [
          { value: '', label: 'All Intent' },
          { value: 'informational', label: 'Informational' },
          { value: 'navigational', label: 'Navigational' },
          { value: 'transactional', label: 'Transactional' },
          { value: 'commercial', label: 'Commercial' },
        ],
      },
      {
        key: 'difficulty',
        label: 'Difficulty',
        type: 'select',
        options: [
          { value: '', label: 'All Difficulty' },
          { value: '1', label: '1 - Very Easy' },
          { value: '2', label: '2 - Easy' },
          { value: '3', label: '3 - Medium' },
          { value: '4', label: '4 - Hard' },
          { value: '5', label: '5 - Very Hard' },
        ],
      },
      {
        key: 'volume',
        label: 'Volume Range',
        type: 'custom',
        customRender: () => (
          <div className="relative flex-1 min-w-[140px]">
            <button
              ref={handlers.volumeButtonRef}
              type="button"
              onClick={() => {
                handlers.setIsVolumeDropdownOpen(!handlers.isVolumeDropdownOpen);
                handlers.setTempVolumeMin(handlers.volumeMin);
                handlers.setTempVolumeMax(handlers.volumeMax);
              }}
              className={`igny8-select-styled h-9 w-full appearance-none rounded-lg border border-gray-300 bg-transparent px-3 py-2 pr-10 text-sm shadow-theme-xs focus:border-brand-300 focus:outline-hidden focus:ring-3 focus:ring-brand-500/10 dark:border-gray-700 dark:bg-gray-900 dark:focus:border-brand-800 ${
                handlers.volumeMin || handlers.volumeMax
                  ? "text-gray-800 dark:text-white/90"
                  : "text-gray-400 dark:text-gray-400"
              } ${
                handlers.isVolumeDropdownOpen
                  ? "border-brand-300 ring-3 ring-brand-500/10 dark:border-brand-800"
                  : ""
              }`}
            >
              <span className="block text-left truncate">
                {handlers.volumeMin || handlers.volumeMax
                  ? `Vol: ${handlers.volumeMin || 'Min'} - ${handlers.volumeMax || 'Max'}`
                  : 'Volume Range'}
              </span>
              <span className="absolute inset-y-0 right-0 flex items-center pr-3 pointer-events-none">
                <svg
                  className="h-4 w-4 text-gray-400"
                  fill="none"
                  viewBox="0 0 24 24"
                  stroke="currentColor"
                >
                  <path
                    strokeLinecap="round"
                    strokeLinejoin="round"
                    strokeWidth={2}
                    d="M19 9l-7 7-7-7"
                  />
                </svg>
              </span>
            </button>

            {/* Dropdown Menu */}
            {handlers.isVolumeDropdownOpen && (
              <div
                ref={handlers.volumeDropdownRef}
                className="absolute z-50 left-0 right-0 mt-1 rounded-lg border border-gray-200 bg-white shadow-theme-lg dark:border-gray-800 dark:bg-gray-dark overflow-hidden p-4 min-w-[280px]"
              >
                <div className="space-y-3">
                  <div>
                    <Label htmlFor="vol-min" className="text-xs mb-1">Min Volume</Label>
                    <Input
                      id="vol-min"
                      type="number"
                      placeholder="Min"
                      value={handlers.tempVolumeMin}
                      onChange={(e) => {
                        const val = e.target.value;
                        handlers.setTempVolumeMin(val === '' ? '' : parseInt(val) || '');
                      }}
                      className="w-full h-9"
                    />
                  </div>
                  <div>
                    <Label htmlFor="vol-max" className="text-xs mb-1">Max Volume</Label>
                    <Input
                      id="vol-max"
                      type="number"
                      placeholder="Max"
                      value={handlers.tempVolumeMax}
                      onChange={(e) => {
                        const val = e.target.value;
                        handlers.setTempVolumeMax(val === '' ? '' : parseInt(val) || '');
                      }}
                      className="w-full h-9"
                    />
                  </div>
                  <div className="flex gap-2 pt-2">
                    <Button
                      size="sm"
                      variant="primary"
                      onClick={async () => {
                        const newMin = handlers.tempVolumeMin === '' ? '' : Number(handlers.tempVolumeMin);
                        const newMax = handlers.tempVolumeMax === '' ? '' : Number(handlers.tempVolumeMax);
                        handlers.setIsVolumeDropdownOpen(false);
                        handlers.setVolumeMin(newMin);
                        handlers.setVolumeMax(newMax);
                        handlers.setCurrentPage(1);
                        setTimeout(() => {
                          handlers.loadKeywords();
                        }, 0);
                      }}
                      className="flex-1"
                    >
                      OK
                    </Button>
                    <Button
                      size="sm"
                      variant="secondary"
                      onClick={() => {
                        handlers.setIsVolumeDropdownOpen(false);
                        handlers.setTempVolumeMin(handlers.volumeMin);
                        handlers.setTempVolumeMax(handlers.volumeMax);
                      }}
                      className="flex-1"
                    >
                      Cancel
                    </Button>
                  </div>
                </div>
              </div>
            )}
          </div>
        ),
      },
      {
        key: 'cluster_id',
        label: 'Cluster',
        type: 'select',
        options: (() => {
          // Dynamically generate options from current clusters
          return [
            { value: '', label: 'All Clusters' },
            ...handlers.clusters.map((c) => ({ value: c.id.toString(), label: c.name })),
          ];
        })(),
        className: 'w-40',
      },
    ],
    headerMetrics: [
      {
        label: 'Total Keywords',
        value: 0,
        accentColor: 'blue' as const,
        calculate: (data) => data.totalCount || 0,
      },
      {
        label: 'Mapped',
        value: 0,
        accentColor: 'green' as const,
        calculate: (data) => data.keywords.filter((k: Keyword) => k.cluster_id).length,
      },
      {
        label: 'Unmapped',
        value: 0,
        accentColor: 'amber' as const,
        calculate: (data) => data.keywords.filter((k: Keyword) => !k.cluster_id).length,
      },
      {
        label: 'Total Volume',
        value: 0,
        accentColor: 'purple' as const,
        calculate: (data) => data.keywords.reduce((sum: number, k: Keyword) => sum + (k.volume || 0), 0),
      },
    ],
    // bulkActions and rowActions are now global - defined in table-actions.config.ts
    // They're automatically loaded by TablePageTemplate based on the current route
    formFields: (clusters: Array<{ id: number; name: string }>) => [
      {
        key: 'seed_keyword_id',
        label: 'Seed Keyword',
        type: 'select',
        placeholder: 'Select a seed keyword',
        value: handlers.formData.seed_keyword_id?.toString() || '',
        onChange: (value: any) =>
          handlers.setFormData({ ...handlers.formData, seed_keyword_id: value ? parseInt(value) : 0 }),
        required: true,
        options: [
          { value: '', label: 'Select a keyword...' },
          ...handlers.availableSeedKeywords.map((sk) => ({
            value: sk.id.toString(),
            label: `${sk.keyword} (Vol: ${sk.volume.toLocaleString()}, Diff: ${sk.difficulty}, ${sk.intent})`,
          })),
        ],
      },
      {
        key: 'volume_override',
        label: 'Volume Override (optional)',
        type: 'number',
        placeholder: 'Leave empty to use seed keyword volume',
        value: handlers.formData.volume_override ?? '',
        onChange: (value: any) =>
          handlers.setFormData({ ...handlers.formData, volume_override: value ? parseInt(value) : null }),
      },
      {
        key: 'difficulty_override',
        label: 'Difficulty Override (optional)',
        type: 'number',
        placeholder: 'Leave empty to use seed keyword difficulty',
        value: handlers.formData.difficulty_override ?? '',
        onChange: (value: any) =>
          handlers.setFormData({ ...handlers.formData, difficulty_override: value ? parseInt(value) : null }),
        min: 0,
        max: 100,
      },
      {
        key: 'cluster_id',
        label: 'Cluster',
        type: 'select',
        value: handlers.formData.cluster_id?.toString() || '',
        onChange: (value: any) =>
          handlers.setFormData({
            ...handlers.formData,
            cluster_id: value ? parseInt(value) : null,
          }),
        options: [
          { value: '', label: 'No Cluster' },
          ...clusters.map((c) => ({ value: c.id.toString(), label: c.name })),
        ],
      },
      {
        key: 'status',
        label: 'Status',
        type: 'select',
        value: handlers.formData.status || 'pending',
        onChange: (value: any) =>
          handlers.setFormData({ ...handlers.formData, status: value }),
        options: [
          { value: 'pending', label: 'Pending' },
          { value: 'active', label: 'Active' },
          { value: 'archived', label: 'Archived' },
        ],
      },
    ],
    exportConfig: {
      endpoint: '/v1/planner/keywords/export/',
      filename: 'keywords',
      formats: ['csv', 'json'],
    },
    importConfig: {
      endpoint: '/v1/planner/keywords/import_keywords/',
      acceptedFormats: ['.csv'],
      maxFileSize: 5 * 1024 * 1024, // 5MB
    },
  };
};