'use client'

import { useState } from 'react'
import { CookieCategory } from '../_hooks/useCookieBanner'

export function CategoryCard({
  category,
  onToggle,
}: {
  category: CookieCategory
  onToggle: (enabled: boolean) => void
}) {
  const [expanded, setExpanded] = useState(false)

  return (
    <div className="bg-white rounded-xl border border-gray-200 overflow-hidden">
      <div className="p-4 flex items-center justify-between">
        <div className="flex-1">
          <div className="flex items-center gap-2">
            <h4 className="font-semibold text-gray-900">{category.name}</h4>
            {category.required && (
              <span className="px-2 py-0.5 text-xs bg-gray-100 text-gray-500 rounded">Erforderlich</span>
            )}
            <span className="px-2 py-0.5 text-xs bg-blue-50 text-blue-600 rounded">
              {category.cookies.length} Cookies
            </span>
          </div>
          <p className="text-sm text-gray-500 mt-1">{category.description}</p>
        </div>
        <div className="flex items-center gap-4">
          <button
            onClick={() => setExpanded(!expanded)}
            className="text-sm text-purple-600 hover:underline"
          >
            {expanded ? 'Ausblenden' : 'Details'}
          </button>
          <label className="relative inline-flex items-center cursor-pointer">
            <input
              type="checkbox"
              checked={category.enabled}
              onChange={(e) => onToggle(e.target.checked)}
              disabled={category.required}
              className="sr-only peer"
            />
            <div className={`w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-purple-100 rounded-full peer ${
              category.enabled ? 'peer-checked:bg-purple-600' : ''
            } peer-disabled:opacity-50 after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:rounded-full after:h-5 after:w-5 after:transition-all ${
              category.enabled ? 'after:translate-x-full' : ''
            }`} />
          </label>
        </div>
      </div>

      {expanded && (
        <div className="border-t border-gray-100 p-4 bg-gray-50">
          <table className="w-full text-sm">
            <thead>
              <tr className="text-left text-gray-500">
                <th className="pb-2">Cookie</th>
                <th className="pb-2">Anbieter</th>
                <th className="pb-2">Zweck</th>
                <th className="pb-2">Ablauf</th>
              </tr>
            </thead>
            <tbody className="text-gray-700">
              {category.cookies.map(cookie => (
                <tr key={cookie.name}>
                  <td className="py-1 font-mono text-xs">{cookie.name}</td>
                  <td className="py-1">{cookie.provider}</td>
                  <td className="py-1">{cookie.purpose}</td>
                  <td className="py-1">{cookie.expiry}</td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>
      )}
    </div>
  )
}
