"use client";

import { useEffect, useState } from "react";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { Textarea } from "@/components/ui/textarea";
import { Card, CardContent } from "@/components/ui/card";
import {
  Globe,
  Edit,
  Check,
  Loader2,
  X,
  ImageOff,
  Search,
} from "lucide-react";
import { extractMetaData, type HeadlineNode, type ImageAltData } from "@/app/actions";
import { LengthIndicator } from "./length-indicator";
import { CopyButton } from "./copy-button";
import { SerpPreview } from "./serp-preview";
import { ResultsSkeleton } from "./results-skeleton";
import { FaqDisplay } from "./faq-display";
import { HeadlineTree } from "./headline-tree";
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
import { ImageAltDisplay } from "./image-alt-display";

interface MetaData {
  title: string;
  description: string;
  image?: string | null;
  faq?: { question: string; answer: string }[] | null;
  headlines?: HeadlineNode[] | null;
  keyword?: string | null;
  keywordCount?: number | null;
  images?: ImageAltData[] | null;
}

export function MetaForm() {
  const [url, setUrl] = useState("");
  const [keyword, setKeyword] = useState("");
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState<string | null>(null);
  const [metaData, setMetaData] = useState<MetaData | null>(null);

  const [isEditingTitle, setIsEditingTitle] = useState(false);
  const [isEditingDescription, setIsEditingDescription] = useState(false);

  const [editableTitle, setEditableTitle] = useState("");
  const [editableDescription, setEditableDescription] = useState("");
  const [imageError, setImageError] = useState(false);

  useEffect(() => {
    if (metaData) {
      setEditableTitle(metaData.title);
      setEditableDescription(metaData.description);
      setImageError(false);
    }
  }, [metaData]);

  const handleSubmit = async (event: React.FormEvent<HTMLFormElement>) => {
    event.preventDefault();
    setLoading(true);
    setError(null);
    setMetaData(null);
    setIsEditingTitle(false);
    setIsEditingDescription(false);
    setImageError(false);

    const result = await extractMetaData(url, keyword);

    if (result.error) {
      setError(result.error);
    } else if (result.data) {
      setMetaData(result.data);
    }

    setLoading(false);
  };

  const handleClear = () => {
    setUrl("");
    setKeyword("");
    setLoading(false);
    setError(null);
    setMetaData(null);
  };

  return (
    <div className="w-full space-y-6">
      <form
        onSubmit={handleSubmit}
        className="flex flex-col sm:flex-row items-center gap-3"
      >
        <div className="relative w-full">
          <Globe className="absolute left-3 top-1/2 -translate-y-1/2 h-5 w-5 text-muted-foreground" />
          <Input
            name="url"
            type="text"
            placeholder="example.com"
            required
            className="pl-10 h-12 text-base rounded-lg shadow-sm"
            value={url}
            onChange={(e) => setUrl(e.target.value)}
          />
        </div>
        <div className="relative w-full sm:w-auto">
          <Search className="absolute left-3 top-1/2 -translate-y-1/2 h-5 w-5 text-muted-foreground" />
          <Input
            name="keyword"
            type="text"
            placeholder="Keyword (optional)"
            className="pl-10 h-12 text-base rounded-lg shadow-sm sm:w-64"
            value={keyword}
            onChange={(e) => setKeyword(e.target.value)}
          />
        </div>
        <Button
          type="submit"
          disabled={loading}
          className="w-full sm:w-auto h-12 px-8 rounded-lg font-semibold transition-all flex items-center gap-2"
        >
          {loading && <Loader2 className="h-5 w-5 animate-spin" />}
          {loading ? "Extracting..." : "Extract"}
        </Button>
        {(url || metaData || error) && (
          <Button
            type="button"
            variant="ghost"
            size="icon"
            onClick={handleClear}
            className="h-12 w-12"
          >
            <X className="h-5 w-5" />
            <span className="sr-only">Clear</span>
          </Button>
        )}
      </form>

      {loading && <ResultsSkeleton />}

      {!loading && error && (
        <Card className="border-destructive bg-destructive/10">
          <CardContent className="p-4">
            <p className="text-destructive text-center">{error}</p>
          </CardContent>
        </Card>
      )}

      {!loading && metaData && (
        <Tabs defaultValue="analysis" className="w-full">
          <TabsList className="mb-4">
            <TabsTrigger value="analysis">Meta Analysis</TabsTrigger>
            {metaData.headlines && metaData.headlines.length > 0 && (
              <TabsTrigger value="headlines">Headlines</TabsTrigger>
            )}
            {metaData.images && metaData.images.length > 0 && (
              <TabsTrigger value="images">Images</TabsTrigger>
            )}
            {metaData.faq && metaData.faq.length > 0 && (
              <TabsTrigger value="faq">FAQ</TabsTrigger>
            )}
          </TabsList>

          <TabsContent value="analysis">
            <Card className="w-full shadow-lg rounded-lg">
              <CardContent className="p-6">
                <div className="grid grid-cols-1 lg:grid-cols-2 gap-8">
                  <div className="space-y-6">
                    <div>
                      <h3 className="font-semibold text-card-foreground mb-2">
                        SERP Preview
                      </h3>
                      <SerpPreview
                        title={editableTitle}
                        description={editableDescription}
                        url={url}
                      />
                    </div>
                    {metaData.image && (
                      <div>
                        <h3 className="font-semibold text-card-foreground mb-2">
                          Preview Image
                        </h3>
                        <div className="aspect-video bg-muted rounded-md overflow-hidden relative flex items-center justify-center">
                          {!imageError ? (
                            <img
                              src={metaData.image}
                              alt="Meta preview image"
                              className="w-full h-full object-cover"
                              onError={() => setImageError(true)}
                            />
                          ) : (
                            <div className="flex flex-col items-center gap-2 text-muted-foreground">
                              <ImageOff className="h-8 w-8" />
                              <span>Image not available</span>
                            </div>
                          )}
                        </div>
                      </div>
                    )}
                  </div>
                  <div className="space-y-6">
                    <div>
                      <div className="flex items-center justify-between">
                        <div className="flex items-center gap-2">
                          <h3 className="font-semibold text-card-foreground">
                            Meta Title
                          </h3>
                          <LengthIndicator
                            length={editableTitle.length}
                            type="title"
                          />
                          <span className="text-sm text-muted-foreground">
                            {editableTitle.length} Characters
                          </span>
                        </div>
                        <div className="flex items-center">
                          <CopyButton textToCopy={editableTitle} />
                          <Button
                            variant="ghost"
                            size="icon"
                            onClick={() => setIsEditingTitle(!isEditingTitle)}
                            className="h-8 w-8"
                          >
                            {isEditingTitle ? (
                              <Check className="h-4 w-4" />
                            ) : (
                              <Edit className="h-4 w-4" />
                            )}
                            <span className="sr-only">
                              {isEditingTitle ? "Done editing" : "Edit"}
                            </span>
                          </Button>
                        </div>
                      </div>
                      <p className="text-sm text-muted-foreground mt-1 mb-2">
                        The title of the page, ideally between 30 and 60
                        characters.
                      </p>
                      {isEditingTitle ? (
                        <Input
                          value={editableTitle}
                          onChange={(e) => setEditableTitle(e.target.value)}
                          className="w-full"
                          placeholder="Meta Title"
                        />
                      ) : (
                        <p className="text-muted-foreground bg-muted p-3 rounded-md min-h-[40px] break-words">
                          {editableTitle || "Not found"}
                        </p>
                      )}
                    </div>
                    <div>
                      <div className="flex items-center justify-between">
                        <div className="flex items-center gap-2">
                          <h3 className="font-semibold text-card-foreground">
                            Meta Description
                          </h3>
                          <LengthIndicator
                            length={editableDescription.length}
                            type="description"
                          />
                          <span className="text-sm text-muted-foreground">
                            {editableDescription.length} Characters
                          </span>
                        </div>
                        <div className="flex items-center">
                          <CopyButton textToCopy={editableDescription} />
                          <Button
                            variant="ghost"
                            size="icon"
                            onClick={() =>
                              setIsEditingDescription(!isEditingDescription)
                            }
                            className="h-8 w-8"
                          >
                            {isEditingDescription ? (
                              <Check className="h-4 w-4" />
                            ) : (
                              <Edit className="h-4 w-4" />
                            )}
                            <span className="sr-only">
                              {isEditingDescription ? "Done editing" : "Edit"}
                            </span>
                          </Button>
                        </div>
                      </div>
                      <p className="text-sm text-muted-foreground mt-1 mb-2">
                        A brief summary of the page's content, ideally between
                        120 and 158 characters.
                      </p>
                      {isEditingDescription ? (
                        <Textarea
                          value={editableDescription}
                          onChange={(e) =>
                            setEditableDescription(e.target.value)
                          }
                          className="w-full min-h-[100px]"
                          placeholder="Meta Description"
                        />
                      ) : (
                        <p className="text-muted-foreground bg-muted p-3 rounded-md min-h-[100px] break-words">
                          {editableDescription || "Not found"}
                        </p>
                      )}
                    </div>
                    {metaData.keyword &&
                      typeof metaData.keywordCount === "number" && (
                        <div>
                          <h3 className="font-semibold text-card-foreground">
                            Keyword: "{metaData.keyword}"
                          </h3>
                          <p className="text-sm text-muted-foreground mt-1 mb-2">
                            The number of times this keyword appears on the
                            page.
                          </p>
                          <div className="text-foreground bg-muted p-3 rounded-md min-h-[40px] flex items-center">
                            <span className="font-mono text-2xl font-bold">
                              {metaData.keywordCount}
                            </span>
                            <span className="ml-2 text-muted-foreground">
                              occurrences
                            </span>
                          </div>
                        </div>
                      )}
                  </div>
                </div>
              </CardContent>
            </Card>
          </TabsContent>

          {metaData.headlines && metaData.headlines.length > 0 && (
            <TabsContent value="headlines">
              <Card className="w-full shadow-lg rounded-lg">
                <CardContent className="p-0">
                  <HeadlineTree headlines={metaData.headlines} />
                </CardContent>
              </Card>
            </TabsContent>
          )}

          {metaData.images && metaData.images.length > 0 && (
            <TabsContent value="images">
              <Card className="w-full shadow-lg rounded-lg">
                <CardContent className="p-6">
                  <ImageAltDisplay images={metaData.images} />
                </CardContent>
              </Card>
            </TabsContent>
          )}

          {metaData.faq && metaData.faq.length > 0 && (
            <TabsContent value="faq">
              <Card className="w-full shadow-lg rounded-lg">
                <CardContent className="p-6">
                  <FaqDisplay faqs={metaData.faq} />
                </CardContent>
              </Card>
            </TabsContent>
          )}
        </Tabs>
      )}
    </div>
  );
}