"use client";
import { useState } from "react";
import { useRouter } from "next/navigation";
import { AdminCancelButton } from "./AdminCancelButton";
import { FormField } from "./FormField";
import { ProjectImageGallery } from "./ProjectImageGallery";
import { RichTextEditor } from "./RichTextEditor";
import { createProject, updateProject, deleteProject } from "@/lib/admin-actions";
import { slugify } from "@/lib/admin-utils";
import { afterMutation } from "@/lib/mutation-result";
import { parseGoogleMapsUrl } from "@/lib/geo";
import { asStringArray } from "@/lib/json";
export function ProjectForm({ project }) {
    const router = useRouter();
    const isEdit = !!project;
    const [name, setName] = useState(project?.name || "");
    const [slug, setSlug] = useState(project?.slug || "");
    const [type, setType] = useState(project?.type || "wind");
    const [capacity, setCapacity] = useState(project?.capacity || "");
    const [location, setLocation] = useState(project?.location || "");
    const [country, setCountry] = useState(project?.country || "");
    const [city, setCity] = useState(project?.city || "");
    const [latitude, setLatitude] = useState(project?.latitude != null ? String(project.latitude) : "");
    const [longitude, setLongitude] = useState(project?.longitude != null ? String(project.longitude) : "");
    const [mapsUrl, setMapsUrl] = useState("");
    const [mapsUrlError, setMapsUrlError] = useState("");
    const [projectStage, setProjectStage] = useState(project?.projectStage || "operational");
    const [description, setDescription] = useState(project?.description || "");
    const [highlights, setHighlights] = useState(asStringArray(project?.highlights));
    const [status, setStatus] = useState(project?.status || "draft");
    const [image, setImage] = useState(project?.image || null);
    const [images, setImages] = useState(() => {
        const parsed = asStringArray(project?.images);
        return parsed.length > 0 ? parsed : project?.image ? [project.image] : [];
    });
    const [order, setOrder] = useState(project?.order ?? 0);
    const [errors, setErrors] = useState({});
    const [loading, setLoading] = useState(false);
    function handleNameChange(value) {
        setName(value);
        if (!isEdit || slug === slugify(project?.name || "")) {
            setSlug(slugify(value));
        }
    }
    function handleMapsUrlChange(value) {
        setMapsUrl(value);
        setMapsUrlError("");
        const trimmed = value.trim();
        if (!trimmed)
            return;
        const coords = parseGoogleMapsUrl(trimmed);
        if (coords) {
            setLatitude(String(coords.latitude));
            setLongitude(String(coords.longitude));
            return;
        }
        if (trimmed.startsWith("http")) {
            setMapsUrlError("Could not extract coordinates from this URL");
        }
    }
    async function save(targetStatus) {
        const newErrors = {};
        if (!name)
            newErrors.name = "Required";
        if (!capacity)
            newErrors.capacity = "Required";
        const displayLocation = location.trim() || (city && country ? `${city}, ${country}` : "");
        if (!displayLocation)
            newErrors.location = "Required";
        if (Object.keys(newErrors).length) {
            setErrors(newErrors);
            return;
        }
        setLoading(true);
        const data = {
            name,
            slug: slug || slugify(name),
            type,
            capacity,
            location: displayLocation,
            country,
            city,
            latitude: latitude ? parseFloat(latitude) : null,
            longitude: longitude ? parseFloat(longitude) : null,
            projectStage,
            description,
            highlights,
            status: (targetStatus || status),
            image,
            images,
            order,
        };
        if (isEdit) {
            const result = await updateProject(project.id, data);
            afterMutation(result, router, "/admin/projects");
        }
        else {
            const result = await createProject(data);
            afterMutation(result, router, "/admin/projects");
        }
        setLoading(false);
    }
    async function handleDelete() {
        if (!project || !confirm("Delete this project?"))
            return;
        setLoading(true);
        const result = await deleteProject(project.id);
        afterMutation(result, router, "/admin/projects");
    }
    const typeColors = {
        wind: "border-wind text-wind",
        solar: "border-solar text-solar",
        hydro: "border-hydro text-hydro",
    };
    return (<div>
      <div className="grid gap-8 lg:grid-cols-[1fr_280px]">
        <div className="space-y-6">
          <FormField label="Project Name" required error={errors.name}>
            <input className="admin-input" value={name} onChange={(e) => handleNameChange(e.target.value)}/>
          </FormField>

          <FormField label="Slug" hint={`ceylexrenewables.com/projects/${type}/${slug}`}>
            <input className="admin-input" value={slug} onChange={(e) => setSlug(e.target.value)}/>
          </FormField>

          <FormField label="Type">
            <div className="flex gap-2">
              {["wind", "solar", "hydro"].map((t) => (<button key={t} type="button" onClick={() => setType(t)} className={`flex-1 rounded-lg border py-2 font-display text-sm capitalize transition-colors duration-150 ${type === t ? `${typeColors[t]} bg-white/5` : "border-border text-muted"}`}>
                  {t}
                </button>))}
            </div>
          </FormField>

          <div className="grid gap-4 sm:grid-cols-2">
            <FormField label="Capacity" required error={errors.capacity}>
              <input className="admin-input" value={capacity} onChange={(e) => setCapacity(e.target.value)} placeholder="10MW"/>
            </FormField>
            <FormField label="Display Location" required error={errors.location} hint="Shown on project cards. Auto-filled from city + country if empty.">
              <input className="admin-input" value={location} onChange={(e) => setLocation(e.target.value)} placeholder="Mannar, Sri Lanka"/>
            </FormField>
          </div>

          <div className="rounded-lg border border-border p-4">
            <p className="mb-4 text-sm font-medium text-text">Map location</p>
            <div className="grid gap-4 sm:grid-cols-2">
              <div className="sm:col-span-2">
                <FormField label="Google Maps URL" hint="Paste a Google Maps link to auto-fill latitude and longitude" error={mapsUrlError}>
                  <input className="admin-input" value={mapsUrl} onChange={(e) => handleMapsUrlChange(e.target.value)} placeholder="https://www.google.com/maps/place/..."/>
                </FormField>
              </div>
              <FormField label="Country">
                <input className="admin-input" value={country} onChange={(e) => setCountry(e.target.value)} placeholder="Sri Lanka"/>
              </FormField>
              <FormField label="City">
                <input className="admin-input" value={city} onChange={(e) => setCity(e.target.value)} placeholder="Mannar"/>
              </FormField>
              <FormField label="Latitude" hint="Optional — auto-geocoded from city + country on save">
                <input className="admin-input" value={latitude} onChange={(e) => setLatitude(e.target.value)} placeholder="8.981"/>
              </FormField>
              <FormField label="Longitude">
                <input className="admin-input" value={longitude} onChange={(e) => setLongitude(e.target.value)} placeholder="79.904"/>
              </FormField>
            </div>
          </div>

          <FormField label="Description">
            <RichTextEditor value={description} onChange={setDescription} minimal/>
          </FormField>

          <FormField label="Key Highlights">
            <div className="space-y-2">
              {highlights.map((h, i) => (<div key={i} className="flex gap-2">
                  <input className="admin-input" value={h} onChange={(e) => {
                const next = [...highlights];
                next[i] = e.target.value;
                setHighlights(next);
            }}/>
                  <button type="button" onClick={() => setHighlights(highlights.filter((_, j) => j !== i))} className="text-danger text-sm">
                    Remove
                  </button>
                </div>))}
              <button type="button" onClick={() => setHighlights([...highlights, ""])} className="text-sm text-primary">
                + Add highlight
              </button>
            </div>
          </FormField>
        </div>

        <div className="space-y-6">
          <div className="admin-card space-y-4 p-5">
            <FormField label="Status">
              <select className="admin-input" value={status} onChange={(e) => setStatus(e.target.value)}>
                <option value="draft">Draft</option>
                <option value="published">Published</option>
                <option value="archived">Archived</option>
              </select>
            </FormField>

            <FormField label="Project stage">
              <select className="admin-input" value={projectStage} onChange={(e) => setProjectStage(e.target.value)}>
                <option value="operational">Operational</option>
                <option value="under_development">Under development</option>
              </select>
            </FormField>

            <FormField label="Display Order">
              <input type="number" className="admin-input" value={order} onChange={(e) => setOrder(parseInt(e.target.value) || 0)}/>
            </FormField>

            <FormField label="Project Images">
              <ProjectImageGallery images={images} coverImage={image} onImagesChange={setImages} onCoverChange={setImage}/>
            </FormField>
          </div>
        </div>
      </div>

      <div className="sticky bottom-0 mt-8 flex items-center gap-3 border-t border-border bg-bg py-4">
        <AdminCancelButton href="/admin/projects"/>
        <button type="button" onClick={() => save("draft")} disabled={loading} className="rounded-full border border-border px-6 py-2.5 text-sm text-muted transition-colors duration-150 hover:text-text">
          Save as Draft
        </button>
        <button type="button" onClick={() => save("published")} disabled={loading} className="rounded-full bg-primary px-6 py-2.5 font-display text-sm font-semibold text-bg">
          Publish
        </button>
        {isEdit && (<button type="button" onClick={handleDelete} disabled={loading} className="ml-auto text-sm text-danger hover:underline">
            Delete
          </button>)}
      </div>
    </div>);
}