import { createFileRoute } from "@tanstack/react-router";
import { useEffect, useMemo, useState } from "react";
import { Grid, Home, ShoppingBag, MessageSquare, LogOut, Trash2, Plus, Edit3, Eye, EyeOff, Save } from "lucide-react";
import { Product } from "@/data/products";
import { apiUrl } from "@/lib/api";

const sections = [
  { key: "overview", label: "Dashboard overview", icon: Grid },
  { key: "home", label: "Home", icon: Home },
  { key: "shop", label: "Shop", icon: ShoppingBag },
  { key: "messages", label: "Contact messages", icon: MessageSquare },
] as const;

type SectionKey = (typeof sections)[number]["key"];

type Message = {
  id: number;
  name: string;
  email: string;
  subject: string | null;
  message: string;
  created_at: string;
};

export const Route = createFileRoute("/dashboard")({
  head: () => ({
    meta: [
      { title: "Admin Dashboard — Igiciro" },
      { name: "description", content: "Admin dashboard for Igiciro with overview, shop, and contact messages." },
    ],
  }),
  component: DashboardPage,
});

function DashboardPage() {
  const [activeSection, setActiveSection] = useState<SectionKey>("overview");
  const [messages, setMessages] = useState<Message[]>([]);
  const [selectedMessage, setSelectedMessage] = useState<Message | null>(null);
  const [loadingMessages, setLoadingMessages] = useState(false);
  const [deleteError, setDeleteError] = useState<string | null>(null);

  useEffect(() => {
    if (typeof window === "undefined") return;
    const loggedIn = localStorage.getItem("adminLoggedIn") === "true";
    if (!loggedIn) {
      window.location.href = "/login";
    }
  }, []);

  useEffect(() => {
    if (activeSection === "messages") {
      fetchMessages();
    }
  }, [activeSection]);

  const fetchMessages = async () => {
    setLoadingMessages(true);
    setDeleteError(null);
    try {
      const response = await fetch(apiUrl("/api/messages"));
      const data = await response.json();
      if (response.ok) {
        setMessages(data.messages ?? []);
        setSelectedMessage(data.messages?.[0] ?? null);
      } else {
        setMessages([]);
      }
    } catch (error) {
      console.error(error);
      setMessages([]);
    } finally {
      setLoadingMessages(false);
    }
  };

  const deleteMessage = async (id: number) => {
    setDeleteError(null);
    try {
      const response = await fetch(apiUrl(`/api/messages/${id}`), {
        method: "DELETE",
      });
      const data = await response.json();
      if (!response.ok) {
        setDeleteError(data.message ?? "Unable to delete message.");
        return;
      }
      await fetchMessages();
      setSelectedMessage((prev) => (prev?.id === id ? null : prev));
    } catch (error) {
      console.error(error);
      setDeleteError("Unable to delete message.");
    }
  };

  const [products, setProducts] = useState<Product[]>([]);
  const [loadingProducts, setLoadingProducts] = useState(false);
  const [productError, setProductError] = useState<string | null>(null);
  const [selectedProduct, setSelectedProduct] = useState<Product | null>(null);
  const [isNewProduct, setIsNewProduct] = useState(true);
  const [imageFile, setImageFile] = useState<File | null>(null);
  const [imagePreview, setImagePreview] = useState<string | null>(null);
  const [productForm, setProductForm] = useState<{
    id: string;
    name: string;
    variety: string;
    image: string;
    pricePerKg: number;
    unit: string;
    location: string;
    district: string;
    metaDescription: string;
    sourceFarm: string;
    harvestDate: string;
    delivery: string;
    stockKg: number;
    sourcePersonName: string;
    sourcePersonNote: string;
    status: "in_season" | "available_in_stock" | "unavailable";
    isDraft: boolean;
    isHidden: boolean;
    description: string;
  }>({
    id: "",
    name: "",
    variety: "",
    image: "",
    pricePerKg: 0,
    unit: "kg",
    location: "",
    district: "",
    metaDescription: "",
    sourceFarm: "",
    harvestDate: new Date().toISOString().slice(0, 10),
    delivery: "48h nationwide",
    stockKg: 0,
    sourcePersonName: "",
    sourcePersonNote: "",
    status: "in_season",
    isDraft: false,
    isHidden: false,
    description: "",
  });

  const mapRawProduct = (row: any): Product => ({
    id: String(row.id),
    name: row.name,
    variety: row.variety,
    image: row.image,
    pricePerKg: Number(row.price_per_kg),
    unit: row.unit as Product["unit"],
    location: row.location,
    district: row.district,
    available: row.status !== "unavailable" && Number(row.stock_kg) > 0,
    stockKg: Number(row.stock_kg),
    harvestDate: row.harvest_date,
    farmer: row.source_person_name,
    description: row.description,
    metaDescription: row.meta_description ?? "",
    sourceFarm: row.source_farm,
    delivery: row.delivery,
    status: row.status,
    sourcePersonName: row.source_person_name,
    sourcePersonNote: row.source_person_note ?? "",
    isDraft: Boolean(row.is_draft),
    isHidden: Boolean(row.is_hidden),
  });

  const fetchProducts = async () => {
    setLoadingProducts(true);
    setProductError(null);
    try {
      const response = await fetch(apiUrl("/api/products"));
      const data = await response.json();
      if (!response.ok) {
        setProductError(data.message || "Unable to load products.");
        setProducts([]);
        return;
      }
      setProducts((data.products ?? []).map(mapRawProduct));
      setSelectedProduct((data.products ?? [])[0] ? mapRawProduct((data.products ?? [])[0]) : null);
    } catch (error) {
      console.error(error);
      setProductError("Unable to load products.");
    } finally {
      setLoadingProducts(false);
    }
  };

  const resetProductForm = () => {
    setIsNewProduct(true);
    setSelectedProduct(null);
    setImageFile(null);
    setImagePreview(null);
    setProductForm({
      id: "",
      name: "",
      variety: "",
      image: "",
      pricePerKg: 0,
      unit: "kg",
      location: "",
      district: "",
      metaDescription: "",
      sourceFarm: "",
      harvestDate: new Date().toISOString().slice(0, 10),
      delivery: "48h nationwide",
      stockKg: 0,
      sourcePersonName: "",
      sourcePersonNote: "",
      status: "in_season",
      isDraft: false,
      isHidden: false,
      description: "",
    });
  };

  const selectProduct = (product: Product) => {
    setIsNewProduct(false);
    setSelectedProduct(product);
    setImageFile(null);
    setImagePreview(product.image || null);
    setProductForm({
      id: product.id,
      name: product.name,
      variety: product.variety,
      image: product.image,
      pricePerKg: product.pricePerKg,
      unit: product.unit,
      location: product.location,
      district: product.district,
      metaDescription: product.metaDescription,
      sourceFarm: product.sourceFarm,
      harvestDate: product.harvestDate,
      delivery: product.delivery,
      stockKg: product.stockKg,
      sourcePersonName: product.sourcePersonName,
      sourcePersonNote: product.sourcePersonNote,
      status: product.status,
      isDraft: product.isDraft,
      isHidden: product.isHidden,
      description: product.description,
    });
  };

  const saveProduct = async () => {
    setProductError(null);
    try {
      const method = isNewProduct ? "POST" : "PUT";
      const url = isNewProduct
        ? apiUrl("/api/products")
        : apiUrl(`/api/products/${selectedProduct?.id || productForm.id}`);
      const formData = new FormData();

      if (isNewProduct && !imageFile) {
        setProductError("Please upload an image from your device before saving.");
        return;
      }

      formData.append("id", productForm.id);
      formData.append("name", productForm.name);
      formData.append("variety", productForm.variety);
      if (productForm.image) {
        formData.append("image", productForm.image);
      }
      formData.append("pricePerKg", String(productForm.pricePerKg));
      formData.append("unit", productForm.unit);
      formData.append("location", productForm.location);
      formData.append("district", productForm.district);
      formData.append("metaDescription", productForm.metaDescription);
      formData.append("sourceFarm", productForm.sourceFarm);
      formData.append("harvestDate", productForm.harvestDate);
      formData.append("delivery", productForm.delivery);
      formData.append("stockKg", String(productForm.stockKg));
      formData.append("sourcePersonName", productForm.sourcePersonName);
      formData.append("sourcePersonNote", productForm.sourcePersonNote);
      formData.append("status", productForm.status);
      formData.append("isDraft", productForm.isDraft ? "1" : "0");
      formData.append("isHidden", productForm.isHidden ? "1" : "0");
      formData.append("description", productForm.description);

      if (imageFile) {
        formData.append("imageFile", imageFile);
      }

      const response = await fetch(url, {
        method,
        body: formData,
      });
      const data = await response.json();
      if (!response.ok) {
        setProductError(data.message || "Unable to save product.");
        return;
      }
      await fetchProducts();
      if (isNewProduct) {
        resetProductForm();
      }
    } catch (error) {
      console.error(error);
      setProductError("Unable to save product.");
    }
  };

  const deleteProduct = async (id: string) => {
    setProductError(null);
    try {
      const response = await fetch(apiUrl(`/api/products/${id}`), {
        method: "DELETE",
      });
      const data = await response.json();
      if (!response.ok) {
        setProductError(data.message || "Unable to delete product.");
        return;
      }
      await fetchProducts();
      if (selectedProduct?.id === id) {
        resetProductForm();
      }
    } catch (error) {
      console.error(error);
      setProductError("Unable to delete product.");
    }
  };

  useEffect(() => {
    if (activeSection === "shop") {
      fetchProducts();
    }
  }, [activeSection]);

  const activeContent = useMemo(() => {
    switch (activeSection) {
      case "home":
        return {
          title: "Home",
          description: "Hello! Welcome to the home section of the admin dashboard.",
          body: "This page is a quick place to see the most important admin information and greetings.",
        };
      case "shop":
        return {
          title: "Shop",
          description: "Manage all shop products from the admin dashboard.",
          body: "Create, edit, delete, draft, and hide products for the public shop without changing the storefront design.",
        };
      case "messages":
        return {
          title: "Contact messages",
          description: "Review messages submitted by customers and respond as needed.",
          body: "No new messages yet. Check in regularly to stay on top of customer requests.",
        };
      default:
        return {
          title: "Dashboard overview",
          description: "You are successfully logged in as admin.",
          body: "Use the menu to navigate between Home, Shop, and Contact Messages. The dashboard is responsive on both desktop and mobile.",
        };
    }
  }, [activeSection]);

  const logout = () => {
    localStorage.removeItem("adminLoggedIn");
    window.location.href = "/login";
  };

  return (
    <div className="min-h-screen bg-slate-50 text-slate-900">
      <header className="border-b border-slate-200 bg-white px-4 py-4 shadow-sm sticky top-0 z-20">
        <div className="mx-auto flex max-w-7xl flex-col gap-4 md:flex-row md:items-center md:justify-between">
          <div>
            <p className="text-sm uppercase tracking-[0.24em] text-slate-500">Admin dashboard</p>
            <h1 className="mt-2 text-2xl font-semibold">Igiciro control center</h1>
          </div>
          <div className="flex items-center justify-between gap-3 md:justify-end">
            <div className="rounded-2xl bg-slate-100 px-4 py-2 text-sm text-slate-700">
              Logged in as admin@example.com
            </div>
            <button
              onClick={logout}
              className="inline-flex items-center gap-2 rounded-full bg-tomato px-4 py-2 text-sm font-semibold text-white shadow-sm transition hover:bg-red-600"
            >
              <LogOut className="h-4 w-4" />
              Logout
            </button>
          </div>
        </div>
      </header>

      <main className="mx-auto grid max-w-7xl gap-6 px-4 py-6 md:grid-cols-[260px_1fr]">
        <aside className="hidden rounded-3xl border border-slate-200 bg-white p-4 shadow-sm md:block">
          <nav className="space-y-2">
            {sections.map((section) => {
              const Icon = section.icon;
              const active = section.key === activeSection;
              return (
                <button
                  key={section.key}
                  onClick={() => setActiveSection(section.key)}
                  className={`flex w-full items-center gap-3 rounded-2xl px-4 py-3 text-left text-sm transition ${
                    active
                      ? "bg-tomato text-white shadow"
                      : "text-slate-700 hover:bg-slate-100"
                  }`}
                >
                  <Icon className="h-4 w-4" />
                  {section.label}
                </button>
              );
            })}
          </nav>
        </aside>

        <section className="space-y-6">
          <div className="rounded-3xl border border-slate-200 bg-white p-4 shadow-sm md:hidden">
            <div className="flex items-center justify-between gap-3">
              <div className="text-sm font-semibold">Menu</div>
            </div>
            <div className="mt-4 grid gap-2 sm:grid-cols-2">
              {sections.map((section) => {
                const active = section.key === activeSection;
                return (
                  <button
                    key={section.key}
                    onClick={() => setActiveSection(section.key)}
                    className={`rounded-2xl px-4 py-3 text-sm transition ${
                      active ? "bg-tomato text-white" : "bg-slate-100 text-slate-700 hover:bg-slate-200"
                    }`}
                  >
                    {section.label}
                  </button>
                );
              })}
            </div>
          </div>

          <div className="rounded-3xl border border-slate-200 bg-white p-6 shadow-sm">
            <div className="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
              <div>
                <p className="text-sm uppercase tracking-[0.24em] text-slate-500">{activeContent.title}</p>
                <h2 className="mt-2 text-3xl font-semibold text-slate-900">{activeContent.title}</h2>
              </div>
            </div>
            <p className="mt-4 text-slate-600">{activeContent.description}</p>
            <div className="mt-6 rounded-3xl bg-slate-50 p-5 text-slate-700">
              {activeContent.body}
            </div>
          </div>
          {activeSection === "messages" ? (
            <div className="grid gap-6 lg:grid-cols-[320px_1fr]">
              <div className="rounded-3xl border border-slate-200 bg-white p-6 shadow-sm">
                <div className="flex items-center justify-between gap-4">
                  <h3 className="text-lg font-semibold">Messages</h3>
                  <button
                    onClick={fetchMessages}
                    className="rounded-full bg-slate-100 px-4 py-2 text-sm text-slate-700 hover:bg-slate-200"
                  >
                    Refresh
                  </button>
                </div>
                <div className="mt-4 space-y-3">
                  {loadingMessages ? (
                    <p className="text-sm text-slate-500">Loading messages...</p>
                  ) : messages.length === 0 ? (
                    <p className="text-sm text-slate-500">No messages found.</p>
                  ) : (
                    messages.map((message) => (
                      <button
                        key={message.id}
                        onClick={() => setSelectedMessage(message)}
                        className={`w-full rounded-3xl border p-4 text-left transition ${
                          selectedMessage?.id === message.id
                            ? "border-tomato bg-tomato/10"
                            : "border-slate-200 bg-slate-50 hover:border-slate-300"
                        }`}
                      >
                        <div className="flex items-center justify-between gap-3">
                          <div>
                            <p className="font-semibold text-slate-900">{message.name}</p>
                            <p className="text-sm text-slate-600">{message.email}</p>
                          </div>
                          <span className="rounded-full bg-slate-100 px-3 py-1 text-xs uppercase tracking-[0.18em] text-slate-500">
                            {new Date(message.created_at).toLocaleDateString()}
                          </span>
                        </div>
                        <p className="mt-3 text-sm text-slate-700">
                          {message.subject || "No subject"}
                        </p>
                      </button>
                    ))
                  )}
                </div>
              </div>

              <div className="rounded-3xl border border-slate-200 bg-white p-6 shadow-sm">
                <div className="flex items-center justify-between gap-4">
                  <div>
                    <h3 className="text-lg font-semibold">Message details</h3>
                    <p className="text-sm text-slate-500">View the full customer message here.</p>
                  </div>
                  {selectedMessage ? (
                    <button
                      onClick={() => selectedMessage && deleteMessage(selectedMessage.id)}
                      className="inline-flex items-center gap-2 rounded-full bg-red-600 px-4 py-2 text-sm font-semibold text-white hover:bg-red-700"
                    >
                      <Trash2 className="h-4 w-4" />
                      Delete
                    </button>
                  ) : null}
                </div>
                <div className="mt-6 space-y-4">
                  {deleteError ? <p className="text-sm text-destructive">{deleteError}</p> : null}
                  {selectedMessage ? (
                    <div className="space-y-4">
                      <div>
                        <p className="text-sm text-slate-500">From</p>
                        <p className="font-semibold text-slate-900">{selectedMessage.name}</p>
                        <p className="text-sm text-slate-600">{selectedMessage.email}</p>
                      </div>
                      <div>
                        <p className="text-sm text-slate-500">Subject</p>
                        <p className="font-semibold text-slate-900">{selectedMessage.subject || "No subject"}</p>
                      </div>
                      <div>
                        <p className="text-sm text-slate-500">Sent</p>
                        <p className="text-slate-700">{new Date(selectedMessage.created_at).toLocaleString()}</p>
                      </div>
                      <div>
                        <p className="text-sm text-slate-500">Message</p>
                        <p className="whitespace-pre-line text-slate-700">{selectedMessage.message}</p>
                      </div>
                    </div>
                  ) : (
                    <p className="text-sm text-slate-500">Select a message to view the details.</p>
                  )}
                </div>
              </div>
            </div>
          ) : null}
          {activeSection === "shop" ? (
            <div className="grid gap-6 lg:grid-cols-[360px_1fr]">
              <div className="rounded-3xl border border-slate-200 bg-white p-6 shadow-sm">
                <div className="flex items-center justify-between gap-4">
                  <div>
                    <h3 className="text-lg font-semibold">Products</h3>
                    <p className="text-sm text-slate-500">Manage your shop items and product statuses.</p>
                  </div>
                  <button
                    onClick={resetProductForm}
                    className="inline-flex items-center gap-2 rounded-full bg-slate-100 px-4 py-2 text-sm font-semibold text-slate-700 hover:bg-slate-200"
                  >
                    <Plus className="h-4 w-4" />
                    Add product
                  </button>
                </div>
                {loadingProducts ? (
                  <p className="mt-6 text-sm text-slate-500">Loading products...</p>
                ) : productError ? (
                  <p className="mt-6 text-sm text-destructive">{productError}</p>
                ) : products.length === 0 ? (
                  <p className="mt-6 text-sm text-slate-500">No products available yet.</p>
                ) : (
                  <div className="mt-4 space-y-3">
                    {products.map((product) => (
                      <button
                        key={product.id}
                        onClick={() => selectProduct(product)}
                        className={`w-full rounded-3xl border p-4 text-left transition ${
                          selectedProduct?.id === product.id
                            ? "border-tomato bg-tomato/10"
                            : "border-slate-200 bg-slate-50 hover:border-slate-300"
                        }`}
                      >
                        <div className="flex items-center justify-between gap-3">
                          <div>
                            <p className="font-semibold text-slate-900">{product.name}</p>
                            <p className="text-sm text-slate-600">{product.location}</p>
                          </div>
                          <div className="space-y-1 text-right">
                            <p className="text-xs uppercase tracking-[0.18em] text-slate-500">{product.status.replace(/_/g, " ")}</p>
                            <p className="text-sm text-slate-500">{product.stockKg} kg</p>
                          </div>
                        </div>
                      </button>
                    ))}
                  </div>
                )}
              </div>
              <div className="rounded-3xl border border-slate-200 bg-white p-6 shadow-sm">
                <div className="flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between">
                  <div>
                    <h3 className="text-lg font-semibold">{isNewProduct ? "Add new product" : "Edit product"}</h3>
                    <p className="text-sm text-slate-500">Use the form to save, update, hide, or draft products.</p>
                  </div>
                  <div className="flex flex-wrap gap-2">
                    {!isNewProduct ? (
                      <button
                        onClick={() => selectedProduct && deleteProduct(selectedProduct.id)}
                        className="inline-flex items-center gap-2 rounded-full bg-red-600 px-4 py-2 text-sm font-semibold text-white hover:bg-red-700"
                      >
                        <Trash2 className="h-4 w-4" />
                        Delete
                      </button>
                    ) : null}
                    <button
                      onClick={saveProduct}
                      className="inline-flex items-center gap-2 rounded-full bg-tomato px-4 py-2 text-sm font-semibold text-white hover:bg-red-600"
                    >
                      <Save className="h-4 w-4" />
                      Save
                    </button>
                  </div>
                </div>

                {productError ? <p className="mt-4 text-sm text-destructive">{productError}</p> : null}

                <div className="mt-6 grid gap-4">
                  <div className="grid gap-2">
                    <label className="text-sm font-medium text-slate-700">Product ID (slug)</label>
                    <input
                      value={productForm.id}
                      onChange={(e) => setProductForm((prev) => ({ ...prev, id: e.target.value }))}
                      className="rounded-2xl border border-slate-200 bg-slate-50 px-4 py-3 text-sm text-slate-900"
                      disabled={!isNewProduct}
                    />
                  </div>
                  <div className="grid gap-2 sm:grid-cols-2">
                    <div className="grid gap-2">
                      <label className="text-sm font-medium text-slate-700">Title</label>
                      <input
                        value={productForm.name}
                        onChange={(e) => setProductForm((prev) => ({ ...prev, name: e.target.value }))}
                        className="rounded-2xl border border-slate-200 bg-slate-50 px-4 py-3 text-sm text-slate-900"
                      />
                    </div>
                    <div className="grid gap-2">
                      <label className="text-sm font-medium text-slate-700">Variety</label>
                      <input
                        value={productForm.variety}
                        onChange={(e) => setProductForm((prev) => ({ ...prev, variety: e.target.value }))}
                        className="rounded-2xl border border-slate-200 bg-slate-50 px-4 py-3 text-sm text-slate-900"
                      />
                    </div>
                  </div>
                  <div className="grid gap-2 sm:grid-cols-2">
                    <div className="grid gap-2">
                      <label className="text-sm font-medium text-slate-700">Price per kg</label>
                      <input
                        type="number"
                        value={productForm.pricePerKg}
                        onChange={(e) => setProductForm((prev) => ({ ...prev, pricePerKg: Number(e.target.value) }))}
                        className="rounded-2xl border border-slate-200 bg-slate-50 px-4 py-3 text-sm text-slate-900"
                      />
                    </div>
                    <div className="grid gap-2">
                      <label className="text-sm font-medium text-slate-700">Location</label>
                      <input
                        value={productForm.location}
                        onChange={(e) => setProductForm((prev) => ({ ...prev, location: e.target.value }))}
                        className="rounded-2xl border border-slate-200 bg-slate-50 px-4 py-3 text-sm text-slate-900"
                      />
                    </div>
                  </div>
                  <div className="grid gap-2 sm:grid-cols-2">
                    <div className="grid gap-2">
                      <label className="text-sm font-medium text-slate-700">District</label>
                      <input
                        value={productForm.district}
                        onChange={(e) => setProductForm((prev) => ({ ...prev, district: e.target.value }))}
                        className="rounded-2xl border border-slate-200 bg-slate-50 px-4 py-3 text-sm text-slate-900"
                      />
                    </div>
                    <div className="grid gap-2">
                      <label className="text-sm font-medium text-slate-700">Delivery</label>
                      <input
                        value={productForm.delivery}
                        onChange={(e) => setProductForm((prev) => ({ ...prev, delivery: e.target.value }))}
                        className="rounded-2xl border border-slate-200 bg-slate-50 px-4 py-3 text-sm text-slate-900"
                      />
                    </div>
                  </div>
                  <div className="grid gap-2 sm:grid-cols-2">
                    <div className="grid gap-2">
                      <label className="text-sm font-medium text-slate-700">Stock (kg)</label>
                      <input
                        type="number"
                        value={productForm.stockKg}
                        onChange={(e) => setProductForm((prev) => ({ ...prev, stockKg: Number(e.target.value) }))}
                        className="rounded-2xl border border-slate-200 bg-slate-50 px-4 py-3 text-sm text-slate-900"
                      />
                    </div>
                    <div className="grid gap-2">
                      <label className="text-sm font-medium text-slate-700">Harvest date</label>
                      <input
                        type="date"
                        value={productForm.harvestDate}
                        onChange={(e) => setProductForm((prev) => ({ ...prev, harvestDate: e.target.value }))}
                        className="rounded-2xl border border-slate-200 bg-slate-50 px-4 py-3 text-sm text-slate-900"
                      />
                    </div>
                  </div>
                  <div className="grid gap-2 sm:grid-cols-2">
                    <div className="grid gap-2">
                      <label className="text-sm font-medium text-slate-700">Source farm</label>
                      <input
                        value={productForm.sourceFarm}
                        onChange={(e) => setProductForm((prev) => ({ ...prev, sourceFarm: e.target.value }))}
                        className="rounded-2xl border border-slate-200 bg-slate-50 px-4 py-3 text-sm text-slate-900"
                      />
                    </div>
                    <div className="grid gap-2">
                      <label className="text-sm font-medium text-slate-700">Source person</label>
                      <input
                        value={productForm.sourcePersonName}
                        onChange={(e) => setProductForm((prev) => ({ ...prev, sourcePersonName: e.target.value }))}
                        className="rounded-2xl border border-slate-200 bg-slate-50 px-4 py-3 text-sm text-slate-900"
                      />
                    </div>
                  </div>
                  <div className="grid gap-2 sm:grid-cols-2">
                    <div className="grid gap-2">
                      <label className="text-sm font-medium text-slate-700">Status</label>
                      <select
                        value={productForm.status}
                        onChange={(e) => setProductForm((prev) => ({ ...prev, status: e.target.value as any }))}
                        className="rounded-2xl border border-slate-200 bg-slate-50 px-4 py-3 text-sm text-slate-900"
                      >
                        <option value="in_season">In season</option>
                        <option value="available_in_stock">Available in stock</option>
                        <option value="unavailable">Unavailable</option>
                      </select>
                    </div>
                    <div className="grid gap-2">
                      <label className="text-sm font-medium text-slate-700">Upload image from device</label>
                      <input
                        type="file"
                        accept="image/*"
                        onChange={(e) => {
                          const file = e.target.files?.[0] ?? null;
                          setImageFile(file);
                          setImagePreview(file ? URL.createObjectURL(file) : null);
                        }}
                        className="rounded-2xl border border-slate-200 bg-slate-50 px-4 py-3 text-sm text-slate-900"
                      />
                      {imageFile ? (
                        <p className="text-xs text-slate-500">Selected file: {imageFile.name}</p>
                      ) : productForm.image ? (
                        <p className="text-xs text-slate-500">No new image selected; current image will remain unchanged.</p>
                      ) : (
                        <p className="text-xs text-slate-500">Choose an image from your device for this product.</p>
                      )}
                    </div>
                  </div>
                  <div className="grid gap-2">
                    <label className="text-sm font-medium text-slate-700">Meta description</label>
                    <input
                      value={productForm.metaDescription}
                      onChange={(e) => setProductForm((prev) => ({ ...prev, metaDescription: e.target.value }))}
                      className="rounded-2xl border border-slate-200 bg-slate-50 px-4 py-3 text-sm text-slate-900"
                    />
                  </div>
                  <div className="grid gap-2">
                    <label className="text-sm font-medium text-slate-700">Source person note</label>
                    <textarea
                      value={productForm.sourcePersonNote}
                      onChange={(e) => setProductForm((prev) => ({ ...prev, sourcePersonNote: e.target.value }))}
                      className="min-h-[120px] rounded-3xl border border-slate-200 bg-slate-50 px-4 py-3 text-sm text-slate-900"
                    />
                  </div>
                  <div className="grid gap-2">
                    <label className="text-sm font-medium text-slate-700">Full description</label>
                    <textarea
                      value={productForm.description}
                      onChange={(e) => setProductForm((prev) => ({ ...prev, description: e.target.value }))}
                      className="min-h-[160px] rounded-3xl border border-slate-200 bg-slate-50 px-4 py-3 text-sm text-slate-900"
                    />
                  </div>
                  <div className="grid gap-2 sm:grid-cols-2">
                    <label className="inline-flex items-center gap-2 text-sm text-slate-700">
                      <input
                        type="checkbox"
                        checked={productForm.isDraft}
                        onChange={(e) => setProductForm((prev) => ({ ...prev, isDraft: e.target.checked }))}
                        className="h-4 w-4 rounded border-slate-300 text-tomato focus:ring-tomato"
                      />
                      Draft
                    </label>
                    <label className="inline-flex items-center gap-2 text-sm text-slate-700">
                      <input
                        type="checkbox"
                        checked={productForm.isHidden}
                        onChange={(e) => setProductForm((prev) => ({ ...prev, isHidden: e.target.checked }))}
                        className="h-4 w-4 rounded border-slate-300 text-tomato focus:ring-tomato"
                      />
                      Hidden
                    </label>
                  </div>
                </div>
              </div>
            </div>
          ) : null}
        </section>
      </main>
    </div>
  );
}