'use client'

import Link from'next/link'
import {
 FolderArchive,
 FileText,
 FileImage,
 FileSpreadsheet,
 FilePieChart,
 File,
 Download,
 ArrowRight,
} from'lucide-react'
import { createClient } from'@/lib/supabase/client'
import { formatFileSize } from'@/lib/repository-types'

interface DocSummary {
 id: string
 title: string
 original_filename: string
 mime_type: string | null
 file_size: number | null
 created_at: string
 storage_key: string
}

interface Props {
 projectId: string
 documents: DocSummary[]
 totalCount: number
}

function getMimeIcon(mimeType: string | null) {
 if (!mimeType) return <File size={14} className="text-muted-foreground shrink-0"/>
 if (mimeType.startsWith('image/')) return <FileImage size={14} className="text-primary shrink-0"/>
 if (mimeType.includes('spreadsheet') || mimeType.includes('excel') || mimeType ==='text/csv')
 return <FileSpreadsheet size={14} className="text-success shrink-0"/>
 if (mimeType ==='application/pdf') return <FilePieChart size={14} className="text-destructive shrink-0"/>
 return <FileText size={14} className="text-muted-foreground shrink-0"/>
}

async function downloadDoc(storageKey: string, filename: string) {
 const supabase = createClient()
 const { data, error } = await supabase.storage
 .from('documents')
 .createSignedUrl(storageKey, 60)
 if (error || !data?.signedUrl) return
 const a = document.createElement('a')
 a.href = data.signedUrl
 a.download = filename
 a.click()
}

export default function ProjectDocumentsSummary({ projectId, documents, totalCount }: Props) {
 return (
 <div className="bg-card border border-border rounded-lg overflow-hidden">
 {/* Header */}
 <div className="flex items-center justify-between px-4 py-3 border-b border-border">
 <div className="flex items-center gap-2">
 <FolderArchive size={15} className="text-primary"/>
 <h2 className="font-semibold text-sm">Verknüpfte Dokumente</h2>
 {totalCount > 0 && (
 <span className="text-xs font-semibold text-primary bg-secondary rounded-full px-2 py-0.5">
 {totalCount}
 </span>
 )}
 </div>
 <Link
 href={`/repository/projects?project=${projectId}`}
 className="inline-flex items-center gap-1 text-xs text-primary hover:underline font-medium"
 >
 Alle anzeigen
 <ArrowRight size={11} />
 </Link>
 </div>

 {/* Document list */}
 {documents.length === 0 ? (
 <div className="py-8 text-center text-muted-foreground">
 <File size={24} className="mx-auto mb-2 opacity-30"/>
 <p className="text-xs">Noch keine Dokumente für dieses Projekt</p>
 <Link
 href={`/repository/projects?project=${projectId}`}
 className="mt-2 inline-flex items-center gap-1 text-xs text-primary hover:underline"
 >
 Dokument hochladen
 </Link>
 </div>
 ) : (
 <ul className="divide-y divide-border">
 {documents.map((doc) => (
 <li key={doc.id} className="flex items-center gap-3 px-4 py-3 hover:bg-background transition-colors">
 {getMimeIcon(doc.mime_type)}
 <div className="flex-1 min-w-0">
 <p className="text-xs font-medium text-foreground truncate">{doc.title}</p>
 <p className="text-[10px] text-muted-foreground font-mono">
 {formatFileSize(doc.file_size)}
 {'·'}
 {new Date(doc.created_at).toLocaleDateString('de-DE')}
 </p>
 </div>
 <button
 onClick={() => downloadDoc(doc.storage_key, doc.original_filename)}
 title="Herunterladen"
 className="p-1.5 rounded hover:bg-secondary text-muted-foreground hover:text-primary transition-colors shrink-0"
 >
 <Download size={13} />
 </button>
 </li>
 ))}
 </ul>
 )}

 {totalCount > documents.length && (
 <div className="px-4 py-2.5 border-t border-border text-center">
 <Link
 href={`/repository/projects?project=${projectId}`}
 className="text-xs text-primary hover:underline"
 >
 + {totalCount - documents.length} weitere Dokumente
 </Link>
 </div>
 )}
 </div>
 )
}