'use client'

import { EMAIL_TEMPLATES, EMAIL_CATEGORIES, CATEGORY_ICONS } from './types'

export default function EmailsTab() {
  return (
    <div className="p-6">
      <div className="flex items-center justify-between mb-6">
        <div>
          <h2 className="text-lg font-semibold text-slate-900">E-Mail Vorlagen</h2>
          <p className="text-sm text-slate-500 mt-1">16 Lifecycle-Vorlagen für automatisierte Kommunikation</p>
        </div>
        <button className="px-4 py-2 bg-primary-600 text-white rounded-lg hover:bg-primary-700 transition-colors text-sm font-medium">
          + Neue Vorlage
        </button>
      </div>

      {/* Category Filter */}
      <div className="flex flex-wrap gap-2 mb-6">
        <span className="text-sm text-slate-500 py-1">Filter:</span>
        {EMAIL_CATEGORIES.map((cat) => (
          <span key={cat.key} className={`px-3 py-1 rounded-full text-xs font-medium ${cat.color}`}>
            {cat.label}
          </span>
        ))}
      </div>

      {/* Templates grouped by category */}
      {EMAIL_CATEGORIES.map((category) => (
        <div key={category.key} className="mb-8">
          <h3 className="text-sm font-semibold text-slate-700 uppercase tracking-wider mb-3 flex items-center gap-2">
            <span className={`w-2 h-2 rounded-full ${category.color.split(' ')[0]}`}></span>
            {category.label}
          </h3>
          <div className="grid gap-3">
            {EMAIL_TEMPLATES
              .filter((t) => t.category === category.key)
              .map((template) => (
                <div
                  key={template.key}
                  className="border border-slate-200 rounded-lg p-4 flex items-center justify-between hover:border-primary-300 transition-colors bg-white"
                >
                  <div className="flex items-center gap-4">
                    <div className={`w-10 h-10 rounded-lg ${category.color} flex items-center justify-center text-lg`}>
                      {CATEGORY_ICONS[category.key]}
                    </div>
                    <div>
                      <h4 className="font-medium text-slate-900">{template.name}</h4>
                      <p className="text-sm text-slate-500">{template.description}</p>
                    </div>
                  </div>
                  <div className="flex items-center gap-2">
                    <span className="px-2 py-1 bg-green-100 text-green-700 rounded text-xs">Aktiv</span>
                    <button className="px-3 py-1.5 text-sm text-slate-600 hover:text-slate-900 border border-slate-300 rounded-lg hover:border-slate-400">
                      Bearbeiten
                    </button>
                    <button className="px-3 py-1.5 text-sm text-slate-600 hover:text-slate-900 border border-slate-300 rounded-lg hover:border-slate-400">
                      Vorschau
                    </button>
                  </div>
                </div>
              ))}
          </div>
        </div>
      ))}
    </div>
  )
}