"use client";

import Link from "next/link";
import { FileText, FileImage, File, FileSpreadsheet } from "lucide-react";
import { format } from "date-fns";

import { Badge } from "@/components/ui/badge";
import { WarrantyStatus } from "@/components/documents/warranty-status";
import { useDataProvider } from "@/lib/demo/data-provider-context";
import type { DocumentResponse } from "@/lib/api/documents";

interface DocumentCardProps {
  document: DocumentResponse;
}

function getFileIcon(mimeType: string) {
  if (mimeType.startsWith("image/")) return FileImage;
  if (mimeType.includes("spreadsheet") || mimeType.includes("csv") || mimeType.includes("excel")) return FileSpreadsheet;
  if (mimeType.includes("pdf") || mimeType.includes("text")) return FileText;
  return File;
}

const typeLabels: Record<string, string> = {
  general: "General",
  warranty: "Warranty",
  receipt: "Receipt",
  contract: "Contract",
  insurance: "Insurance",
  manual: "Manual",
};

const typeColors: Record<string, string> = {
  general: "bg-muted text-muted-foreground",
  warranty: "bg-amber-50 text-amber-700 dark:bg-amber-500/10 dark:text-amber-400",
  receipt: "bg-emerald-50 text-emerald-700 dark:bg-emerald-500/10 dark:text-emerald-400",
  contract: "bg-blue-50 text-blue-700 dark:bg-blue-500/10 dark:text-blue-400",
  insurance: "bg-purple-50 text-purple-700 dark:bg-purple-500/10 dark:text-purple-400",
  manual: "bg-orange-50 text-orange-700 dark:bg-orange-500/10 dark:text-orange-400",
};

export function DocumentCard({ document: doc }: DocumentCardProps) {
  const Icon = getFileIcon(doc.mime_type);
  const { basePath } = useDataProvider();

  const accentColorMap: Record<string, string> = {
    general: "from-muted-foreground/40 to-muted-foreground/10",
    warranty: "from-amber-500/60 to-amber-500/20",
    receipt: "from-emerald-500/60 to-emerald-500/20",
    contract: "from-blue-500/60 to-blue-500/20",
    insurance: "from-purple-500/60 to-purple-500/20",
    manual: "from-orange-500/60 to-orange-500/20",
  };

  return (
    <Link href={`${basePath}/documents/${doc.id}`} className="block group">
      <div className="rounded-2xl border border-border bg-card overflow-hidden transition-all duration-200 hover:shadow-[var(--shadow-warm-md)] hover:-translate-y-0.5 hover:border-primary/30">
        <div className={`h-0.5 bg-gradient-to-r ${accentColorMap[doc.document_type] ?? accentColorMap.general}`} />
        <div className="p-5">
          <div className="flex items-start gap-3 mb-4">
            <div className={`rounded-xl p-2.5 shrink-0 ${typeColors[doc.document_type] ?? typeColors.general}`} aria-hidden="true">
              <Icon className="size-5" />
            </div>
            <div className="min-w-0 flex-1">
              <h3 className="font-heading font-bold text-base leading-tight truncate group-hover:text-primary transition-colors">
                {doc.title}
              </h3>
              <p className="text-sm text-muted-foreground truncate mt-0.5">
                {doc.residence_name}
              </p>
            </div>
          </div>

          <div className="flex flex-wrap items-center justify-between gap-2 border-t border-border/60 pt-3 mt-4">
            <div className="flex items-center gap-2">
              <Badge variant="outline" className="rounded-lg">
                {typeLabels[doc.document_type] ?? doc.document_type}
              </Badge>
              {doc.document_type === "warranty" && (
                <WarrantyStatus expiry_date={doc.expiry_date} />
              )}
            </div>
            <p className="text-xs text-muted-foreground/70">
              {format(new Date(doc.created_at), "MMM d, yyyy")}
            </p>
          </div>
        </div>
      </div>
    </Link>
  );
}
