"use client";

import { useState } from "react";
import { toast } from "sonner";
import { scrapeWebsite } from "@/lib/actions";
import { UrlForm } from "@/components/url-form";
import { ScrapedDataDisplay } from "@/components/scraped-data-display";
import { type ScrapedData } from "@/lib/scraper";
import { Alert, AlertDescription } from "@/components/ui/alert";
import { Skeleton } from "@/components/ui/skeleton";
import { Card } from "@/components/ui/card";

export default function CheerioScraperPage() {
  const [isSubmitting, setIsSubmitting] = useState(false);
  const [scrapedData, setScrapedData] = useState<ScrapedData | null>(null);
  const [currentUrl, setCurrentUrl] = useState("");
  const [error, setError] = useState<string | null>(null);

  const handleSubmit = async (formData: FormData) => {
    setIsSubmitting(true);
    setError(null);

    try {
      const url = formData.get("url") as string;
      setCurrentUrl(url);

      const result = await scrapeWebsite(formData);

      if (!result.success || !result.data) {
        throw new Error(result.error || "Failed to scrape website");
      }

      setScrapedData(result.data);
      toast.success("Successfully scraped");
    } catch (error) {
      const errorMessage =
        error instanceof Error ? error.message : "An unexpected error occurred";

      // Set error state with more user-friendly message
      let userFriendlyError = errorMessage;

      // Check for common error patterns and provide more useful messages
      if (
        errorMessage.includes("429") ||
        errorMessage.includes("Too Many Requests")
      ) {
        userFriendlyError =
          "The website is blocking access due to too many requests. Try again later or try a different website.";
      } else if (
        errorMessage.includes("403") ||
        errorMessage.includes("Forbidden")
      ) {
        userFriendlyError =
          "This website doesn't allow scraping. Try a different website that's more scraper-friendly.";
      } else if (
        errorMessage.includes("404") ||
        errorMessage.includes("Not Found")
      ) {
        userFriendlyError =
          "The page couldn't be found. Check if the URL is correct and the page exists.";
      } else if (
        errorMessage.includes("CORS") ||
        errorMessage.includes("cross-origin")
      ) {
        userFriendlyError =
          "This website has CORS protections that prevent scraping from a browser. Try a different website.";
      }

      setError(userFriendlyError);
      toast.error("Failed", {
        description: userFriendlyError,
      });
    } finally {
      setIsSubmitting(false);
    }
  };

  return (
    <div className="max-w-2xl mx-auto py-4 px-4 sm:px-6">
      <h1 className="text-lg font-medium mb-3">Jina Web Scraper</h1>
      <p className="text-sm text-muted-foreground mb-4">
        Enter a URL to scrape its content, links, and images. Try with examples
        below for best results.
      </p>

      <UrlForm onSubmit={handleSubmit} isSubmitting={isSubmitting} />

      {error && (
        <Alert variant="destructive" className="mt-4">
          <AlertDescription>{error}</AlertDescription>
        </Alert>
      )}

      <div className="mt-6 grid grid-cols-1 w-full">
        {isSubmitting && (
          <div className="col-start-1 col-end-2 row-start-1 row-end-2">
            <LoadingSkeleton />
          </div>
        )}

        {!isSubmitting && scrapedData && (
          <div className="col-start-1 col-end-2 row-start-1 row-end-2">
            <ScrapedDataDisplay data={scrapedData} url={currentUrl} />
          </div>
        )}
      </div>
    </div>
  );
}

function LoadingSkeleton() {
  return (
    <Card className="border border-none shadow-none p-4 w-full">
      <div className="w-full">
        <Skeleton className="h-5 w-3/4 mb-1" />
        <Skeleton className="h-3 w-1/2 mb-1" />
        <Skeleton className="h-3 w-2/3" />
      </div>

      <div className="space-y-4 w-full mt-4">
        <div className="mb-4 w-full">
          <div className="flex items-center justify-between mb-1 w-full">
            <Skeleton className="h-3 w-16" />
            <Skeleton className="h-4 w-12 rounded-full" />
          </div>
          <Skeleton className="h-20 w-full rounded-md" />
        </div>

        <div className="grid grid-cols-2 gap-4 mb-4 w-full">
          <div className="w-full">
            <div className="flex items-center justify-between mb-1 w-full">
              <Skeleton className="h-3 w-12" />
              <Skeleton className="h-4 w-8 rounded-full" />
            </div>
            <Skeleton className="h-24 w-full rounded-md" />
          </div>
          <div className="w-full">
            <div className="flex items-center justify-between mb-1 w-full">
              <Skeleton className="h-3 w-12" />
              <Skeleton className="h-4 w-8 rounded-full" />
            </div>
            <Skeleton className="h-24 w-full rounded-md" />
          </div>
        </div>
      </div>

      <div className="pt-2 flex justify-end w-full">
        <Skeleton className="h-7 w-24 rounded-md" />
      </div>
    </Card>
  );
}