import { useEffect, useState } from 'react'
import axios from 'axios'
import { Clock, Activity, HardDrive, BarChart, AlertCircle, CheckCircle } from 'lucide-react'
import type { LucideIcon } from 'lucide-react'

interface Job {
  id: string
  type: 'cd' | 'dvd' | 'bluray'
  status: 'pending' | 'processing' | 'completed' | 'failed'
  device: string
  startTime: string
  endTime?: string
  progress: number
}

interface Device {
  id: string
  name: string
  type: 'cd' | 'dvd' | 'bluray'
  path: string
  status: 'empty' | 'ready' | 'ripping'
}

const API_URL = 'http://localhost:8000'

async function fetchJobs(): Promise<Job[]> {
  try {
    const response = await axios.get(`${API_URL}/jobs`)
    return response.data
  } catch {
    return []
  }
}

async function fetchDevices(): Promise<Device[]> {
  try {
    const response = await axios.get(`${API_URL}/devices`)
    return response.data
  } catch {
    return []
  }
}

function StatusBadge({ status }: { status: string }) {
  const styles = {
    pending: 'bg-yellow-100 text-yellow-800',
    processing: 'bg-blue-100 text-blue-800',
    completed: 'bg-green-100 text-green-800',
    failed: 'bg-red-100 text-red-800',
  }
  
  const labels = {
    pending: 'In Warteschlange',
    processing: 'In Bearbeitung',
    completed: 'Abgeschlossen',
    failed: 'Fehlgeschlagen',
  }
  
  return (
    <span className={`px-2 py-1 rounded-full text-xs font-medium ${styles[status as keyof typeof styles] || 'bg-gray-100 text-gray-800'}`}>
      {labels[status as keyof typeof labels] || status}
    </span>
  )
}

function ProgressBar({ progress }: { progress: number }) {
  return (
    <div className="w-full bg-gray-200 rounded-full h-2.5">
      <div 
        className="bg-blue-600 h-2.5 rounded-full transition-all duration-300" 
        style={{ width: `${progress}%` }}
      />
    </div>
  )
}

export default function Dashboard() {
  const [jobs, setJobs] = useState<Job[]>([])
  const [devices, setDevices] = useState<Device[]>([])
  const [loading, setLoading] = useState(true)

  useEffect(() => {
    const loadData = async () => {
      try {
        const [jobsData, devicesData] = await Promise.all([
          fetchJobs(),
          fetchDevices()
        ])
        setJobs(jobsData)
        setDevices(devicesData)
      } finally {
        setLoading(false)
      }
    }

    loadData()
    const interval = setInterval(loadData, 5000)
    return () => clearInterval(interval)
  }, [])

  const stats = {
    pending: jobs.filter(j => j.status === 'pending').length,
    processing: jobs.filter(j => j.status === 'processing').length,
    completed: jobs.filter(j => j.status === 'completed').length,
    failed: jobs.filter(j => j.status === 'failed').length,
  }

  if (loading) {
    return (
      <div className="flex items-center justify-center min-h-screen">
        <div className="animate-spin rounded-full h-12 w-12 border-b-2 border-blue-600"></div>
      </div>
    )
  }

  return (
    <div className="p-6 max-w-7xl mx-auto">
      <div className="mb-8">
        <h1 className="text-3xl font-bold text-gray-900">Dashboard</h1>
        <p className="text-gray-600 mt-1">Übersicht über alle Ripping-Jobs und Geräte</p>
      </div>

      {/* Stats Cards */}
      <div className="grid grid-cols-2 md:grid-cols-4 gap-4 mb-8">
        <StatCard 
          icon={Clock} 
          label="Warteschlange" 
          value={stats.pending.toString()} 
          color="yellow" 
        />
        <StatCard 
          icon={Activity} 
          label="In Bearbeitung" 
          value={stats.processing.toString()} 
          color="blue" 
        />
        <StatCard 
          icon={CheckCircle} 
          label="Abgeschlossen" 
          value={stats.completed.toString()} 
          color="green" 
        />
        <StatCard 
          icon={AlertCircle} 
          label="Fehlgeschlagen" 
          value={stats.failed.toString()} 
          color="red" 
        />
      </div>

      {/* Devices */}
      <div className="mb-8">
        <h2 className="text-xl font-semibold text-gray-900 mb-4">Geräte</h2>
        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
          {devices.length === 0 ? (
            <div className="text-gray-500">Keine Geräte gefunden</div>
          ) : (
            devices.map(device => (
              <div key={device.id} className="bg-white p-4 rounded-lg shadow">
                <div className="flex items-center justify-between mb-2">
                  <h3 className="font-medium">{device.name}</h3>
                  <span className="text-sm text-gray-500 capitalize">{device.type}</span>
                </div>
                <div className="flex items-center gap-2 text-sm text-gray-600">
                  <HardDrive size={16} />
                  <span>{device.path}</span>
                </div>
                <div className="mt-2">
                  <span className={`px-2 py-1 rounded text-xs font-medium ${
                    device.status === 'empty' ? 'bg-gray-100 text-gray-600' :
                    device.status === 'ready' ? 'bg-green-100 text-green-700' :
                    'bg-blue-100 text-blue-700'
                  }`}>
                    {device.status === 'empty' ? 'Leer' :
                     device.status === 'ready' ? 'Bereit' :
                     'Rippt'}
                  </span>
                </div>
              </div>
            ))
          )}
        </div>
      </div>

      {/* Recent Jobs */}
      <div>
        <h2 className="text-xl font-semibold text-gray-900 mb-4">Neueste Jobs</h2>
        <div className="bg-white rounded-lg shadow overflow-hidden">
          <table className="w-full">
            <thead className="bg-gray-50">
              <tr>
                <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">Typ</th>
                <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">Status</th>
                <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">Gerät</th>
                <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">Fortschritt</th>
                <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">Startzeit</th>
              </tr>
            </thead>
            <tbody className="divide-y divide-gray-200">
              {jobs.length === 0 ? (
                <tr>
                  <td colSpan={5} className="px-6 py-4 text-center text-gray-500">
                    Keine Jobs vorhanden
                  </td>
                </tr>
              ) : (
                jobs.slice(0, 10).map(job => (
                  <tr key={job.id} className="hover:bg-gray-50">
                    <td className="px-6 py-4 whitespace-nowrap text-sm font-medium capitalize">{job.type}</td>
                    <td className="px-6 py-4 whitespace-nowrap"><StatusBadge status={job.status} /></td>
                    <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-500">{job.device}</td>
                    <td className="px-6 py-4 whitespace-nowrap">
                      <ProgressBar progress={job.progress} />
                    </td>
                    <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
                      {new Date(job.startTime).toLocaleString('de-DE')}
                    </td>
                  </tr>
                ))
              )}
            </tbody>
          </table>
        </div>
      </div>
    </div>
  )
}

function StatCard({ icon: Icon, label, value, color }: { icon: LucideIcon, label: string, value: string, color: string }) {
  const colors = {
    yellow: 'bg-yellow-50 text-yellow-600',
    blue: 'bg-blue-50 text-blue-600',
    green: 'bg-green-50 text-green-600',
    red: 'bg-red-50 text-red-600',
  }

  return (
    <div className={`p-4 rounded-lg ${colors[color as keyof typeof colors]}`}>
      <div className="flex items-center gap-3">
        <Icon size={24} />
        <div>
          <p className="text-sm font-medium opacity-90">{label}</p>
          <p className="text-2xl font-bold">{value}</p>
        </div>
      </div>
    </div>
  )
}