"use client"

import { useState } from "react"
import { toast } from "sonner"

import { Alert, AlertDescription } from "@/components/ui/alert"
import { Card } from "@/components/ui/card"
import { Skeleton } from "@/components/ui/skeleton"

import { ScrapedDataDisplay } from "../components/scraped-data-display"
import { UrlForm } from "../components/url-form"
import { scrapeWebsite } from "../lib/actions"
import type { ScrapedData } from "../lib/scraper"

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

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

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

      <div className="mt-6 grid w-full grid-cols-1">
        {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="w-full border border-none p-4 shadow-none">
      <div className="w-full">
        <Skeleton className="mb-1 h-5 w-3/4" />
        <Skeleton className="mb-1 h-3 w-1/2" />
        <Skeleton className="h-3 w-2/3" />
      </div>

      <div className="mt-4 w-full space-y-4">
        <div className="mb-4 w-full">
          <div className="mb-1 flex w-full items-center justify-between">
            <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="mb-4 grid w-full grid-cols-2 gap-4">
          <div className="w-full">
            <div className="mb-1 flex w-full items-center justify-between">
              <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="mb-1 flex w-full items-center justify-between">
              <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="flex w-full justify-end pt-2">
        <Skeleton className="h-7 w-24 rounded-md" />
      </div>
    </Card>
  )
}
cheerio-scraper
