import { Badge } from "@/components/ui/badge";
import { Button } from "@/components/ui/button";
import { Card, CardContent, CardFooter } from "@/components/ui/card";
import { Skeleton } from "@/components/ui/skeleton";
import { Calendar, ExternalLink, Users } from "lucide-react";
import { useAuthors } from "@/hooks/use-author-api";
import type { Author } from "@shared/schema";
import { Link } from "wouter";

interface RelatedAuthorsProps {
  currentAuthorId: string;
  className?: string;
  limit?: number;
}

export function RelatedAuthors({
  currentAuthorId,
  className,
  limit = 6,
}: RelatedAuthorsProps) {
  // Use the actual API hook to fetch authors
  const { data: authors, isLoading, error } = useAuthors({ limit: limit + 5 }); // Fetch more to filter out current author

  // Filter out the current author and limit results
  const relatedAuthors =
    authors
      ?.filter((author) => author.id !== currentAuthorId)
      .slice(0, limit) || [];

  if (isLoading) {
    return (
      <div className={className}>
        <h2 className="text-xl font-serif font-semibold text-navy dark:text-cream mb-6">
          Related Authors
        </h2>
        <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-5">
          {Array.from(
            { length: limit },
            (_, i) => `skeleton-${Date.now()}-${i}`
          ).map((key) => (
            <Card key={key} className="overflow-hidden">
              <div className="pt-4 px-4 flex items-center gap-3 pb-3">
                <Skeleton className="w-12 h-12 rounded-full" />
                <div className="flex-1">
                  <Skeleton className="h-4 w-24 mb-1" />
                  <Skeleton className="h-3 w-16" />
                </div>
              </div>
              <CardContent className="p-4">
                <Skeleton className="h-3 w-12 mb-2" />
                <Skeleton className="h-12 w-full" />
              </CardContent>
              <CardFooter className="p-4 pt-0">
                <Skeleton className="h-6 w-16" />
                <Skeleton className="h-8 w-20 ml-auto" />
              </CardFooter>
            </Card>
          ))}
        </div>
      </div>
    );
  }

  if (error) {
    return (
      <div className={className}>
        <h2 className="text-xl font-serif font-semibold text-navy dark:text-cream mb-6">
          Related Authors
        </h2>
        <div className="text-center py-8 bg-navy/5 dark:bg-navy/10 rounded-lg">
          <p className="text-navy/70 dark:text-cream/70">
            Unable to load related authors at this time.
          </p>
        </div>
      </div>
    );
  }

  if (relatedAuthors.length === 0) {
    return (
      <div className={className}>
        <h2 className="text-xl font-serif font-semibold text-navy dark:text-cream mb-6">
          Related Authors
        </h2>
        <div className="text-center py-12 bg-navy/5 dark:bg-navy/10 rounded-lg">
          <Users className="h-12 w-12 text-navy/30 dark:text-cream/30 mx-auto mb-4" />
          <p className="text-navy/70 dark:text-cream/70">
            No related authors found.
          </p>
        </div>
      </div>
    );
  }

  return (
    <div className={className}>
      <h2 className="text-xl font-serif font-semibold text-navy dark:text-cream mb-6">
        Related Authors
      </h2>

      <div className="space-y-6">
        <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-5">
          {relatedAuthors.map((author: Author) => (
            <Card
              key={author.id}
              className="overflow-hidden bg-cream dark:bg-dark-surface hover:shadow-md transition-shadow"
            >
              <div className="pt-4 px-4 flex items-center gap-3 pb-3 border-b border-sage/10 dark:border-sage/5">
                <div className="w-12 h-12 rounded-full bg-navy/10 dark:bg-navy/20 overflow-hidden">
                  <img
                    src={
                      author.portrait ||
                      `https://via.placeholder.com/48?text=${author.name.charAt(0)}`
                    }
                    alt={author.name}
                    className="w-full h-full object-cover"
                  />
                </div>
                <div>
                  <h4 className="font-medium text-navy dark:text-cream text-sm">
                    {author.name}
                  </h4>
                  <div className="flex items-center gap-1 text-xs text-navy/70 dark:text-cream/70">
                    <Calendar className="h-3 w-3" />
                    <span>
                      {author.birthYear}–{author.deathYear || "present"}
                    </span>
                  </div>
                </div>
              </div>
              <CardContent className="p-4 text-sm text-navy/80 dark:text-cream/80">
                {author.countryId && (
                  <div className="flex items-center gap-1 mb-2">
                    <span className="text-xs text-navy/70 dark:text-cream/70 capitalize">
                      {author.countryId}
                    </span>
                  </div>
                )}
                <p className="line-clamp-3 text-xs">
                  {author.biography || "No biography available."}
                </p>
              </CardContent>
              <CardFooter className="p-4 pt-0 flex justify-between">
                {author.countryId && (
                  <Badge
                    variant="outline"
                    className="text-xs bg-transparent capitalize"
                  >
                    {author.countryId}
                  </Badge>
                )}
                <Link href={`/authors/${author.slug}`}>
                  <Button variant="ghost" size="sm" className="text-xs">
                    <ExternalLink className="h-3 w-3 mr-1" />
                    View Profile
                  </Button>
                </Link>
              </CardFooter>
            </Card>
          ))}
        </div>

        {/* Influence network visualization */}
        <div className="bg-navy/5 dark:bg-navy/10 rounded-lg p-6 mt-6">
          <div className="flex items-center justify-between mb-4">
            <h3 className="text-lg font-medium text-navy dark:text-cream">
              Literary Influence Network
            </h3>
            <Button variant="outline" size="sm" className="text-xs">
              <ExternalLink className="h-3.5 w-3.5 mr-1.5" /> View Full Network
            </Button>
          </div>
          <div className="aspect-video bg-cream dark:bg-dark-surface rounded-md flex items-center justify-center border border-sage/10 dark:border-sage/5">
            <div className="text-center px-6 py-12">
              <Users className="h-12 w-12 text-navy/30 dark:text-cream/30 mx-auto mb-4" />
              <p className="text-navy/70 dark:text-cream/70 max-w-md">
                Our interactive literary network visualization shows connections
                between authors through influence, collaboration, and shared
                themes.
              </p>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}
