"use client";

import { useTaxonomy } from "@/lib/use-taxonomy";

import { useState } from "react";
import { useRouter } from "next/navigation";
import { Check, Loader2, Trash2, AlertTriangle } from "lucide-react";
import { sfx } from "@/lib/sfx";
import type { Community } from "@/lib/types";
import clsx from "clsx";

/** Fallback only — the live list comes from the admin panel. */
const FALLBACK_CATEGORIES = ["General", "Technology", "Design", "Sports", "Music", "Food", "Gaming", "Travel"];

export function CommunitySettings({
  community,
  slug,
  onSaved,
}: {
  community: Community;
  slug: string;
  onSaved: () => void;
}) {
  const categoryList = useTaxonomy("communityCategories", FALLBACK_CATEGORIES);
  const router = useRouter();
  const [name, setName] = useState(community.name);
  const [description, setDescription] = useState(community.description);
  const [category, setCategory] = useState(community.category);
  const [privacy, setPrivacy] = useState(community.privacy);
  const DAYS = ["Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday", "Sunday"];
  const [hours, setHours] = useState(
    DAYS.map((day) => ({
      day,
      open: community.hours?.find((h) => h.day === day)?.open ?? "",
    }))
  );
  const [website, setWebsite] = useState(community.website ?? "");
  const [email, setEmail] = useState(community.email ?? "");
  const [phone, setPhone] = useState(community.phone ?? "");
  const [address, setAddress] = useState(community.address ?? "");
  const [approveMembers, setApproveMembers] = useState(
    Boolean(community.approveMembers)
  );
  const [requireApproval, setRequireApproval] = useState(Boolean(community.requireApproval));
  const [saving, setSaving] = useState(false);
  const [saved, setSaved] = useState(false);
  const [confirming, setConfirming] = useState(false);
  const [error, setError] = useState<string | null>(null);

  async function save() {
    setSaving(true);
    setError(null);
    const res = await fetch(`/api/communities/${slug}/settings`, {
      method: "PATCH",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify({
          approveMembers,
          hours,
          website,
          email,
          phone,
          address,
          name,
          description,
          category,
          privacy,
          requireApproval,
        }),
    }).catch(() => null);
    setSaving(false);
    if (!res || !res.ok) {
      setError("Couldn't save — try again.");
      return;
    }
    sfx.save();
    setSaved(true);
    setTimeout(() => setSaved(false), 1600);
    onSaved();
  }

  async function remove() {
    const res = await fetch(`/api/communities/${slug}/settings`, { method: "DELETE" }).catch(
      () => null
    );
    if (res && res.ok) router.push("/communities");
  }

  return (
    <div className="flex flex-col gap-5">
      {/* General */}
      <section className="rounded-2xl border border-neutral-200 dark:border-neutral-800 p-4 flex flex-col gap-3">
        <h3 className="text-sm font-bold">General</h3>
        <label className="text-xs font-semibold text-neutral-500">
          Name
          <input
            value={name}
            onChange={(e) => setName(e.target.value.slice(0, 60))}
            className="mt-1 w-full rounded-xl bg-neutral-100 dark:bg-neutral-900 px-3.5 py-2.5 text-sm outline-none font-normal text-neutral-900 dark:text-neutral-100"
          />
        </label>
        <label className="text-xs font-semibold text-neutral-500">
          Description
          <textarea
            value={description}
            onChange={(e) => setDescription(e.target.value.slice(0, 240))}
            rows={3}
            className="mt-1 w-full rounded-xl bg-neutral-100 dark:bg-neutral-900 px-3.5 py-2.5 text-sm outline-none resize-none font-normal text-neutral-900 dark:text-neutral-100"
          />
        </label>
        <div>
          <span className="text-xs font-semibold text-neutral-500">Category</span>
          <div className="flex flex-wrap gap-2 mt-1.5">
            {categoryList.map((cat) => (
              <button
                key={cat.id}
                onClick={() => setCategory(cat.label)}
                className={clsx(
                  "rounded-full px-3 py-1.5 text-xs font-semibold transition-all",
                  category === cat.label
                    ? "bg-black text-white dark:bg-white dark:text-black"
                    : "bg-neutral-100 dark:bg-neutral-900 hover:scale-105"
                )}
              >
                {cat.label}
              </button>
            ))}
          </div>
        </div>
        {community.kind === "group" && (
          <div>
            <span className="text-xs font-semibold text-neutral-500">Privacy</span>
            <div className="flex gap-2 mt-1.5">
              {(["public", "private"] as const).map((p) => (
                <button
                  key={p}
                  onClick={() => setPrivacy(p)}
                  className={clsx(
                    "flex-1 rounded-xl py-2 text-xs font-semibold border transition-all capitalize",
                    privacy === p
                      ? "border-fuchsia-500 bg-fuchsia-50 dark:bg-fuchsia-950/40 text-fuchsia-600 dark:text-fuchsia-400"
                      : "border-neutral-200 dark:border-neutral-800 text-neutral-500"
                  )}
                >
                  {p}
                </button>
              ))}
            </div>
          </div>
        )}

        {/* Moderation */}
        <div>
          <span className="text-xs font-semibold text-neutral-500">Post approval</span>
          <button
            onClick={() => setRequireApproval((v) => !v)}
            className="cm-toggle-row mt-1.5"
          >
            <span className="min-w-0 text-left">
              <b>Approve posts before they appear</b>
              <em>
                When on, posts from members wait for you to approve or decline them.
              </em>
            </span>
            <span className={clsx("mg-toggle", requireApproval && "on")}>
              <i />
            </span>
          </button>

          {community.kind !== "page" && (
          <button
            onClick={() => setApproveMembers((v) => !v)}
            className="cm-toggle-row mt-1.5"
          >
            <span className="min-w-0 text-left">
              <b>Approve members before they join</b>
              <em>
                When on, people asking to join wait for you to let them in.
              </em>
            </span>
            <span className={clsx("mg-toggle", approveMembers && "on")}>
              <i />
            </span>
          </button>
          )}
        </div>

        {community.kind === "page" && (
          <div className="cm-section">
            <p className="cm-legend">Contact details</p>
            <div className="cl-grid2">
              <label>
                <span className="cl-label">Website</span>
                <input
                  value={website}
                  onChange={(e) => setWebsite(e.target.value)}
                  placeholder="example.com"
                  className="cl-field w-full"
                />
              </label>
              <label>
                <span className="cl-label">Email</span>
                <input
                  value={email}
                  onChange={(e) => setEmail(e.target.value)}
                  placeholder="hello@example.com"
                  className="cl-field w-full"
                />
              </label>
              <label>
                <span className="cl-label">Phone</span>
                <input
                  value={phone}
                  onChange={(e) => setPhone(e.target.value)}
                  placeholder="01702 000000"
                  className="cl-field w-full"
                />
              </label>
              <label>
                <span className="cl-label">Address</span>
                <input
                  value={address}
                  onChange={(e) => setAddress(e.target.value)}
                  placeholder="Town or full address"
                  className="cl-field w-full"
                />
              </label>
            </div>
          </div>
        )}

        {community.kind === "page" && (
          <div className="cm-section">
            <p className="cm-legend">Opening hours</p>
            {hours.map((h, i) => (
              <div key={h.day} className="cm-hourrow">
                <span>{h.day}</span>
                <input
                  value={h.open}
                  onChange={(e) =>
                    setHours((list) =>
                      list.map((x, j) =>
                        j === i ? { ...x, open: e.target.value.slice(0, 24) } : x
                      )
                    )
                  }
                  placeholder="9AM - 6PM, or Closed"
                  className="cl-field"
                />
              </div>
            ))}
          </div>
        )}

        {error && <p className="text-xs text-red-500">{error}</p>}
        <button
          onClick={save}
          disabled={saving || name.trim().length < 3}
          className={clsx("cp-post self-start flex items-center gap-1.5", !saving && "ready")}
        >
          {saving ? (
            <>
              <Loader2 size={13} className="animate-spin" /> Saving…
            </>
          ) : saved ? (
            <>
              <Check size={13} /> Saved
            </>
          ) : (
            "Save changes"
          )}
        </button>
      </section>

      {/* Danger zone */}
      <section className="rounded-2xl border border-red-200 dark:border-red-950 p-4">
        <h3 className="text-sm font-bold text-red-600 dark:text-red-400 flex items-center gap-1.5">
          <AlertTriangle size={14} /> Danger zone
        </h3>
        <p className="text-xs text-neutral-500 mt-1 mb-3">
          Deleting removes this {community.kind}, its posts, and all memberships. This can&apos;t be
          undone.
        </p>
        {confirming ? (
          <div className="flex gap-2">
            <button
              onClick={remove}
              className="rounded-full px-4 py-2 text-xs font-bold bg-red-500 text-white hover:bg-red-600 transition-colors"
            >
              Yes, delete permanently
            </button>
            <button
              onClick={() => setConfirming(false)}
              className="rounded-full px-4 py-2 text-xs font-bold bg-neutral-100 dark:bg-neutral-900"
            >
              Cancel
            </button>
          </div>
        ) : (
          <button
            onClick={() => setConfirming(true)}
            className="flex items-center gap-1.5 rounded-full px-4 py-2 text-xs font-bold border border-red-300 dark:border-red-900 text-red-600 dark:text-red-400 hover:bg-red-50 dark:hover:bg-red-950/40 transition-colors"
          >
            <Trash2 size={13} /> Delete {community.kind}
          </button>
        )}
      </section>
    </div>
  );
}