"use client";

import { use, useState, useEffect } from "react";
import {
  MessageSquare,
} from "lucide-react";
import { clsx } from "clsx";
import { Breadcrumb } from "@/components/breadcrumb";
import { useVaults } from "@/lib/use-data";
import { encodeVaultSlug } from "@/lib/types";
import { fetchMemories } from "@/lib/api";
import type { Memory, MemoryComment } from "@/lib/types";

function statusColor(status: string): string {
  switch (status) {
    case "active":
      return "#3fb950";
    case "fading":
      return "#d29922";
    case "archived":
      return "#8b949e";
    default:
      return "#8b949e";
  }
}

function sourceLabel(source: string): string {
  switch (source) {
    case "conversation":
      return "Learned";
    case "observation":
      return "Observed";
    case "task":
      return "Recalled";
    case "upload":
      return "Uploaded";
    default:
      return source.charAt(0).toUpperCase() + source.slice(1);
  }
}

function formatDate(dateStr: string): string {
  return new Date(dateStr).toLocaleDateString("en-US", {
    year: "numeric",
    month: "long",
    day: "numeric",
    hour: "numeric",
    minute: "2-digit",
  });
}

function ImportanceDots({ value }: { value: number }) {
  const filled = Math.round(value * 5);
  return (
    <span className="inline-flex gap-1">
      {[1, 2, 3, 4, 5].map((i) => (
        <span
          key={i}
          className={clsx(
            "w-2.5 h-2.5 rounded-full",
            i <= filled ? "bg-memory" : "bg-border"
          )}
        />
      ))}
    </span>
  );
}

export default function MemoryDetailPage({
  params,
}: {
  params: Promise<{ id: string }>;
}) {
  const { id } = use(params);
  const memoryId = parseInt(id, 10);
  const { vaults, loading: vaultsLoading } = useVaults();
  const [memory, setMemory] = useState<Memory | null>(null);
  const [loading, setLoading] = useState(true);

  // Search across all vaults' memories to find this memory by ID
  useEffect(() => {
    let cancelled = false;

    async function search() {
      if (vaultsLoading || vaults.length === 0) return;
      setLoading(true);

      for (const vault of vaults) {
        const memories = await fetchMemories(vault.fullName);
        const found = memories.find((m) => m.id === memoryId);
        if (found && !cancelled) {
          setMemory(found);
          setLoading(false);
          return;
        }
      }
      if (!cancelled) setLoading(false);
    }

    search();
    return () => { cancelled = true; };
  }, [vaults, vaultsLoading, memoryId]);

  const vault = vaults.find((v) => v.fullName === memory?.vaultFullName);
  const vaultName = vault?.name ?? "Unknown Vault";
  const vaultSlug = vault ? encodeVaultSlug(vault.owner, vault.name) : "";

  if (loading || vaultsLoading) {
    return (
      <div className="p-6">
        <Breadcrumb
          items={[
            { label: "Vaults", href: "/vaults" },
            { label: "Loading..." },
          ]}
        />
        <div className="text-center py-20">
          <p className="text-text-secondary text-sm">Loading memory...</p>
        </div>
      </div>
    );
  }

  if (!memory) {
    return (
      <div className="p-6">
        <Breadcrumb
          items={[
            { label: "Vaults", href: "/vaults" },
            { label: "Memory Not Found" },
          ]}
        />
        <div className="text-center py-20">
          <h1 className="text-xl font-semibold text-text-primary mb-2">
            Memory not found
          </h1>
          <p className="text-text-secondary text-sm">
            The memory you are looking for does not exist.
          </p>
        </div>
      </div>
    );
  }

  return (
    <div className="p-6 max-w-4xl">
      <Breadcrumb
        items={[
          { label: "Vaults", href: "/vaults" },
          { label: vaultName, href: `/vaults/${vaultSlug}` },
          { label: memory.title },
        ]}
      />

      {/* Memory Header */}
      <div className="rounded-lg border border-border bg-surface p-6 mb-6">
        <div className="flex items-center gap-2 mb-3">
          <span
            className="w-3 h-3 rounded-full bg-memory"
          />
          <span className="text-sm font-medium text-text-secondary">
            Memory
          </span>
        </div>

        <h1 className="text-xl font-semibold text-text-primary mb-4">
          {memory.title}
        </h1>

        <div className="flex items-center gap-5">
          <div className="flex items-center gap-2">
            <span className="text-sm text-text-muted">Importance:</span>
            <ImportanceDots value={memory.importance} />
          </div>
          <span
            className={clsx(
              "text-sm px-2.5 py-0.5 rounded-full font-medium",
              memory.status === "fading" && "animate-pulse"
            )}
            style={{
              backgroundColor: statusColor(memory.status) + "20",
              color: statusColor(memory.status),
            }}
          >
            {memory.status.charAt(0).toUpperCase() + memory.status.slice(1)}
          </span>
        </div>
      </div>

      {/* Content Section */}
      <div className="mb-6">
        <h2 className="text-xs uppercase tracking-wider text-text-muted mb-3 font-medium">
          Content
        </h2>
        <div className="rounded-lg border border-border bg-surface p-6">
          <div className="text-sm text-text-secondary leading-relaxed whitespace-pre-wrap max-w-[720px]">
            {memory.content}
          </div>
        </div>
      </div>

      {/* Tags Section */}
      <div className="mb-6">
        <h2 className="text-xs uppercase tracking-wider text-text-muted mb-3 font-medium">
          Tags
        </h2>
        <div className="rounded-lg border border-border bg-surface p-4">
          <div className="flex items-center gap-2 flex-wrap">
            {memory.tags.map((tag) => (
              <span
                key={tag}
                className="inline-flex items-center px-2 py-0.5 rounded-full text-xs bg-surface-elevated border border-border text-text-secondary"
              >
                {tag}
              </span>
            ))}
          </div>
        </div>
      </div>

      {/* Provenance */}
      <div className="mb-6">
        <h2 className="text-xs uppercase tracking-wider text-text-muted mb-3 font-medium">
          Provenance
        </h2>
        <div className="rounded-lg border border-border bg-surface p-4 space-y-2 text-sm">
          <div className="flex justify-between">
            <span className="text-text-muted">Source</span>
            <span className="text-text-secondary">{sourceLabel(memory.source)}</span>
          </div>
          <div className="flex justify-between">
            <span className="text-text-muted">Created</span>
            <span className="text-text-secondary">{formatDate(memory.createdAt)}</span>
          </div>
          <div className="flex justify-between">
            <span className="text-text-muted">Updated</span>
            <span className="text-text-secondary">{formatDate(memory.updatedAt)}</span>
          </div>
          <div className="flex justify-between">
            <span className="text-text-muted">Vault</span>
            <span className="text-text-secondary">{vaultName}</span>
          </div>
          <div className="flex justify-between">
            <span className="text-text-muted">Agent</span>
            <span className="text-text-secondary">{memory.agent}</span>
          </div>
        </div>
      </div>

      {/* Comments */}
      <div className="mb-6">
        <h2 className="text-xs uppercase tracking-wider text-text-muted mb-3 font-medium flex items-center gap-1.5">
          <MessageSquare size={14} />
          Comments ({memory.commentCount})
        </h2>
        <div className="rounded-lg border border-border bg-surface p-4">
          <p className="text-sm text-text-muted text-center">
            {memory.commentCount > 0
              ? `${memory.commentCount} comment${memory.commentCount !== 1 ? "s" : ""}. Full view coming soon.`
              : "No comments yet."}
          </p>
        </div>
      </div>

    </div>
  );
}