'use client'

import type { Document, Tab } from '../_types'

export function DocumentsTab({
  loading,
  documents,
  setSelectedDocument,
  setActiveTab,
}: {
  loading: boolean
  documents: Document[]
  setSelectedDocument: (id: string) => void
  setActiveTab: (t: Tab) => void
}) {
  return (
    <div className="p-6">
      <div className="flex items-center justify-between mb-6">
        <h2 className="text-lg font-semibold text-slate-900">Dokumente verwalten</h2>
        <button className="px-4 py-2 bg-purple-600 text-white rounded-lg hover:bg-purple-700 transition-colors text-sm font-medium">
          + Neues Dokument
        </button>
      </div>

      {loading ? (
        <div className="text-center py-12 text-slate-500">Lade Dokumente...</div>
      ) : documents.length === 0 ? (
        <div className="text-center py-12 text-slate-500">
          Keine Dokumente vorhanden
        </div>
      ) : (
        <div className="overflow-x-auto">
          <table className="w-full">
            <thead>
              <tr className="border-b border-slate-200">
                <th className="text-left py-3 px-4 text-sm font-medium text-slate-500">Typ</th>
                <th className="text-left py-3 px-4 text-sm font-medium text-slate-500">Name</th>
                <th className="text-left py-3 px-4 text-sm font-medium text-slate-500">Beschreibung</th>
                <th className="text-left py-3 px-4 text-sm font-medium text-slate-500">Pflicht</th>
                <th className="text-left py-3 px-4 text-sm font-medium text-slate-500">Erstellt</th>
                <th className="text-right py-3 px-4 text-sm font-medium text-slate-500">Aktionen</th>
              </tr>
            </thead>
            <tbody>
              {documents.map((doc) => (
                <tr key={doc.id} className="border-b border-slate-100 hover:bg-slate-50">
                  <td className="py-3 px-4">
                    <span className="px-2 py-1 bg-slate-100 text-slate-700 rounded text-xs font-medium">
                      {doc.type}
                    </span>
                  </td>
                  <td className="py-3 px-4 font-medium text-slate-900">{doc.name}</td>
                  <td className="py-3 px-4 text-slate-600 text-sm">{doc.description}</td>
                  <td className="py-3 px-4">
                    {doc.mandatory ? (
                      <span className="text-green-600">Ja</span>
                    ) : (
                      <span className="text-slate-400">Nein</span>
                    )}
                  </td>
                  <td className="py-3 px-4 text-sm text-slate-500">
                    {new Date(doc.created_at).toLocaleDateString('de-DE')}
                  </td>
                  <td className="py-3 px-4 text-right">
                    <button
                      onClick={() => {
                        setSelectedDocument(doc.id)
                        setActiveTab('versions')
                      }}
                      className="text-purple-600 hover:text-purple-700 text-sm font-medium mr-3"
                    >
                      Versionen
                    </button>
                    <button className="text-slate-500 hover:text-slate-700 text-sm">
                      Bearbeiten
                    </button>
                  </td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>
      )}
    </div>
  )
}