"use client";

import { useEffect, useState } from "react";
import Link from "next/link";
import { useParams } from "next/navigation";
import { Download, ExternalLink } from "lucide-react";

import DetailSection from "@/components/common/DetailSection";
import DocumentTypeBadge from "@/components/knowledge/DocumentTypeBadge";
import TagList from "@/components/knowledge/TagList";
import { buttonVariants } from "@/components/ui/button";
import { api } from "@/lib/api";
import type { KnowledgeDocument } from "@/types/knowledge";

function fileSize(value: number) {
  if (!value) return "-";
  if (value < 1024 * 1024) return `${Math.round(value / 1024)} KB`;
  return `${(value / 1024 / 1024).toFixed(1)} MB`;
}

export default function KnowledgeDocumentDetailPage() {
  const params = useParams<{ id: string }>();
  const [document, setDocument] = useState<KnowledgeDocument | null>(null);
  const [error, setError] = useState("");

  useEffect(() => {
    api.get<KnowledgeDocument>(`/knowledge/documents/${params.id}`)
      .then((response) => setDocument(response.data))
      .catch(() => setError("Dokument konnte nicht geladen werden"));
  }, [params.id]);

  if (error) return <p className="text-red-600">{error}</p>;
  if (!document) return <p className="text-slate-500">Dokument wird geladen...</p>;

  return (
    <div className="space-y-6">
      <div className="flex flex-col gap-4 lg:flex-row lg:items-center lg:justify-between">
        <div>
          <h1 className="text-3xl font-bold text-slate-950">{document.title}</h1>
          <p className="mt-1 text-sm text-slate-500">{document.manufacturer.name}{document.device ? ` · ${document.device.name}` : ""}</p>
        </div>
        <div className="flex gap-2">
          {document.external_url && <Link href={document.external_url} target="_blank" className={buttonVariants({ variant: "outline" })}><ExternalLink size={16} />Extern</Link>}
          {document.file_name && <Link href={`/api/knowledge/documents/${document.id}/download`} className={buttonVariants()}><Download size={16} />Download</Link>}
        </div>
      </div>
      <DetailSection title="Dokument">
        <dl className="grid gap-3 text-sm md:grid-cols-2">
          <div><dt className="text-slate-500">Typ</dt><dd className="mt-1"><DocumentTypeBadge type={document.document_type} /></dd></div>
          <div><dt className="text-slate-500">Sprache</dt><dd className="font-medium">{document.language}</dd></div>
          <div><dt className="text-slate-500">Dateiname</dt><dd className="font-medium">{document.file_name || "-"}</dd></div>
          <div><dt className="text-slate-500">Dateigröße</dt><dd className="font-medium">{fileSize(document.file_size)}</dd></div>
          <div><dt className="text-slate-500">SHA-256</dt><dd className="break-all font-medium">{document.checksum_sha256 || "-"}</dd></div>
          <div><dt className="text-slate-500">Paperless-ID</dt><dd className="font-medium">{document.paperless_document_id || "-"}</dd></div>
        </dl>
        <div className="mt-4"><TagList tags={document.tags} /></div>
        {document.description && <p className="mt-4 whitespace-pre-wrap text-sm text-slate-700">{document.description}</p>}
      </DetailSection>
    </div>
  );
}