import React, { useState, useEffect } from 'react'
import RecordList from './RecordList.jsx'
import ChatRecordList from './ChatRecordList.jsx'
import ProfileRecordList from './ProfileRecordList.jsx'
import LoadingSkeleton from './LoadingSkeleton.jsx'
import { logger } from '../utils/logger.js'

export default function RecordTabs({ langRecords, commentRecords, userComments, chatRecords, chatHasMore, onLoadMoreChat, userChatRecords, userChatLoading, baseRecords, apiConfig, pageContext, user = null, agent = null, onRecordDeleted = null }) {
  // Check if current page has matching chat records (AI posts always have chat records)
  const isAiPost = !pageContext.isTopPage && Array.isArray(chatRecords) && chatRecords.some(chatPair => {
    const recordUrl = chatPair.question?.value?.post?.url
    if (!recordUrl) return false
    
    try {
      const recordRkey = new URL(recordUrl).pathname.split('/').pop()?.replace(/\.html$/, '')
      return recordRkey === pageContext.rkey
    } catch {
      return false
    }
  })
  
  const [activeTab, setActiveTab] = useState(isAiPost ? 'collection' : 'profiles')
  
  // Monitor activeTab changes
  useEffect(() => {
    logger.log('RecordTabs: activeTab changed to', activeTab)
  }, [activeTab])
  
  logger.log('RecordTabs: activeTab is', activeTab)
  logger.log('RecordTabs: commentRecords prop:', commentRecords?.length || 0, commentRecords)

  // Filter records based on page context
  const filterRecords = (records, isProfile = false) => {
    // Ensure records is an array
    const recordsArray = Array.isArray(records) ? records : []
    
    logger.log('filterRecords called with:', {
      recordsLength: recordsArray.length,
      isProfile,
      isTopPage: pageContext.isTopPage,
      pageRkey: pageContext.rkey,
      records: recordsArray
    })
    
    if (pageContext.isTopPage) {
      // Top page: show latest 3 records
      const result = recordsArray.slice(0, 3)
      logger.log('filterRecords: Top page result:', result.length, result)
      return result
    } else {
      // Individual page: show records matching the URL
      const filtered = recordsArray.filter(record => {
        // Profile records should always be shown
        if (isProfile || record.value?.type === 'profile') {
          logger.log('filterRecords: Profile record included:', record.value?.type)
          return true
        }
        
        const recordUrl = record.value?.post?.url
        if (!recordUrl) {
          logger.log('filterRecords: No recordUrl found for record:', record.value?.type)
          return false
        }
        
        try {
          const recordRkey = new URL(recordUrl).pathname.split('/').pop()?.replace(/\.html$/, '')
          const matches = recordRkey === pageContext.rkey
          logger.log('filterRecords: URL matching:', { recordRkey, pageRkey: pageContext.rkey, matches })
          return matches
        } catch {
          logger.log('filterRecords: URL parsing failed for:', recordUrl)
          return false
        }
      })
      logger.log('filterRecords: Individual page result:', filtered.length, filtered)
      return filtered
    }
  }

  // Special filter for chat records (which are already processed into pairs)
  const filterChatRecords = (chatPairs) => {
    // Ensure chatPairs is an array
    const chatArray = Array.isArray(chatPairs) ? chatPairs : []
    
    logger.log('filterChatRecords called:', { 
      isTopPage: pageContext.isTopPage, 
      rkey: pageContext.rkey, 
      chatPairsLength: chatArray.length,
      chatPairsType: typeof chatPairs,
      isArray: Array.isArray(chatPairs)
    })
    
    if (pageContext.isTopPage) {
      // Top page: show latest 3 pairs
      const result = chatArray.slice(0, 3)
      logger.log('Top page: returning', result.length, 'pairs')
      return result
    } else {
      // Individual page: show pairs matching the URL (compare path only, ignore domain)
      const filtered = chatArray.filter(chatPair => {
        const recordUrl = chatPair.question?.value?.post?.url
        if (!recordUrl) {
          logger.log('No recordUrl for chatPair:', chatPair)
          return false
        }
        
        try {
          // Extract path from URL and get the filename part
          const recordPath = new URL(recordUrl).pathname
          const recordRkey = recordPath.split('/').pop()?.replace(/\.html$/, '')
          
          logger.log('Comparing:', { recordRkey, pageRkey: pageContext.rkey, recordUrl })
          
          // Compare with current page rkey
          const matches = recordRkey === pageContext.rkey
          if (matches) {
            logger.log('Found matching chat pair!')
          }
          return matches
        } catch (error) {
          logger.log('Error processing recordUrl:', recordUrl, error)
          return false
        }
      })
      
      logger.log('Individual page: returning', filtered.length, 'filtered pairs')
      return filtered
    }
  }

  const filteredLangRecords = filterRecords(Array.isArray(langRecords) ? langRecords : [])
  
  logger.log('RecordTabs: About to filter commentRecords:', commentRecords?.length || 0, commentRecords)
  const filteredCommentRecords = filterRecords(Array.isArray(commentRecords) ? commentRecords : [])
  logger.log('RecordTabs: After filtering commentRecords:', filteredCommentRecords.length, filteredCommentRecords)
  
  const filteredUserComments = filterRecords(Array.isArray(userComments) ? userComments : [])
  const filteredChatRecords = filterChatRecords(Array.isArray(chatRecords) ? chatRecords : [])
  const filteredBaseRecords = filterRecords(Array.isArray(baseRecords) ? baseRecords : [])
  
  logger.log('RecordTabs: filtered results:')
  logger.log('  - filteredCommentRecords:', filteredCommentRecords.length, filteredCommentRecords)
  logger.log('  - filteredLangRecords:', filteredLangRecords.length)
  logger.log('  - filteredUserComments:', filteredUserComments.length)
  logger.log('  - pageContext:', pageContext)
  logger.log('RecordTabs: TAB RENDER VALUES:')
  logger.log('  - filteredCommentRecords.length for tab:', filteredCommentRecords.length)
  logger.log('  - commentRecords input:', commentRecords?.length || 0)
  
  // Filter profile records from baseRecords
  const profileRecords = (Array.isArray(baseRecords) ? baseRecords : []).filter(record => record.value?.type === 'profile')
  const sortedProfileRecords = profileRecords.sort((a, b) => {
    if (a.value.profileType === 'admin' && b.value.profileType !== 'admin') return -1
    if (a.value.profileType !== 'admin' && b.value.profileType === 'admin') return 1
    return 0
  })
  const filteredProfileRecords = filterRecords(sortedProfileRecords, true)

  return (
    <div className="record-tabs">
      {!isAiPost && (
      <div className="tab-header">
        <button 
          className={`tab-btn ${activeTab === 'profiles' ? 'active' : ''}`}
          onClick={() => {
            logger.log('RecordTabs: Profiles tab clicked')
            setActiveTab('profiles')
          }}
        >
          about ({filteredProfileRecords.length})
        </button>
        <button 
          className={`tab-btn ${activeTab === 'collection' ? 'active' : ''}`}
          onClick={() => setActiveTab('collection')}
        >
          chat ({filteredChatRecords.length > 0 ? filteredChatRecords.length : (userChatRecords?.length || 0)})
        </button>
        <button 
          className={`tab-btn ${activeTab === 'comment' ? 'active' : ''}`}
          onClick={() => {
            logger.log('RecordTabs: feedback tab clicked, setting activeTab to comment')
            setActiveTab('comment')
          }}
        >
          feedback ({(() => {
            logger.log('RecordTabs: feedback tab render - filteredCommentRecords.length:', filteredCommentRecords.length)
            return filteredCommentRecords.length
          })()})
        </button>
        <button 
          className={`tab-btn ${activeTab === 'users' ? 'active' : ''}`}
          onClick={() => setActiveTab('users')}
        >
          comment ({filteredUserComments.length})
        </button>
        <button 
          className={`tab-btn ${activeTab === 'lang' ? 'active' : ''}`}
          onClick={() => setActiveTab('lang')}
        >
          en ({filteredLangRecords.length})
        </button>
      </div>
      )}

      <div className="tab-content">
        {activeTab === 'lang' && !isAiPost && (
          !langRecords ? (
            <LoadingSkeleton count={3} showTitle={true} />
          ) : (
            <RecordList 
              title=""
              records={filteredLangRecords} 
              apiConfig={apiConfig} 
              user={user}
              agent={agent}
              onRecordDeleted={onRecordDeleted}
              showTitle={false}
            />
          )
        )}
        {activeTab === 'comment' && !isAiPost && (
          !commentRecords ? (
            <LoadingSkeleton count={3} showTitle={true} />
          ) : (
            <RecordList 
              title=""
              records={filteredCommentRecords} 
              apiConfig={apiConfig} 
              user={user}
              agent={agent}
              onRecordDeleted={onRecordDeleted}
              showTitle={false}
            />
          )
        )}
        {activeTab === 'collection' && (
          userChatLoading ? (
            <LoadingSkeleton count={2} showTitle={true} />
          ) : (
            <ChatRecordList 
              chatPairs={filteredChatRecords.length > 0 ? filteredChatRecords : (Array.isArray(userChatRecords) ? userChatRecords : [])} 
              chatHasMore={filteredChatRecords.length > 0 ? chatHasMore : false}
              onLoadMoreChat={filteredChatRecords.length > 0 ? onLoadMoreChat : null}
              apiConfig={apiConfig} 
              user={user}
              agent={agent}
              onRecordDeleted={onRecordDeleted}
            />
          )
        )}
        {activeTab === 'users' && !isAiPost && (
          !userComments ? (
            <LoadingSkeleton count={3} showTitle={true} />
          ) : (
            <RecordList 
              title=""
              records={filteredUserComments} 
              apiConfig={apiConfig} 
              user={user}
              agent={agent}
              onRecordDeleted={onRecordDeleted}
              showTitle={false}
            />
          )
        )}
        {activeTab === 'profiles' && !isAiPost && (
          !baseRecords ? (
            <LoadingSkeleton count={3} showTitle={true} />
          ) : (
            <ProfileRecordList 
              profileRecords={filteredProfileRecords}
              apiConfig={apiConfig} 
              user={user}
              agent={agent}
              onRecordDeleted={onRecordDeleted}
            />
          )
        )}
      </div>

    </div>
  )
}