"use client";

import { useState } from "react";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import { Globe } from "lucide-react";
import { extractMetaData } from "@/app/actions";
import { LengthIndicator } from "./length-indicator";
import { CopyButton } from "./copy-button";
import { ResultsSkeleton } from "./results-skeleton";

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 handleSubmit = async (event: React.FormEvent<HTMLFormElement>) => {
    event.preventDefault();
    setLoading(true);
    setError(null);
    setMetaData(null);

    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 hover:scale-105 active:scale-100"
        >
          {loading ? "Extracting..." : "Extract"}
        </Button>
      </form>

      {loading && <ResultsSkeleton />}

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

      {metaData && !loading && (
        <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-1">
                <div className="flex items-center gap-2">
                  <h3 className="font-semibold text-card-foreground">
                    Meta Title
                  </h3>
                  <LengthIndicator
                    length={metaData.title.length}
                    type="title"
                  />
                </div>
                <CopyButton textToCopy={metaData.title} />
              </div>
              <p className="text-muted-foreground bg-muted p-3 rounded-md">
                {metaData.title || "Not found"}
              </p>
            </div>
            <div>
              <div className="flex items-center justify-between mb-1">
                <div className="flex items-center gap-2">
                  <h3 className="font-semibold text-card-foreground">
                    Meta Description
                  </h3>
                  <LengthIndicator
                    length={metaData.description.length}
                    type="description"
                  />
                </div>
                <CopyButton textToCopy={metaData.description} />
              </div>
              <p className="text-muted-foreground bg-muted p-3 rounded-md">
                {metaData.description || "Not found"}
              </p>
            </div>
          </CardContent>
        </Card>
      )}
    </div>
  );
}