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 } from "lucide-react";
import { extractMetaData } from "@/app/actions";
import { LengthIndicator } from "./length-indicator";
import { CopyButton } from "./copy-button";

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

export function MetaForm() {
  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("");

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

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

    const formData = new FormData(event.currentTarget);
    const url = formData.get("url") as string;

    const result = await extractMetaData(url);

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

    setLoading(false);
  };

  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="url"
            placeholder="https://example.com"
            required
            className="pl-10 h-12 text-base rounded-lg shadow-sm"
          />
        </div>
        <Button
          type="submit"
          disabled={loading}
          className="w-full sm:w-auto h-12 px-8 rounded-lg font-semibold transition-all"
        >
          {loading ? "Extracting..." : "Extract"}
        </Button>
      </form>

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

      {metaData && (
        <Card className="w-full shadow-lg rounded-lg">
          <CardHeader>
            <CardTitle className="text-xl text-card-foreground">
              Extraction Results
            </CardTitle>
          </CardHeader>
          <CardContent className="space-y-6">
            {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">
                  <img
                    src={metaData.image}
                    alt="Meta preview image"
                    className="w-full h-full object-cover"
                  />
                </div>
              </div>
            )}
            <div>
              <div className="flex items-center justify-between mb-2">
                <div className="flex items-center gap-2">
                  <h3 className="font-semibold text-card-foreground">
                    Meta Title
                  </h3>
                  <LengthIndicator
                    length={editableTitle.length}
                    type="title"
                  />
                </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>
              {isEditingTitle ? (
                <Input
                  value={editableTitle}
                  onChange={(e) => setEditableTitle(e.target.value)}
                  className="w-full bg-muted"
                  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 mb-2">
                <div className="flex items-center gap-2">
                  <h3 className="font-semibold text-card-foreground">
                    Meta Description
                  </h3>
                  <LengthIndicator
                    length={editableDescription.length}
                    type="description"
                  />
                </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>
              {isEditingDescription ? (
                <Textarea
                  value={editableDescription}
                  onChange={(e) => setEditableDescription(e.target.value)}
                  className="w-full bg-muted 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>
          </CardContent>
        </Card>
      )}
    </div>
  );
}