'use client'

import { GlassCard } from './GlassCard'

export interface AbiturDokument {
  id: string
  dateiname: string
  fach: string
  jahr: number
  bundesland: string
  niveau: string
  dokumenttyp: string
  aufgabentyp?: string
  thema?: string
  download_url: string
  preview_url?: string
  file_size?: number
  page_count?: number
}

interface DokumentCardProps {
  dokument: AbiturDokument
  onPreview: () => void
  onUseAsTemplate: () => void
  delay?: number
  isDark: boolean
}

export function DokumentCard({ dokument, onPreview, onUseAsTemplate, delay = 0, isDark }: DokumentCardProps) {
  const typeColor = dokument.dokumenttyp === 'Erwartungshorizont' ? '#22c55e' : '#3b82f6'

  return (
    <GlassCard delay={delay} isDark={isDark}>
      <div className="flex flex-col h-full">
        {/* Header */}
        <div className="flex items-start justify-between mb-3">
          <div className="flex-1 min-w-0">
            <h3 className={`font-semibold truncate ${isDark ? 'text-white' : 'text-slate-900'}`}>
              {dokument.fach} {dokument.jahr} {dokument.niveau}
            </h3>
            <p className={`text-sm truncate ${isDark ? 'text-white/60' : 'text-slate-600'}`}>
              {dokument.thema || dokument.aufgabentyp || dokument.dateiname}
            </p>
          </div>
          <span
            className="px-2 py-1 rounded-full text-xs font-medium flex-shrink-0 ml-2"
            style={{ backgroundColor: `${typeColor}20`, color: typeColor }}
          >
            {dokument.dokumenttyp === 'Erwartungshorizont' ? 'EH' : 'Aufgabe'}
          </span>
        </div>

        {/* Meta */}
        <div className={`flex items-center gap-3 text-xs mb-4 ${isDark ? 'text-white/40' : 'text-slate-500'}`}>
          <span>{dokument.bundesland}</span>
          {dokument.page_count && <span>{dokument.page_count} Seiten</span>}
        </div>

        {/* Actions */}
        <div className="flex gap-2 mt-auto">
          <button
            onClick={(e) => { e.stopPropagation(); onPreview() }}
            className={`flex-1 px-3 py-2 rounded-xl text-sm font-medium transition-colors ${
              isDark ? 'bg-white/10 text-white hover:bg-white/20' : 'bg-slate-100 text-slate-700 hover:bg-slate-200'
            }`}
          >
            Vorschau
          </button>
          <button
            onClick={(e) => { e.stopPropagation(); onUseAsTemplate() }}
            className="flex-1 px-3 py-2 rounded-xl text-sm font-medium bg-gradient-to-r from-purple-500 to-pink-500 text-white hover:shadow-lg hover:shadow-purple-500/30 transition-all"
          >
            Verwenden
          </button>
        </div>
      </div>
    </GlassCard>
  )
}