'use client'

import type { CrawlStats } from '../types'

export default function CrawlTab({
  stats,
  loading,
  onStartCrawl,
}: {
  stats: CrawlStats
  loading: boolean
  onStartCrawl: () => void
}) {
  return (
    <div className="space-y-6">
      {/* Crawl Status */}
      <div className="bg-slate-50 rounded-lg p-6">
        <div className="flex items-center justify-between mb-4">
          <div>
            <h3 className="text-lg font-semibold text-slate-900">Crawl-Status</h3>
            <p className="text-sm text-slate-500">
              Letzter Crawl: {stats.lastCrawlTime ? new Date(stats.lastCrawlTime).toLocaleString('de-DE') : 'Noch nie'}
            </p>
          </div>
          <div className={`px-3 py-1.5 rounded-full text-sm font-medium ${
            stats.crawlStatus === 'running' ? 'bg-blue-100 text-blue-700' :
            stats.crawlStatus === 'error' ? 'bg-red-100 text-red-700' :
            'bg-green-100 text-green-700'
          }`}>
            {stats.crawlStatus === 'running' ? '🔄 Läuft...' :
             stats.crawlStatus === 'error' ? '❌ Fehler' :
             '✅ Bereit'}
          </div>
        </div>
        <button
          onClick={onStartCrawl}
          disabled={loading || stats.crawlStatus === 'running'}
          className="px-6 py-3 bg-primary-600 text-white rounded-lg hover:bg-primary-700 transition-colors disabled:opacity-50 disabled:cursor-not-allowed flex items-center gap-2"
        >
          {loading ? (
            <>
              <svg className="w-5 h-5 animate-spin" fill="none" viewBox="0 0 24 24">
                <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4" />
                <path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z" />
              </svg>
              Crawl läuft...
            </>
          ) : (
            <>
              <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M14.752 11.168l-3.197-2.132A1 1 0 0010 9.87v4.263a1 1 0 001.555.832l3.197-2.132a1 1 0 000-1.664z" />
                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
              </svg>
              Crawl starten
            </>
          )}
        </button>
      </div>

      {/* Crawl Settings */}
      <div className="grid md:grid-cols-2 gap-6">
        <div className="bg-white border border-slate-200 rounded-lg p-6">
          <h4 className="font-semibold text-slate-900 mb-4">Crawl-Einstellungen</h4>
          <div className="space-y-4">
            <div>
              <label className="block text-sm font-medium text-slate-700 mb-1">Max. Seiten pro Crawl</label>
              <input type="number" defaultValue={500} className="w-full px-3 py-2 border border-slate-300 rounded-lg" />
            </div>
            <div>
              <label className="block text-sm font-medium text-slate-700 mb-1">Rate-Limit (Requests/Sek)</label>
              <input type="number" defaultValue={0.2} step={0.1} className="w-full px-3 py-2 border border-slate-300 rounded-lg" />
            </div>
            <div>
              <label className="block text-sm font-medium text-slate-700 mb-1">Max. Crawl-Tiefe</label>
              <input type="number" defaultValue={4} className="w-full px-3 py-2 border border-slate-300 rounded-lg" />
            </div>
          </div>
        </div>
        <div className="bg-white border border-slate-200 rounded-lg p-6">
          <h4 className="font-semibold text-slate-900 mb-4">Scheduler</h4>
          <div className="space-y-4">
            <div className="flex items-center gap-2">
              <input type="checkbox" id="autoSchedule" className="rounded border-slate-300" />
              <label htmlFor="autoSchedule" className="text-sm text-slate-700">Automatischer Crawl aktiviert</label>
            </div>
            <div>
              <label className="block text-sm font-medium text-slate-700 mb-1">Intervall</label>
              <select className="w-full px-3 py-2 border border-slate-300 rounded-lg">
                <option value="daily">Täglich</option>
                <option value="weekly">Wöchentlich</option>
                <option value="monthly">Monatlich</option>
              </select>
            </div>
          </div>
        </div>
      </div>
    </div>
  )
}