'use client'

import React from 'react'
import Link from 'next/link'

export default function AgentSessionsPage() {
  return (
    <div className="p-8 max-w-5xl">
      <div className="flex items-center gap-4 mb-8">
        <Link href="/sdk/agents" className="text-gray-400 hover:text-gray-600 transition-colors">
          <svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 19l-7-7 7-7" />
          </svg>
        </Link>
        <div>
          <h1 className="text-2xl font-bold text-gray-900">Agent-Sessions</h1>
          <p className="text-gray-500 mt-1">Chat-Verlaeufe und Session-Management</p>
        </div>
      </div>

      <div className="bg-white border border-gray-200 rounded-xl p-12 text-center">
        <svg className="w-20 h-20 text-gray-300 mx-auto mb-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5}
            d="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z" />
        </svg>
        <h2 className="text-xl font-medium text-gray-900 mb-2">Sessions-Tracking</h2>
        <p className="text-gray-500 max-w-md mx-auto">
          Das Session-Tracking fuer Compliance-Agenten wird in einer zukuenftigen Version implementiert.
          Hier werden Chat-Verlaeufe, Antwortqualitaet und Nutzer-Feedback angezeigt.
        </p>
      </div>
    </div>
  )
}