import { t } from '@/lib/i18n'
import { Card, CardHeader, CardTitle, CardContent } from '@/components/common/Card'
import { ExternalLink } from 'lucide-react'

interface SourcesTableProps {
  leadSources: Array<{ page_url: string; lead_count: number }>
  conversationSources: Array<{ page_url: string; conversation_count: number }>
}

function truncateUrl(url: string, maxLength = 40): string {
  if (!url) return '-'
  try {
    const urlObj = new URL(url)
    const path = urlObj.pathname + urlObj.search
    if (path.length <= maxLength) return path
    return path.substring(0, maxLength - 3) + '...'
  } catch {
    return url.length > maxLength ? url.substring(0, maxLength - 3) + '...' : url
  }
}

export function SourcesTable({ leadSources, conversationSources }: SourcesTableProps) {
  return (
    <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
      {/* Lead Sources */}
      <Card>
        <CardHeader>
          <CardTitle>{t('Top Pages by Leads')}</CardTitle>
        </CardHeader>
        <CardContent>
          {leadSources.length === 0 ? (
            <p className="text-gray-500 text-sm text-center py-4">
              {t('No data available')}
            </p>
          ) : (
            <div className="space-y-3">
              {leadSources.map((source, index) => (
                <div key={source.page_url || index} className="flex items-center justify-between">
                  <div className="flex items-center gap-2 min-w-0">
                    <span className="text-sm font-medium text-gray-400 w-5">
                      {index + 1}.
                    </span>
                    <a 
                      href={source.page_url} 
                      target="_blank" 
                      rel="noopener noreferrer"
                      className="text-sm text-gray-700 hover:text-primary-600 truncate flex items-center gap-1"
                      title={source.page_url}
                    >
                      {truncateUrl(source.page_url)}
                      <ExternalLink className="w-3 h-3 shrink-0" />
                    </a>
                  </div>
                  <span className="text-sm font-semibold text-gray-900 shrink-0">
                    {source.lead_count}
                  </span>
                </div>
              ))}
            </div>
          )}
        </CardContent>
      </Card>

      {/* Conversation Sources */}
      <Card>
        <CardHeader>
          <CardTitle>{t('Top Pages by Conversations')}</CardTitle>
        </CardHeader>
        <CardContent>
          {conversationSources.length === 0 ? (
            <p className="text-gray-500 text-sm text-center py-4">
              {t('No data available')}
            </p>
          ) : (
            <div className="space-y-3">
              {conversationSources.map((source, index) => (
                <div key={source.page_url || index} className="flex items-center justify-between">
                  <div className="flex items-center gap-2 min-w-0">
                    <span className="text-sm font-medium text-gray-400 w-5">
                      {index + 1}.
                    </span>
                    <a 
                      href={source.page_url} 
                      target="_blank" 
                      rel="noopener noreferrer"
                      className="text-sm text-gray-700 hover:text-primary-600 truncate flex items-center gap-1"
                      title={source.page_url}
                    >
                      {truncateUrl(source.page_url)}
                      <ExternalLink className="w-3 h-3 shrink-0" />
                    </a>
                  </div>
                  <span className="text-sm font-semibold text-gray-900 shrink-0">
                    {source.conversation_count}
                  </span>
                </div>
              ))}
            </div>
          )}
        </CardContent>
      </Card>
    </div>
  )
}
