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

interface WidgetChartProps {
  leadsByWidget: Array<{ widget_id: number; widget_name: string; widget_type: string; lead_count: number }>
  meetingsByWidget: Array<{ widget_id: number; widget_name: string; meeting_count: number }>
}

export function WidgetChart({ leadsByWidget, meetingsByWidget }: WidgetChartProps) {
  const maxLeads = Math.max(...leadsByWidget.map(w => w.lead_count), 1)
  const maxMeetings = Math.max(...meetingsByWidget.map(w => w.meeting_count), 1)

  return (
    <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
      {/* Leads by Widget */}
      <Card>
        <CardHeader>
          <CardTitle className="flex items-center gap-2">
            <Puzzle className="w-5 h-5" />
            {t('Leads by Widget')}
          </CardTitle>
        </CardHeader>
        <CardContent>
          {leadsByWidget.length === 0 ? (
            <p className="text-gray-500 text-sm text-center py-4">
              {t('No data available')}
            </p>
          ) : (
            <div className="space-y-4">
              {leadsByWidget.map((widget) => {
                const percentage = (widget.lead_count / maxLeads) * 100
                return (
                  <div key={widget.widget_id}>
                    <div className="flex justify-between text-sm mb-1">
                      <span className="text-gray-700 font-medium truncate">
                        {widget.widget_name}
                      </span>
                      <span className="text-gray-900 font-semibold shrink-0">
                        {widget.lead_count}
                      </span>
                    </div>
                    <div className="w-full bg-gray-100 rounded-full h-3 overflow-hidden">
                      <div 
                        className="h-full bg-primary-500 rounded-full transition-all"
                        style={{ width: `${percentage}%` }}
                      />
                    </div>
                    <p className="text-xs text-gray-400 mt-1">
                      {widget.widget_type || 'form'}
                    </p>
                  </div>
                )
              })}
            </div>
          )}
        </CardContent>
      </Card>

      {/* Meetings by Widget */}
      <Card>
        <CardHeader>
          <CardTitle className="flex items-center gap-2">
            <Calendar className="w-5 h-5" />
            {t('Meetings by Widget')}
          </CardTitle>
        </CardHeader>
        <CardContent>
          {meetingsByWidget.length === 0 ? (
            <p className="text-gray-500 text-sm text-center py-4">
              {t('No data available')}
            </p>
          ) : (
            <div className="space-y-4">
              {meetingsByWidget.map((widget) => {
                const percentage = (widget.meeting_count / maxMeetings) * 100
                return (
                  <div key={widget.widget_id}>
                    <div className="flex justify-between text-sm mb-1">
                      <span className="text-gray-700 font-medium truncate">
                        {widget.widget_name || t('Calendar Widget')}
                      </span>
                      <span className="text-gray-900 font-semibold shrink-0">
                        {widget.meeting_count}
                      </span>
                    </div>
                    <div className="w-full bg-gray-100 rounded-full h-3 overflow-hidden">
                      <div 
                        className="h-full bg-accent-500 rounded-full transition-all"
                        style={{ width: `${percentage}%` }}
                      />
                    </div>
                  </div>
                )
              })}
            </div>
          )}
        </CardContent>
      </Card>
    </div>
  )
}
