'use client'

import { useState, useEffect } from 'react'
import { useSDK } from '@/lib/sdk'

interface Vendor {
  id: string
  vendor_name: string
  vendor_url: string | null
  category_key: string
  description_de: string | null
  description_en: string | null
  cookie_names: string[]
  retention_days: number | null
  is_active: boolean
}

const CATEGORY_LABELS: Record<string, { label: string; color: string }> = {
  necessary: { label: 'Notwendig', color: 'bg-green-100 text-green-700' },
  functional: { label: 'Funktional', color: 'bg-blue-100 text-blue-700' },
  statistics: { label: 'Statistik', color: 'bg-yellow-100 text-yellow-700' },
  marketing: { label: 'Marketing', color: 'bg-red-100 text-red-700' },
}

export function VendorTable({ siteId }: { siteId?: string }) {
  const { projectId } = useSDK()
  const [vendors, setVendors] = useState<Vendor[]>([])
  const [loading, setLoading] = useState(true)
  const [expandedId, setExpandedId] = useState<string | null>(null)

  useEffect(() => {
    const sid = siteId || 'preview-test-site'
    fetch(`/api/sdk/v1/banner/admin/sites/${sid}/vendors`)
      .then(r => r.ok ? r.json() : [])
      .then(data => setVendors(Array.isArray(data) ? data : []))
      .catch(() => setVendors([]))
      .finally(() => setLoading(false))
  }, [siteId])

  // Group by category
  const grouped = vendors.reduce<Record<string, Vendor[]>>((acc, v) => {
    const key = v.category_key || 'other'
    if (!acc[key]) acc[key] = []
    acc[key].push(v)
    return acc
  }, {})

  if (loading) {
    return <div className="text-center py-12 text-gray-400">Lade Verarbeiter...</div>
  }

  if (vendors.length === 0) {
    return (
      <div className="text-center py-12">
        <p className="text-gray-400 mb-3">Keine Verarbeiter konfiguriert.</p>
        <p className="text-xs text-gray-400">
          Nutzen Sie den Website-Scanner oder fuegen Sie Verarbeiter manuell hinzu.
        </p>
      </div>
    )
  }

  return (
    <div className="space-y-6">
      <div className="flex items-center justify-between">
        <div>
          <h3 className="font-semibold text-gray-900">Verarbeiter-Uebersicht</h3>
          <p className="text-xs text-gray-500 mt-1">{vendors.length} Dienste in {Object.keys(grouped).length} Kategorien</p>
        </div>
      </div>

      {Object.entries(grouped).map(([catKey, catVendors]) => {
        const catInfo = CATEGORY_LABELS[catKey] || { label: catKey, color: 'bg-gray-100 text-gray-700' }
        return (
          <div key={catKey} className="border border-gray-200 rounded-xl overflow-hidden">
            <div className="bg-gray-50 px-4 py-3 flex items-center gap-3">
              <span className={`px-2 py-0.5 text-xs font-medium rounded-full ${catInfo.color}`}>
                {catInfo.label}
              </span>
              <span className="text-xs text-gray-500">{catVendors.length} Dienste</span>
            </div>
            <table className="w-full text-sm">
              <thead>
                <tr className="border-b border-gray-100 text-left text-xs text-gray-500">
                  <th className="px-4 py-2 font-medium">Anbieter</th>
                  <th className="px-4 py-2 font-medium">Zweck</th>
                  <th className="px-4 py-2 font-medium">Cookies</th>
                  <th className="px-4 py-2 font-medium">Aufbewahrung</th>
                  <th className="px-4 py-2 font-medium">Datenschutz</th>
                </tr>
              </thead>
              <tbody className="divide-y divide-gray-50">
                {catVendors.map(v => (
                  <tr key={v.id} className="hover:bg-gray-50/50">
                    <td className="px-4 py-2.5">
                      <button onClick={() => setExpandedId(expandedId === v.id ? null : v.id)}
                        className="font-medium text-gray-900 hover:text-purple-600 text-left">
                        {v.vendor_name}
                      </button>
                      {expandedId === v.id && v.cookie_names?.length > 0 && (
                        <div className="mt-1 flex flex-wrap gap-1">
                          {v.cookie_names.map(c => (
                            <span key={c} className="px-1.5 py-0.5 text-[10px] bg-gray-100 text-gray-600 rounded font-mono">
                              {c}
                            </span>
                          ))}
                        </div>
                      )}
                    </td>
                    <td className="px-4 py-2.5 text-xs text-gray-600 max-w-[200px] truncate">
                      {v.description_de || '-'}
                    </td>
                    <td className="px-4 py-2.5 text-xs text-gray-500">
                      {v.cookie_names?.length || 0}
                    </td>
                    <td className="px-4 py-2.5 text-xs text-gray-500">
                      {v.retention_days ? `${v.retention_days} Tage` : '-'}
                    </td>
                    <td className="px-4 py-2.5">
                      {v.vendor_url ? (
                        <a href={v.vendor_url} target="_blank" rel="noopener noreferrer"
                          className="text-xs text-purple-600 hover:underline">
                          Link
                        </a>
                      ) : (
                        <span className="text-xs text-gray-400">-</span>
                      )}
                    </td>
                  </tr>
                ))}
              </tbody>
            </table>
          </div>
        )
      })}
    </div>
  )
}