'use client'

import { ReportType, ProcessingActivity, Vendor } from '@/lib/sdk/vendor-compliance'
import { StatusBadge } from './StatusBadge'
import { RiskBadge } from './RiskBadge'

export function ScopePanel({
  selectedReportType,
  processingActivities,
  vendors,
  selectedVendors,
  selectedActivities,
  onToggleVendor,
  onToggleActivity,
  onSelectAllVendors,
  onSelectAllActivities,
}: {
  selectedReportType: ReportType
  processingActivities: ProcessingActivity[]
  vendors: Vendor[]
  selectedVendors: string[]
  selectedActivities: string[]
  onToggleVendor: (id: string) => void
  onToggleActivity: (id: string) => void
  onSelectAllVendors: () => void
  onSelectAllActivities: () => void
}) {
  if (selectedReportType === 'VVT_EXPORT' || selectedReportType === 'ROPA' || selectedReportType === 'DPIA_INPUT') {
    return (
      <div className="bg-white dark:bg-gray-800 rounded-lg shadow">
        <div className="px-6 py-4 border-b border-gray-200 dark:border-gray-700 flex items-center justify-between">
          <h2 className="text-lg font-semibold text-gray-900 dark:text-white">Verarbeitungen auswählen</h2>
          <button onClick={onSelectAllActivities} className="text-sm text-blue-600 hover:text-blue-800 dark:text-blue-400">
            Alle auswählen
          </button>
        </div>
        <div className="p-4 max-h-64 overflow-y-auto">
          {processingActivities.length === 0 ? (
            <p className="text-sm text-gray-500 dark:text-gray-400 text-center py-4">Keine Verarbeitungen vorhanden</p>
          ) : (
            <div className="space-y-2">
              {processingActivities.map((activity) => (
                <label key={activity.id} className="flex items-center gap-3 p-2 rounded hover:bg-gray-50 dark:hover:bg-gray-700/50 cursor-pointer">
                  <input
                    type="checkbox"
                    checked={selectedActivities.includes(activity.id)}
                    onChange={() => onToggleActivity(activity.id)}
                    className="h-4 w-4 text-blue-600 rounded border-gray-300 focus:ring-blue-500"
                  />
                  <div className="flex-1 min-w-0">
                    <p className="text-sm font-medium text-gray-900 dark:text-white truncate">{activity.name.de}</p>
                    <p className="text-xs text-gray-500 dark:text-gray-400">{activity.vvtId} · {activity.status}</p>
                  </div>
                  <StatusBadge status={activity.status} />
                </label>
              ))}
            </div>
          )}
        </div>
      </div>
    )
  }

  if (selectedReportType === 'VENDOR_AUDIT') {
    return (
      <div className="bg-white dark:bg-gray-800 rounded-lg shadow">
        <div className="px-6 py-4 border-b border-gray-200 dark:border-gray-700 flex items-center justify-between">
          <h2 className="text-lg font-semibold text-gray-900 dark:text-white">Vendor auswählen</h2>
          <button onClick={onSelectAllVendors} className="text-sm text-blue-600 hover:text-blue-800 dark:text-blue-400">
            Alle auswählen
          </button>
        </div>
        <div className="p-4 max-h-64 overflow-y-auto">
          {vendors.length === 0 ? (
            <p className="text-sm text-gray-500 dark:text-gray-400 text-center py-4">Keine Vendors vorhanden</p>
          ) : (
            <div className="space-y-2">
              {vendors.map((vendor) => (
                <label key={vendor.id} className="flex items-center gap-3 p-2 rounded hover:bg-gray-50 dark:hover:bg-gray-700/50 cursor-pointer">
                  <input
                    type="checkbox"
                    checked={selectedVendors.includes(vendor.id)}
                    onChange={() => onToggleVendor(vendor.id)}
                    className="h-4 w-4 text-blue-600 rounded border-gray-300 focus:ring-blue-500"
                  />
                  <div className="flex-1 min-w-0">
                    <p className="text-sm font-medium text-gray-900 dark:text-white truncate">{vendor.name}</p>
                    <p className="text-xs text-gray-500 dark:text-gray-400">{vendor.country} · {vendor.serviceCategory}</p>
                  </div>
                  <RiskBadge score={vendor.inherentRiskScore} />
                </label>
              ))}
            </div>
          )}
        </div>
      </div>
    )
  }

  return null
}
