gg-backend/frontend/src/components/SeoFields/SeoFields.tsx

import { BytescaleUploader } from "@/components/BytescaleUploader/BytescaleUploader";

import { Badge } from "@/components/ui/badge";
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";
import { Textarea } from "@/components/ui/textarea";

import { X } from "lucide-react";

interface SeoData {
	seoTitle?: string;
	metaDescription?: string;
	focusKeyphrase?: string;
	tags?: string[];
	ogTitle?: string;
	ogDescription?: string;
	ogImage?: string;
}

interface SeoFieldsProps {
	value?: SeoData;
	onChange: (seo: SeoData) => void;
	slug?: string;
	folderPath?: "/seo";
}

export default function SeoFields({
	value,
	onChange,
	slug,
	folderPath = "/seo",
}: SeoFieldsProps) {
	const seo = value || {};

	const updateSeo = (field: keyof SeoData, fieldValue: any) => {
		onChange({
			...seo,
			[field]: fieldValue,
		});
	};

	const removeTag = (index: number) => {
		updateSeo(
			"tags",
			(seo.tags || []).filter((_, i) => i !== index),
		);
	};

	return (
		<div className="space-y-5 p-5 border rounded-xl bg-muted/20">
			<div className="flex items-center justify-between">
				<div>
					<h3 className="text-lg font-bold">SEO Settings</h3>

					<p className="text-sm text-muted-foreground">
						Optimize for Google & social sharing
					</p>
				</div>

				<Badge variant="secondary">Optional</Badge>
			</div>

			<div className="space-y-2">
				<div className="flex items-center justify-between">
					<Label className="text-sm font-semibold">SEO Title</Label>

					<span className="text-xs text-muted-foreground">
						{seo.seoTitle?.length || 0}/60
					</span>
				</div>

				<Input
					placeholder="Best Health Checkup Package in Kochi"
					value={seo.seoTitle || ""}
					onChange={(e) => updateSeo("seoTitle", e.target.value)}
				/>

				<p className="text-xs text-muted-foreground">
					Recommended: 50–60 characters
				</p>
			</div>

			<div className="space-y-2">
				<div className="flex items-center justify-between">
					<Label className="text-sm font-semibold">Meta Description</Label>

					<span className="text-xs text-muted-foreground">
						{seo.metaDescription?.length || 0}/160
					</span>
				</div>

				<Textarea
					rows={4}
					placeholder="Short description shown in Google search results"
					value={seo.metaDescription || ""}
					onChange={(e) => updateSeo("metaDescription", e.target.value)}
				/>

				<p className="text-xs text-muted-foreground">
					Recommended: 150–160 characters
				</p>
			</div>

			<div className="space-y-2">
				<Label className="text-sm font-semibold">Focus Keyphrase</Label>

				<Input
					placeholder="health checkup package kochi"
					value={seo.focusKeyphrase || ""}
					onChange={(e) => updateSeo("focusKeyphrase", e.target.value)}
				/>
			</div>

			<div className="space-y-2">
				<Label className="text-sm font-semibold">Tags / Keywords</Label>

				<div className="flex flex-wrap gap-2 border rounded-md p-3 min-h-[48px] bg-background">
					{(seo.tags || []).map((tag, index) => (
						<div
							key={index}
							className="bg-primary/10 text-primary px-3 py-1 rounded-full text-sm flex items-center gap-2"
						>
							<span>{tag}</span>

							<button
								type="button"
								onClick={() => removeTag(index)}
								className="hover:text-red-500 transition-colors"
							>
								<X className="h-3 w-3" />
							</button>
						</div>
					))}

					<Input
						placeholder="Type keyword and press Enter"
						className="border-0 shadow-none focus-visible:ring-0 min-w-[220px] flex-1"
						onKeyDown={(e) => {
							if (e.key === "Enter" && e.currentTarget.value.trim()) {
								e.preventDefault();

								const newTag = e.currentTarget.value.trim();

								if (!(seo.tags || []).includes(newTag)) {
									updateSeo("tags", [...(seo.tags || []), newTag]);
								}

								e.currentTarget.value = "";
							}
						}}
					/>
				</div>

				<p className="text-xs text-muted-foreground">Press Enter to add tags</p>
			</div>

			<div className="border-t pt-5 space-y-5">
				<div className="flex items-center justify-between">
					<div>
						<h4 className="font-bold">Open Graph (Social Preview)</h4>

						<p className="text-sm text-muted-foreground">
							Facebook, WhatsApp & Twitter sharing
						</p>
					</div>

					<Badge variant="secondary">Optional</Badge>
				</div>

				<div className="space-y-2">
					<Label className="text-sm font-semibold">OG Title</Label>

					<Input
						placeholder="Title for social sharing"
						value={seo.ogTitle || ""}
						onChange={(e) => updateSeo("ogTitle", e.target.value)}
					/>

					<p className="text-xs text-muted-foreground">
						If empty, SEO title will be used
					</p>
				</div>

				<div className="space-y-2">
					<Label className="text-sm font-semibold">OG Description</Label>

					<Textarea
						rows={4}
						placeholder="Description for social sharing"
						value={seo.ogDescription || ""}
						onChange={(e) => updateSeo("ogDescription", e.target.value)}
					/>

					<p className="text-xs text-muted-foreground">
						If empty, meta description will be used
					</p>
				</div>

				<div className="space-y-2">
					<Label className="text-sm font-semibold">OG Image</Label>

					<BytescaleUploader
						value={seo.ogImage || ""}
						folderPath={folderPath}
						onChange={(url) => updateSeo("ogImage", url)}
					/>
				</div>
			</div>
		</div>
	);
}