/**
 * Ideas Page - Built with TablePageTemplate
 * Consistent with Keywords page layout, structure and design
 */

import { useState, useEffect, useMemo, useCallback } from 'react';
import TablePageTemplate from '../../templates/TablePageTemplate';
import {
  fetchContentIdeas,
  fetchImages,
  createContentIdea,
  updateContentIdea,
  deleteContentIdea,
  bulkDeleteContentIdeas,
  bulkUpdateContentIdeasStatus,
  bulkQueueIdeasToWriter,
  ContentIdea,
  ContentIdeasFilters,
  ContentIdeaCreateData,
  fetchClusters,
  Cluster,
  fetchPlannerIdeasFilterOptions,
  FilterOption,
  API_BASE_URL,
} from '../../services/api';
import FormModal from '../../components/common/FormModal';
import ProgressModal from '../../components/common/ProgressModal';
import { useProgressModal } from '../../hooks/useProgressModal';
import { useToast } from '../../components/ui/toast/ToastContainer';
import { BoltIcon, PlusIcon, DownloadIcon, ListIcon, GroupIcon, ArrowRightIcon } from '../../icons';
import { LightBulbIcon } from '@heroicons/react/24/outline';
import { createIdeasPageConfig } from '../../config/pages/ideas.config';
import { useSectorStore } from '../../store/sectorStore';
import { useSiteStore } from '../../store/siteStore';
import { usePageSizeStore } from '../../store/pageSizeStore';
import { useAuthStore } from '../../store/authStore';
import PageHeader from '../../components/common/PageHeader';
import StandardThreeWidgetFooter from '../../components/dashboard/StandardThreeWidgetFooter';

export default function Ideas() {
  const toast = useToast();
  const { activeSite } = useSiteStore();
  const { activeSector, sectors } = useSectorStore();
  const { pageSize } = usePageSizeStore();

  // Data state
  const [ideas, setIdeas] = useState<ContentIdea[]>([]);
  const [clusters, setClusters] = useState<Cluster[]>([]);
  const [loading, setLoading] = useState(true);

  // Total counts for footer widget (not page-filtered)
  const [totalNew, setTotalNew] = useState(0);
  const [totalQueued, setTotalQueued] = useState(0);
  const [totalCompleted, setTotalCompleted] = useState(0);
  const [totalImagesCount, setTotalImagesCount] = useState(0);
  // Actual total count (unfiltered) for header metrics - not affected by filters
  const [actualTotalIdeas, setActualTotalIdeas] = useState(0);

  // Dynamic filter options
  // Initialize as undefined to distinguish "not loaded yet" from "loaded but empty array"
  const [statusOptions, setStatusOptions] = useState<FilterOption[] | undefined>(undefined);
  const [contentTypeOptions, setContentTypeOptions] = useState<FilterOption[] | undefined>(undefined);
  const [contentStructureOptions, setContentStructureOptions] = useState<FilterOption[] | undefined>(undefined);
  const [clusterOptions, setClusterOptions] = useState<FilterOption[] | undefined>(undefined);

  // Filter state
  const [searchTerm, setSearchTerm] = useState('');
  const [statusFilter, setStatusFilter] = useState('');
  const [clusterFilter, setClusterFilter] = useState('');
  const [structureFilter, setStructureFilter] = useState('');
  const [typeFilter, setTypeFilter] = useState('');
  const [selectedIds, setSelectedIds] = useState<string[]>([]);
  
  // Pagination state
  const [currentPage, setCurrentPage] = useState(1);
  const [totalPages, setTotalPages] = useState(1);
  const [totalCount, setTotalCount] = useState(0);
  
  // Sorting state
  const [sortBy, setSortBy] = useState<string>('created_at');
  const [sortDirection, setSortDirection] = useState<'asc' | 'desc'>('desc');
  const [showContent, setShowContent] = useState(false);
  
  // Modal state
  const [isModalOpen, setIsModalOpen] = useState(false);
  const [isEditMode, setIsEditMode] = useState(false);
  const [editingIdea, setEditingIdea] = useState<ContentIdea | null>(null);
  const [formData, setFormData] = useState<ContentIdeaCreateData>({
    idea_title: '',
    description: '',
    content_structure: 'article',
    content_type: 'post',
    primary_focus_keywords: '',
    target_keywords: '',
    keyword_cluster_id: null,
    status: 'new',
    estimated_word_count: 1000,
  });

  // Progress modal for AI functions
  const progressModal = useProgressModal();

  // Load clusters for form dropdown (all clusters)
  useEffect(() => {
    const loadClusters = async () => {
      try {
        const data = await fetchClusters({ ordering: 'name' });
        setClusters(data.results || []);
      } catch (error) {
        console.error('Error fetching clusters:', error);
      }
    };
    loadClusters();
  }, []);

  // Load dynamic filter options based on current site's data and applied filters
  // This implements cascading filters - each filter's options reflect what's available
  // given the other currently applied filters
  const loadFilterOptions = useCallback(async (currentFilters?: {
    status?: string;
    content_type?: string;
    content_structure?: string;
    cluster?: string;
    search?: string;
  }) => {
    if (!activeSite) return;
    
    try {
      const options = await fetchPlannerIdeasFilterOptions(activeSite.id, currentFilters);
      setStatusOptions(options.statuses || []);
      setContentTypeOptions(options.content_types || []);
      setContentStructureOptions(options.content_structures || []);
      setClusterOptions(options.clusters || []);
    } catch (error) {
      console.error('Error loading filter options:', error);
    }
  }, [activeSite]);

  // Load filter options when site changes (initial load with no filters)
  useEffect(() => {
    loadFilterOptions();
  }, [activeSite]);

  // Reload filter options when any filter changes (cascading filters)
  useEffect(() => {
    loadFilterOptions({
      status: statusFilter || undefined,
      content_type: typeFilter || undefined,
      content_structure: structureFilter || undefined,
      cluster: clusterFilter || undefined,
      search: searchTerm || undefined,
    });
  }, [statusFilter, typeFilter, structureFilter, clusterFilter, searchTerm, loadFilterOptions]);

  // Load total metrics for footer widget (site-wide totals, no sector filter)
  const loadTotalMetrics = useCallback(async () => {
    try {
      // Batch all API calls in parallel for better performance
      const [allRes, queuedRes, completedRes, newRes, imagesRes] = await Promise.all([
        // Get all ideas (site-wide)
        fetchContentIdeas({
          page_size: 1,
          site_id: activeSite?.id,
        }),
        // Get ideas with status='queued'
        fetchContentIdeas({
          page_size: 1,
          site_id: activeSite?.id,
          status: 'queued',
        }),
        // Get ideas with status='completed'
        fetchContentIdeas({
          page_size: 1,
          site_id: activeSite?.id,
          status: 'completed',
        }),
        // Get ideas with status='new' (those ready to become tasks)
        fetchContentIdeas({
          page_size: 1,
          site_id: activeSite?.id,
          status: 'new',
        }),
        // Get actual total images count
        fetchImages({ page_size: 1 }),
      ]);

      setActualTotalIdeas(allRes.count || 0); // Store actual total (unfiltered) for header metrics
      setTotalNew(newRes.count || 0);
      setTotalQueued(queuedRes.count || 0);
      setTotalCompleted(completedRes.count || 0);
      setTotalImagesCount(imagesRes.count || 0);
    } catch (error) {
      console.error('Error loading total metrics:', error);
    }
  }, [activeSite]);

  // Load total metrics when sector changes
  useEffect(() => {
    loadTotalMetrics();
  }, [loadTotalMetrics]);

  // Load ideas - wrapped in useCallback
  const loadIdeas = useCallback(async () => {
    setLoading(true);
    setShowContent(false);
    try {
      const ordering = sortBy ? `${sortDirection === 'desc' ? '-' : ''}${sortBy}` : '-created_at';
      
      const filters: ContentIdeasFilters = {
        ...(searchTerm && { search: searchTerm }),
        ...(statusFilter && { status: statusFilter }),
        ...(clusterFilter && { keyword_cluster_id: clusterFilter }),
        ...(structureFilter && { content_structure: structureFilter }),
        ...(typeFilter && { content_type: typeFilter }),
        ...(activeSector?.id && { sector_id: activeSector.id }),
        page: currentPage,
        page_size: pageSize,
        ordering,
      };
      
      const data = await fetchContentIdeas(filters);
      setIdeas(data.results || []);
      setTotalCount(data.count || 0);
      setTotalPages(Math.ceil((data.count || 0) / pageSize));
      
      setTimeout(() => {
        setShowContent(true);
        setLoading(false);
      }, 100);
    } catch (error: any) {
      console.error('Error loading ideas:', error);
      toast.error(`Failed to load ideas: ${error.message}`);
      setShowContent(true);
      setLoading(false);
    }
  }, [currentPage, statusFilter, clusterFilter, structureFilter, typeFilter, sortBy, sortDirection, searchTerm, activeSector, pageSize]);

  useEffect(() => {
    loadIdeas();
  }, [loadIdeas]);

  // Listen for site and sector changes and refresh data
  useEffect(() => {
    const handleSiteChange = () => {
      loadIdeas();
    };
    
    const handleSectorChange = () => {
      loadIdeas();
    };
    
    window.addEventListener('siteChanged', handleSiteChange);
    window.addEventListener('sectorChanged', handleSectorChange);
    return () => {
      window.removeEventListener('siteChanged', handleSiteChange);
      window.removeEventListener('sectorChanged', handleSectorChange);
    };
  }, [loadIdeas]);

  // Reset to page 1 when pageSize changes
  useEffect(() => {
    setCurrentPage(1);
  }, [pageSize]);

  // Debounced search - reset to page 1 when search term changes
  // Only depend on searchTerm to avoid pagination reset on page navigation
  useEffect(() => {
    const timer = setTimeout(() => {
      // Always reset to page 1 when search changes
      // The main useEffect will handle reloading when currentPage changes
      setCurrentPage(1);
    }, 500);

    return () => clearTimeout(timer);
  }, [searchTerm]);

  // Handle sorting
  const handleSort = (field: string, direction: 'asc' | 'desc') => {
    setSortBy(field || 'created_at');
    setSortDirection(direction);
    setCurrentPage(1);
  };

  // Bulk status update handler
  const handleBulkUpdateStatus = useCallback(async (ids: string[], status: string) => {
    try {
      const numIds = ids.map(id => parseInt(id));
      await bulkUpdateContentIdeasStatus(numIds, status);
      await loadIdeas();
    } catch (error: any) {
      throw error;
    }
  }, [loadIdeas]);

  // Bulk export handler
  const handleBulkExport = useCallback(async (ids: string[]) => {
    try {
      if (!ids || ids.length === 0) {
        throw new Error('No records selected for export');
      }

      // Build URL with only IDs parameter for bulk export
      const idsParam = ids.join(',');
      const exportUrl = `${API_BASE_URL}/v1/planner/ideas/export/?ids=${encodeURIComponent(idsParam)}`;

      const token = useAuthStore.getState().token;
      const headers: HeadersInit = {};
      if (token) {
        headers['Authorization'] = `Bearer ${token}`;
      }

      const response = await fetch(exportUrl, {
        method: 'GET',
        credentials: 'include',
        headers,
      });

      if (!response.ok) {
        const errorText = await response.text();
        throw new Error(`Export failed: ${errorText}`);
      }

      const blob = await response.blob();
      const downloadUrl = window.URL.createObjectURL(blob);
      const link = document.createElement('a');
      link.href = downloadUrl;
      link.download = 'ideas.csv';
      document.body.appendChild(link);
      link.click();
      document.body.removeChild(link);
      window.URL.revokeObjectURL(downloadUrl);
    } catch (error: any) {
      throw error; // Let TablePageTemplate handle toast
    }
  }, []);

  // Row action handler
  const handleRowAction = useCallback(async (action: string, row: ContentIdea) => {
    if (action === 'queue_to_writer') {
      if (row.status !== 'new') {
        toast.error(`Only ideas with status "new" can be queued. Current status: ${row.status}`);
        return;
      }
      try {
        const result = await bulkQueueIdeasToWriter([row.id]);
        toast.success(`Queue complete: ${result.created_count || 0} task created`);
        await loadIdeas();
      } catch (error: any) {
        toast.error(`Failed to queue idea: ${error.message}`);
      }
    }
  }, [toast, loadIdeas]);

  const handleBulkAction = useCallback(async (action: string, ids: string[]) => {
    if (action === 'queue_to_writer') {
      if (ids.length === 0) {
        toast.error('Please select at least one idea to queue');
        return;
      }
      try {
        const numIds = ids.map(id => parseInt(id));
        const result = await bulkQueueIdeasToWriter(numIds);
        toast.success(`Queue complete: ${result.created_count || 0} tasks created from ${ids.length} ideas`);
        await loadIdeas();
      } catch (error: any) {
        toast.error(`Failed to queue ideas: ${error.message}`);
      }
    } else {
      toast.info(`Bulk action "${action}" for ${ids.length} items`);
    }
  }, [toast, loadIdeas]);

  // Create page config
  const pageConfig = useMemo(() => {
    return createIdeasPageConfig({
      clusters,
      activeSector,
      sectors,
      sectors,
      formData,
      setFormData,
      searchTerm,
      setSearchTerm,
      statusFilter,
      setStatusFilter,
      clusterFilter,
      setClusterFilter,
      structureFilter,
      setStructureFilter,
      typeFilter,
      setTypeFilter,
      setCurrentPage,
      // Dynamic filter options
      statusOptions,
      contentTypeOptions,
      contentStructureOptions,
      clusterOptions,
    });
  }, [clusters, activeSector, formData, searchTerm, statusFilter, clusterFilter, structureFilter, typeFilter, statusOptions, contentTypeOptions, contentStructureOptions, clusterOptions]);

  // Calculate header metrics - use actual counts from API calls (not page data)
  // This ensures metrics show correct totals across all pages, not just current page
  // Note: actualTotalIdeas is NOT affected by filters - it always shows the true total
  const headerMetrics = useMemo(() => {
    if (!pageConfig?.headerMetrics) return [];

    // Override the calculate function to use pre-loaded totals instead of filtering page data
    return pageConfig.headerMetrics.map((metric) => {
      let value: number;

      switch (metric.label) {
        case 'Ideas':
          // Use actualTotalIdeas (unfiltered) for header metrics - not affected by filters
          value = actualTotalIdeas || 0;
          break;
        case 'New':
          // Use totalNew from loadTotalMetrics() (ideas with status='new')
          value = totalNew;
          break;
        case 'Queued':
          // Use totalQueued from loadTotalMetrics() (ideas with status='queued')
          value = totalQueued;
          break;
        case 'Completed':
          // Use totalCompleted from loadTotalMetrics() (ideas with status='completed')
          value = totalCompleted;
          break;
        default:
          value = metric.calculate({ ideas, totalCount });
      }

      return {
        label: metric.label,
        value,
        accentColor: metric.accentColor,
        tooltip: (metric as any).tooltip,
      };
    });
  }, [pageConfig?.headerMetrics, ideas, totalCount, totalNew, totalQueued, totalCompleted, actualTotalIdeas]);

  const resetForm = useCallback(() => {
    setFormData({
      idea_title: '',
      description: '',
      content_structure: 'article',
      content_type: 'post',
      primary_focus_keywords: '',
      target_keywords: '',
      keyword_cluster_id: null,
      status: 'new',
      estimated_word_count: 1000,
    });
    setIsEditMode(false);
    setEditingIdea(null);
  }, []);

  // Handle create/edit
  const handleSave = async () => {
    try {
      if (isEditMode && editingIdea) {
        await updateContentIdea(editingIdea.id, formData);
        toast.success('Idea updated successfully');
      } else {
        await createContentIdea(formData);
        toast.success('Idea created successfully');
      }
      setIsModalOpen(false);
      resetForm();
      loadIdeas();
    } catch (error: any) {
      toast.error(error.message || 'Unable to save idea. Please try again.');
    }
  };

  return (
    <>
      <PageHeader 
        title="Ideas" 
        badge={{ icon: <LightBulbIcon />, color: 'yellow' }}
        parent="Planner"
      />
      <TablePageTemplate
        columns={pageConfig.columns}
        data={ideas}
        loading={loading}
        showContent={showContent}
        filters={pageConfig.filters}
        filterValues={{
          search: searchTerm,
          status: statusFilter,
          keyword_cluster_id: clusterFilter,
          content_structure: structureFilter,
          content_type: typeFilter,
        }}
        primaryAction={{
          label: 'Queue to Writer',
          icon: <ArrowRightIcon className="w-4 h-4" />,
          onClick: () => handleBulkAction('queue_to_writer', selectedIds),
          variant: 'success',
        }}
        onFilterChange={(key, value) => {
          const stringValue = value === null || value === undefined ? '' : String(value);
          if (key === 'search') {
            setSearchTerm(stringValue);
          } else if (key === 'status') {
            setStatusFilter(stringValue);
            setCurrentPage(1);
          } else if (key === 'keyword_cluster_id') {
            setClusterFilter(stringValue);
            setCurrentPage(1);
          } else if (key === 'content_structure') {
            setStructureFilter(stringValue);
            setCurrentPage(1);
          } else if (key === 'content_type') {
            setTypeFilter(stringValue);
            setCurrentPage(1);
          }
          setCurrentPage(1);
        }}
        onEdit={(row) => {
          setEditingIdea(row);
          setFormData({
            idea_title: row.idea_title,
            description: row.description || '',
            content_structure: row.content_structure || 'article',
            content_type: row.content_type || 'post',
            primary_focus_keywords: row.primary_focus_keywords || '',
            target_keywords: row.target_keywords || '',
            keyword_cluster_id: row.keyword_cluster_id || null,
            status: row.status || 'new',
            estimated_word_count: row.estimated_word_count || 1000,
          });
          setIsEditMode(true);
          setIsModalOpen(true);
        }}
        onCreate={() => {
          resetForm();
          setIsModalOpen(true);
        }}
        createLabel="Add Idea"
        onCreateIcon={<PlusIcon />}
        onDelete={async (id: number) => {
          await deleteContentIdea(id);
          loadIdeas();
        }}
        onBulkDelete={async (ids: number[]) => {
          const result = await bulkDeleteContentIdeas(ids);
          // Clear selection first
          setSelectedIds([]);
          // Reset to page 1 if we deleted all items on current page
          if (currentPage > 1 && ideas.length <= ids.length) {
            setCurrentPage(1);
          }
          // Always reload data to refresh the table
          await loadIdeas();
          return result;
        }}
        onBulkExport={handleBulkExport}
        onBulkUpdateStatus={handleBulkUpdateStatus}
        onBulkAction={handleBulkAction}
        onRowAction={handleRowAction}
        getItemDisplayName={(row: ContentIdea) => row.idea_title}
        onExport={async () => {
          try {
            const params = new URLSearchParams();
            if (searchTerm) params.set('search', searchTerm);
            if (statusFilter) params.set('status', statusFilter);
            if (clusterFilter) params.set('keyword_cluster_id', clusterFilter);
            if (structureFilter) params.set('content_structure', structureFilter);
            if (typeFilter) params.set('content_type', typeFilter);
            const exportUrl = `${API_BASE_URL}/v1/planner/ideas/export/?${params.toString()}`;
            const token = useAuthStore.getState().token;
            const headers: HeadersInit = {};
            if (token) {
              headers['Authorization'] = `Bearer ${token}`;
            }
            const response = await fetch(exportUrl, { method: 'GET', credentials: 'include', headers });
            if (!response.ok) {
              throw new Error(`Export failed: ${response.statusText}`);
            }
            const blob = await response.blob();
            const downloadUrl = window.URL.createObjectURL(blob);
            const link = document.createElement('a');
            link.href = downloadUrl;
            link.download = 'ideas.csv';
            document.body.appendChild(link);
            link.click();
            document.body.removeChild(link);
            window.URL.revokeObjectURL(downloadUrl);
            toast.success('Export successful', 'Ideas exported successfully.');
          } catch (error: any) {
            toast.error(`Export failed: ${error.message}`);
          }
        }}
        onExportIcon={<DownloadIcon />}
        selectionLabel="idea"
        pagination={{
          currentPage,
          totalPages,
          totalCount,
          onPageChange: setCurrentPage,
        }}
        selection={{
          selectedIds,
          onSelectionChange: setSelectedIds,
        }}
        sorting={{
          sortBy,
          sortDirection,
          onSort: handleSort,
        }}
        headerMetrics={headerMetrics}
        onFilterReset={() => {
          setSearchTerm('');
          setStatusFilter('');
          setClusterFilter('');
          setStructureFilter('');
          setTypeFilter('');
          setCurrentPage(1);
        }}
      />

      {/* Three Widget Footer - Section 3 Layout with Standardized Workflow Widget */}
      <StandardThreeWidgetFooter
        submoduleColor="amber"
        pageProgress={{
          title: 'Page Progress',
          submoduleColor: 'amber',
          metrics: [
            { label: 'Ideas', value: totalCount },
            { label: 'In Tasks', value: totalQueued + totalCompleted, percentage: `${totalCount > 0 ? Math.round(((totalQueued + totalCompleted) / totalCount) * 100) : 0}%` },
            { label: 'Pending', value: totalNew },
            { label: 'From Clusters', value: clusters.length },
          ],
          progress: {
            value: totalCount > 0 ? Math.round(((totalQueued + totalCompleted) / totalCount) * 100) : 0,
            label: 'Converted',
            color: 'amber',
          },
          hint: totalNew > 0
            ? `${totalNew} ideas ready to become tasks`
            : 'All ideas converted!',
          statusInsight: totalNew > 0
            ? `Select ideas and queue them to Writer to start content generation.`
            : (totalQueued + totalCompleted) > 0
              ? `Ideas queued. Go to Writer Tasks to generate content.`
              : `No ideas yet. Generate ideas from Clusters page.`,
        }}
        module="planner"
        showCredits={true}
        analyticsHref="/account/usage"
      />

      {/* Progress Modal for AI Functions */}
      <ProgressModal
        isOpen={progressModal.isOpen}
        title={progressModal.title}
        percentage={progressModal.progress.percentage}
        status={progressModal.progress.status}
        message={progressModal.progress.message}
        details={progressModal.progress.details}
        taskId={progressModal.taskId || undefined}
        functionId={progressModal.functionId}
        stepLogs={progressModal.stepLogs}
        onClose={() => {
          const wasCompleted = progressModal.progress.status === 'completed';
          progressModal.closeModal();
          // Reload data after modal closes (if completed)
          if (wasCompleted) {
            loadIdeas();
          }
        }}
      />

      {/* Create/Edit Modal */}
      <FormModal
        isOpen={isModalOpen}
        onClose={() => {
          setIsModalOpen(false);
          resetForm();
        }}
        onSubmit={handleSave}
        title={isEditMode ? 'Edit Idea' : 'Add Idea'}
        submitLabel={isEditMode ? 'Update' : 'Create'}
        fields={pageConfig.formFields(clusters)}
      />
    </>
  );
}