"use client";

import type { Hit } from "@/lib/types";

interface HitsInboxProps {

  hits: Hit[];

}

const ENGINE_LABEL: Record<string, string> = {

  rag: "RAG",

  "homelab-rag": "RAG",

  cbm: "CBM",

  "cbm-homelab": "CBM",

  serena: "SERENA",

  memgraph: "MEMORY",

  "memory-graph": "MEMORY",

  inbox: "INBOX",

  "proxmox-api": "PROXMOX",

  proxmox: "PROXMOX",

};

function engineLabel(engine: string): string {

  return ENGINE_LABEL[engine] ?? engine.toUpperCase();

}

function stripMarkdown(s: string): string {

  return s

    .replace(/```[\s\S]*?```/g, " ")

    .replace(/`([^`]*)`/g, "$1")          // inline code

    .replace(/^#{1,6}\s*/gm, "")

    .replace(/^\s*[-*+]\s+/gm, "· ")

    .replace(/\*\*(.*?)\*\*/g, "$1")

    .replace(/\*(.*?)\*/g, "$1")

    .replace(/_/g, "")

    .replace(/>\s?/g, "")

    .replace(/\[(.*?)\]\(.*?\)/g, "$1")

    .replace(/\s+/g, " ")

    .trim();

}

function cleanTitle(t: string): string {

  return stripMarkdown(t).replace(/^\d+\.\s*/, "");

}

function shortPath(p: string): string {

  if (!p) return "";

  if (p.startsWith("memory://") || p.includes("://")) {

    return p.replace(/^[a-z]+:\/\

  }

  const parts = p.split("/").filter(Boolean);

  if (parts.length <= 2) return p;

  return "…/" + parts.slice(-2).join("/");

}

function scoreTone(score: number): { label: string; color: string } {

  if (score >= 0.45) return { label: "strong", color: "#16e0c8" };

  if (score >= 0.3) return { label: "fair", color: "#0d9e8e" };

  return { label: "weak", color: "#4a525e" };

}

function HitCard({ hit, index, max }: { hit: Hit; index: number; max: number }) {

  const title = cleanTitle(hit.title) || shortPath(hit.path);

  const snippet = stripMarkdown(hit.snippet);

  const tone = scoreTone(hit.score);

  const barPct = max > 0 ? Math.max(8, Math.round((hit.score / max) * 100)) : 0;

  return (

    <article

      className="group py-3.5 px-3 -mx-1 border-b border-surface-2 last:border-0 hover:bg-surface-1/60 transition-colors duration-150"

      style={{ animationDelay: `${index * 50}ms` }}

    >

      {}

      <div className="flex items-center justify-between gap-3 mb-2">

        <span

          className="font-mono uppercase shrink-0"

          style={{

            fontSize: "0.56rem",

            letterSpacing: "0.1em",

            color: "#16e0c8",

            border: "1px solid rgba(22,224,200,0.22)",

            padding: "2px 6px",

            borderRadius: 2,

          }}

        >

          {engineLabel(hit.engine)}

        </span>

        <div className="flex items-center gap-2 shrink-0">

          <div className="w-14 h-1 bg-surface-3 relative rounded-full overflow-hidden">

            <div

              className="absolute left-0 top-0 h-full rounded-full"

              style={{ width: `${barPct}%`, background: tone.color, transition: "width 0.5s cubic-bezier(0.16,1,0.3,1)" }}

            />

          </div>

          <span className="font-mono tabular-nums" style={{ fontSize: "0.62rem", color: tone.color }} title={`relevance score ${tone.label}`}>

            {hit.score.toFixed(2)}

          </span>

        </div>

      </div>

      {}

      <p className="font-ui text-sm text-text-primary font-medium leading-snug mb-1 line-clamp-2">

        {title}

      </p>

      {}

      <p className="font-mono truncate mb-1.5" style={{ fontSize: "0.56rem", color: "#4a525e", letterSpacing: "0.02em" }} title={hit.path}>

        {shortPath(hit.path)}

      </p>

      {}

      <p className="font-ui text-text-secondary leading-relaxed line-clamp-2" style={{ fontSize: "0.8rem" }}>

        {snippet}

      </p>

    </article>

  );

}

function EmptyInbox() {

  return (

    <div className="flex-1 flex items-center justify-center py-12">

      <div className="text-center">

        <div className="w-10 h-10 mx-auto mb-3 border border-surface-2 flex items-center justify-center">

          <svg width="16" height="16" viewBox="0 0 16 16" fill="none" aria-hidden="true">

            <rect x="2" y="4" width="12" height="9" stroke="#3a3a3a" strokeWidth="1" />

            <path d="M2 7h12" stroke="#3a3a3a" strokeWidth="1" />

            <path d="M5 4V3M11 4V3" stroke="#3a3a3a" strokeWidth="1" />

          </svg>

        </div>

        <p className="font-mono text-label-sm text-text-muted uppercase tracking-widest">No hits yet</p>

        <p className="font-mono text-label-sm text-text-muted mt-1 opacity-50">Ask Darwin a question</p>

      </div>

    </div>

  );

}

export default function HitsInbox({ hits }: HitsInboxProps) {

  const sorted = [...hits].sort((a, b) => b.score - a.score);

  const max = sorted.length ? sorted[0].score : 0;

  return (

    <div className="flex flex-col gap-4 h-full">

      <div className="flex items-center justify-between">

        <div>

          <p className="font-mono text-label-sm text-text-muted uppercase tracking-widest mb-1">Raw hits</p>

          {sorted.length > 0 && (

            <p className="font-mono text-label-sm text-text-secondary">

              {sorted.length} results · top {max.toFixed(2)}

            </p>

          )}

        </div>

        {sorted.length > 0 && (

          <div className="flex items-center gap-1.5">

            <span className="w-1.5 h-1.5 rounded-full bg-teal-bio animate-pulse-slow" />

            <span className="font-mono text-label-sm text-teal-bio">LIVE</span>

          </div>

        )}

      </div>

      <div className="flex-1 overflow-y-auto">

        {sorted.length === 0 ? (

          <EmptyInbox />

        ) : (

          <div>

            {sorted.map((hit, i) => (

              <HitCard key={`${hit.engine}-${i}`} hit={hit} index={i} max={max} />

            ))}

          </div>

        )}

      </div>

      {sorted.length > 0 && (

        <div className="pt-2 border-t border-surface-2">

          <p className="font-mono text-label-sm text-text-muted">Sorted by relevance score</p>

        </div>

      )}

    </div>

  );

}