"use client";

import { Skeleton } from "@/components/ui/skeleton";
import { MarkdownRenderer } from "./markdown";
import { SourcesList } from "./sources-list";
import type { SearchResult } from "../lib/actions";
import { motion } from "motion/react";

interface SearchResultsProps {
  query: string;
  result: SearchResult | null;
  loading: boolean;
  error: string | null;
}

const containerVariants = {
  hidden: { opacity: 0 },
  visible: {
    opacity: 1,
    transition: {
      staggerChildren: 0.1,
    },
  },
};

const itemVariants = {
  hidden: { opacity: 0, y: 10 },
  visible: { opacity: 1, y: 0 },
};

export function SearchResults({
  query,
  result,
  loading,
  error,
}: SearchResultsProps) {
  if (!query && !loading) {
    return (
      <div className="flex items-center justify-center py-20">
        <p className="text-xs text-muted-foreground">
          Enter a search query to get started
        </p>
      </div>
    );
  }

  if (loading) {
    return <LoadingSkeleton />;
  }

  if (error) {
    return (
      <div className="rounded-md p-4 bg-red-50/30 border border-red-100/50">
        <p className="text-xs text-red-500">{error}</p>
      </div>
    );
  }

  if (result?.error) {
    return (
      <div className="rounded-md p-4 bg-red-50/30 border border-red-100/50">
        <p className="text-xs text-red-500">{result.error.message}</p>
      </div>
    );
  }

  if (!result) return null;

  return (
    <motion.div
      className="space-y-10"
      initial="hidden"
      animate="visible"
      variants={containerVariants}
    >
      <motion.div className="space-y-2" variants={itemVariants}>
        <motion.div
          className="text-xs text-muted-foreground"
          variants={itemVariants}
        >
          Search Results for <span className="font-bold">"{query}"</span>
        </motion.div>

        <motion.div
          className="rounded-md space-y-6 p-4 bg-card shadow-[0px_1px_1px_0px_rgba(0,_0,_0,_0.05),_0px_1px_1px_0px_rgba(255,_252,_240,_0.5)_inset,_0px_0px_0px_1px_hsla(0,_0%,_100%,_0.1)_inset,_0px_0px_1px_0px_rgba(28,_27,_26,_0.5)]"
          variants={itemVariants}
        >
          <MarkdownRenderer content={result.text} />
        </motion.div>

        <motion.div
          className="p-4 rounded-md flex bg-card flex-col gap-2 shadow-[0px_1px_1px_0px_rgba(0,_0,_0,_0.05),_0px_1px_1px_0px_rgba(255,_252,_240,_0.5)_inset,_0px_0px_0px_1px_hsla(0,_0%,_100%,_0.1)_inset,_0px_0px_1px_0px_rgba(28,_27,_26,_0.5)]"
          variants={itemVariants}
        >
          {result.sources && result.sources.length > 0 && (
            <SourcesList sources={result.sources} />
          )}
        </motion.div>
      </motion.div>
    </motion.div>
  );
}

function LoadingSkeleton() {
  return (
    <motion.div
      className="space-y-10"
      initial="hidden"
      animate="visible"
      variants={containerVariants}
    >
      <motion.div className="space-y-1" variants={itemVariants}>
        <div className="text-xs text-muted-foreground/50 pb-2">
          <Skeleton className="h-3 w-32 inline-block" />
        </div>
        <div className="space-y-3">
          <Skeleton className="h-3.5 w-full" />
          <Skeleton className="h-3.5 w-full" />
          <Skeleton className="h-3.5 w-3/4" />
          <div className="py-1" />
          <Skeleton className="h-3.5 w-5/6" />
          <Skeleton className="h-3.5 w-full" />
          <div className="py-1" />
          <Skeleton className="h-3.5 w-2/3" />
        </div>
      </motion.div>

      <motion.div
        className="space-y-4 pt-4 border-t border-border/40"
        variants={itemVariants}
      >
        <Skeleton className="h-2.5 w-16" />
        <div className="space-y-3">
          <div className="flex gap-2">
            <Skeleton className="h-3 w-3 mt-0.5" />
            <div className="space-y-1 flex-1">
              <Skeleton className="h-3 w-full" />
              <Skeleton className="h-2 w-2/3" />
            </div>
          </div>
          <div className="flex gap-2">
            <Skeleton className="h-3 w-3 mt-0.5" />
            <div className="space-y-1 flex-1">
              <Skeleton className="h-3 w-full" />
              <Skeleton className="h-2 w-2/3" />
            </div>
          </div>
        </div>
      </motion.div>
    </motion.div>
  );
}