import { Link } from "react-router-dom";
import { getRkey } from "../utils.ts";
import { Sparkline } from "./Sparkline.tsx";

type SliceNode = {
  uri: string;
  name: string;
  domain: string;
  createdAt: string;
  actorHandle?: string | null;
  networkSlicesActorProfile?: {
    avatar?: {
      url: string;
    } | null;
  } | null;
  appBskyActorProfile?: {
    avatar?: {
      url: string;
    } | null;
  } | null;
  sparklines?: any;
};

interface SliceListProps {
  slices: SliceNode[];
  showSparklines?: boolean;
}

export function SliceList({ slices, showSparklines = false }: SliceListProps) {
  return (
    <div className="border-y border-zinc-800 divide-y divide-zinc-800">
      {slices.map((slice) => {
        const sliceRkey = getRkey(slice.uri);
        const profileLink = slice.actorHandle
          ? `/profile/${slice.actorHandle}/slice/${sliceRkey}`
          : "#";

        const avatar =
          slice.networkSlicesActorProfile?.avatar ||
          slice.appBskyActorProfile?.avatar;

        return (
          <Link
            key={slice.uri}
            to={profileLink}
            className="block py-4 overflow-hidden hover:bg-zinc-900/30 transition-colors relative"
          >
            {/* Sparkline overlay in background */}
            {showSparklines && slice.sparklines && (
              <div className="absolute inset-0 opacity-10 pointer-events-none flex items-end">
                <Sparkline
                  sparklines={slice.sparklines}
                  width={800}
                  height={100}
                  className="w-full"
                />
              </div>
            )}

            {/* Card content */}
            <div className="relative z-10 px-4">
              <div className="flex items-start gap-3">
                {avatar && (
                  <img
                    src={avatar.url}
                    alt={slice.name}
                    className="w-8 h-8 rounded-full"
                  />
                )}
                <div className="flex-1">
                  <div className="flex items-start justify-between">
                    <div>
                      <h2 className="text-sm font-medium text-zinc-300 mb-1">
                        {slice.name}
                      </h2>
                      <p className="text-xs text-zinc-500">{slice.domain}</p>
                    </div>
                    {slice.actorHandle && (
                      <span className="text-xs text-zinc-600">
                        @{slice.actorHandle}
                      </span>
                    )}
                  </div>
                  <div className="flex items-center justify-between mt-3">
                    <p className="text-xs text-zinc-700">
                      {new Date(slice.createdAt).toLocaleDateString()}
                    </p>
                  </div>
                </div>
              </div>
            </div>
          </Link>
        );
      })}
    </div>
  );
}