Metify/src/components/meta-form.tsx

"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, CardHeader, CardTitle } from "@/components/ui/card";
import { Globe, Edit, Check, Loader2, X, ImageOff } from "lucide-react";
import { extractMetaData } from "@/app/actions";
import { LengthIndicator } from "./length-indicator";
import { CopyButton } from "./copy-button";
import { SerpPreview } from "./serp-preview";
import { ResultsSkeleton } from "./results-skeleton";

interface MetaData {
  title: string;
  description: string;
  image?: string | null;
}

export function MetaForm() {
  const [url, setUrl] = 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);

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

    setLoading(false);
  };

  const handleClear = () => {
    setUrl("");
    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>
        <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 && (
        <Card className="w-full shadow-lg rounded-lg">
          <CardHeader>
            <CardTitle className="text-xl text-card-foreground">
              Extraction Results
            </CardTitle>
          </CardHeader>
          <CardContent>
            <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>
              </div>
            </div>
          </CardContent>
        </Card>
      )}
    </div>
  );
}