'use client'

import type { Profile } from '../types'

interface ProfileTabProps {
  profile: Profile | null
}

export function ProfileTab({ profile }: ProfileTabProps) {
  return (
    <div className="max-w-2xl space-y-6">
      <div className="bg-white rounded-xl border border-slate-200 p-6">
        <h3 className="font-semibold text-slate-900 mb-4">Relevanzprofil</h3>

        <div className="space-y-4">
          <div>
            <label className="block text-sm font-medium text-slate-700 mb-2">
              Prioritaeten (wichtige Themen)
            </label>
            <textarea
              className="w-full p-3 border border-slate-200 rounded-lg text-sm focus:ring-2 focus:ring-green-500 focus:border-green-500"
              rows={4}
              defaultValue={profile?.priorities?.join('\n') || ''}
              placeholder="Ein Thema pro Zeile..."
            />
            <p className="text-xs text-slate-500 mt-1">Alerts zu diesen Themen werden hoeher bewertet.</p>
          </div>

          <div>
            <label className="block text-sm font-medium text-slate-700 mb-2">
              Ausschluesse (unerwuenschte Themen)
            </label>
            <textarea
              className="w-full p-3 border border-slate-200 rounded-lg text-sm focus:ring-2 focus:ring-green-500 focus:border-green-500"
              rows={4}
              defaultValue={profile?.exclusions?.join('\n') || ''}
              placeholder="Ein Thema pro Zeile..."
            />
            <p className="text-xs text-slate-500 mt-1">Alerts zu diesen Themen werden niedriger bewertet.</p>
          </div>

          <div className="grid grid-cols-2 gap-4">
            <div>
              <label className="block text-sm font-medium text-slate-700 mb-2">
                Schwellenwert KEEP
              </label>
              <select
                className="w-full p-3 border border-slate-200 rounded-lg text-sm focus:ring-2 focus:ring-green-500 focus:border-green-500"
                defaultValue={profile?.policies?.keep_threshold || 0.7}
              >
                <option value={0.8}>80% (sehr streng)</option>
                <option value={0.7}>70% (empfohlen)</option>
                <option value={0.6}>60% (weniger streng)</option>
              </select>
            </div>
            <div>
              <label className="block text-sm font-medium text-slate-700 mb-2">
                Schwellenwert DROP
              </label>
              <select
                className="w-full p-3 border border-slate-200 rounded-lg text-sm focus:ring-2 focus:ring-green-500 focus:border-green-500"
                defaultValue={profile?.policies?.drop_threshold || 0.3}
              >
                <option value={0.4}>40% (strenger)</option>
                <option value={0.3}>30% (empfohlen)</option>
                <option value={0.2}>20% (lockerer)</option>
              </select>
            </div>
          </div>

          <button className="px-4 py-2 bg-green-600 text-white rounded-lg text-sm font-medium hover:bg-green-700">
            Profil speichern
          </button>
        </div>
      </div>
    </div>
  )
}