import React from 'react'
import { TrendingUp } from 'lucide-react'
import { Button } from '../Button'
import type { DashboardActiveModelInfo, DashboardRunningTrainingInfo } from '../../api/types'

interface ActiveModelPanelProps {
  model: DashboardActiveModelInfo | null
  runningTraining: DashboardRunningTrainingInfo | null
  isLoading?: boolean
  onGoToTraining?: () => void
}

const formatDate = (dateStr: string | null): string => {
  if (!dateStr) return 'N/A'
  const date = new Date(dateStr)
  return date.toLocaleDateString('en-US', {
    year: 'numeric',
    month: 'short',
    day: 'numeric',
  })
}

const formatMetric = (value: number | null): string => {
  if (value === null) return 'N/A'
  return `${(value * 100).toFixed(1)}%`
}

const getMetricColor = (value: number | null): string => {
  if (value === null) return 'text-warm-text-muted'
  if (value >= 0.9) return 'text-green-600'
  if (value >= 0.8) return 'text-yellow-600'
  return 'text-red-600'
}

export const ActiveModelPanel: React.FC<ActiveModelPanelProps> = ({
  model,
  runningTraining,
  isLoading = false,
  onGoToTraining,
}) => {
  if (isLoading) {
    return (
      <div className="bg-warm-card border border-warm-border rounded-lg p-6 shadow-sm">
        <h2 className="text-sm font-semibold text-warm-text-muted uppercase tracking-wide mb-4">
          Active Model
        </h2>
        <div className="flex items-center justify-center py-8">
          <div className="animate-pulse text-warm-text-muted">Loading...</div>
        </div>
      </div>
    )
  }

  if (!model) {
    return (
      <div className="bg-warm-card border border-warm-border rounded-lg p-6 shadow-sm">
        <h2 className="text-sm font-semibold text-warm-text-muted uppercase tracking-wide mb-4">
          Active Model
        </h2>
        <div className="flex flex-col items-center justify-center py-8 text-center">
          <TrendingUp className="w-12 h-12 text-warm-text-disabled mb-3 opacity-20" />
          <p className="text-warm-text-primary font-medium mb-1">No Active Model</p>
          <p className="text-sm text-warm-text-muted mb-4">
            Train and activate a model to see stats here
          </p>
          {onGoToTraining && (
            <Button onClick={onGoToTraining} variant="primary" size="sm">
              Go to Training
            </Button>
          )}
        </div>
      </div>
    )
  }

  return (
    <div className="bg-warm-card border border-warm-border rounded-lg p-6 shadow-sm">
      <h2 className="text-sm font-semibold text-warm-text-muted uppercase tracking-wide mb-4">
        Active Model
      </h2>

      <div className="mb-4">
        <span className="text-lg font-bold text-warm-text-primary">{model.version}</span>
        <span className="text-warm-text-secondary ml-2">- {model.name}</span>
      </div>

      <div className="border-t border-warm-border pt-4 mb-4">
        <div className="grid grid-cols-3 gap-4">
          <div className="text-center">
            <p className={`text-2xl font-bold ${getMetricColor(model.metrics_mAP)}`}>
              {formatMetric(model.metrics_mAP)}
            </p>
            <p className="text-xs text-warm-text-muted uppercase">mAP</p>
          </div>
          <div className="text-center">
            <p className={`text-2xl font-bold ${getMetricColor(model.metrics_precision)}`}>
              {formatMetric(model.metrics_precision)}
            </p>
            <p className="text-xs text-warm-text-muted uppercase">Precision</p>
          </div>
          <div className="text-center">
            <p className={`text-2xl font-bold ${getMetricColor(model.metrics_recall)}`}>
              {formatMetric(model.metrics_recall)}
            </p>
            <p className="text-xs text-warm-text-muted uppercase">Recall</p>
          </div>
        </div>
      </div>

      <div className="space-y-1 text-sm text-warm-text-secondary">
        <p>
          <span className="text-warm-text-muted">Activated:</span>{' '}
          {formatDate(model.activated_at)}
        </p>
        <p>
          <span className="text-warm-text-muted">Documents:</span>{' '}
          {model.document_count.toLocaleString()}
        </p>
      </div>

      {runningTraining && (
        <div className="mt-4 p-3 bg-blue-50 rounded-lg border border-blue-100">
          <div className="flex items-center gap-2 mb-2">
            <span className="w-2 h-2 bg-blue-500 rounded-full animate-pulse" />
            <span className="text-sm font-medium text-warm-text-primary">
              Training in Progress
            </span>
          </div>
          <p className="text-sm text-warm-text-secondary mb-2">{runningTraining.name}</p>
          <div className="w-full bg-gray-200 rounded-full h-2">
            <div
              className="bg-blue-500 h-2 rounded-full transition-all duration-500"
              style={{ width: `${runningTraining.progress}%` }}
            />
          </div>
          <p className="text-xs text-warm-text-muted mt-1">
            {runningTraining.progress}% complete
          </p>
        </div>
      )}
    </div>
  )
}
