'use client'

import type { Rule } from './types'

interface RulesTabProps {
  rules: Rule[]
}

export default function RulesTab({ rules }: RulesTabProps) {
  return (
    <div className="space-y-4">
      <div className="flex justify-between items-center">
        <h3 className="font-semibold text-slate-900">Filterregeln</h3>
        <button className="px-4 py-2 bg-primary-600 text-white rounded-lg text-sm font-medium hover:bg-primary-700">
          + Regel erstellen
        </button>
      </div>

      <div className="bg-white rounded-xl border border-slate-200 divide-y divide-slate-100">
        {rules.map((rule) => (
          <div key={rule.id} className="p-4 flex items-center gap-4">
            <div className="text-slate-400 cursor-grab">
              <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 6h16M4 12h16M4 18h16" />
              </svg>
            </div>
            <div className="flex-1">
              <div className="font-medium text-slate-900">{rule.name}</div>
              <div className="text-sm text-slate-500">
                Wenn: {rule.conditions[0]?.field} {rule.conditions[0]?.operator} &quot;{rule.conditions[0]?.value}&quot;
              </div>
            </div>
            <span className={`px-3 py-1 rounded text-xs font-semibold uppercase ${
              rule.action_type === 'keep' ? 'bg-green-100 text-green-800' :
              rule.action_type === 'drop' ? 'bg-red-100 text-red-800' :
              rule.action_type === 'email' ? 'bg-blue-100 text-blue-800' :
              'bg-purple-100 text-purple-800'
            }`}>
              {rule.action_type}
            </span>
            <div
              className={`w-12 h-6 rounded-full relative cursor-pointer transition-colors ${
                rule.is_active ? 'bg-green-500' : 'bg-slate-300'
              }`}
            >
              <div
                className={`absolute w-5 h-5 bg-white rounded-full top-0.5 transition-all ${
                  rule.is_active ? 'left-6' : 'left-0.5'
                }`}
              />
            </div>
          </div>
        ))}
      </div>
    </div>
  )
}