"use client";

import { useEffect, useState } from "react";
import {
  Settings as SettingsIcon,
  Save,
  Check,
  AlertCircle,
  ExternalLink,
  Hash,
  Link as LinkIcon,
  Loader2,
  Mail,
  MessageCircle,
  Twitter,
  Github,
  Instagram,
  Youtube,
} from "lucide-react";
import type { LucideIcon } from "lucide-react";

interface Settings {
  discordEnabled: boolean;
  discordServerId: string;
  discordInviteUrl: string;
  contactEmail: string;
  contactDiscord: string;
  contactTwitter: string;
  contactGithub: string;
  contactInstagram: string;
  contactYoutube: string;
}

interface DiscordPreview {
  enabled?: boolean;
  data?: {
    name: string;
    presence_count: number;
    members: { username: string; avatar_url?: string }[];
    instant_invite: string | null;
  } | null;
  inviteUrl?: string;
  banner?: string | null;
  icon?: string | null;
  memberCount?: number | null;
  description?: string | null;
  error?: string;
  warnings?: string[];
  debug?: {
    serverId?: string;
    inviteCode?: string | null;
    bannerHash?: string | null;
    iconHash?: string | null;
    inviteFetchOk?: boolean;
    widgetFetchOk?: boolean;
  };
}

export default function AdminSettingsPage() {
  const [settings, setSettings] = useState<Settings>({
    discordEnabled: false,
    discordServerId: "",
    discordInviteUrl: "",
    contactEmail: "",
    contactDiscord: "",
    contactTwitter: "",
    contactGithub: "",
    contactInstagram: "",
    contactYoutube: "",
  });
  const [loading, setLoading] = useState(true);
  const [saving, setSaving] = useState(false);
  const [savedAt, setSavedAt] = useState<number | null>(null);
  const [contactSaving, setContactSaving] = useState(false);
  const [contactSavedAt, setContactSavedAt] = useState<number | null>(null);
  const [contactError, setContactError] = useState<string | null>(null);
  const [preview, setPreview] = useState<DiscordPreview | null>(null);
  const [previewLoading, setPreviewLoading] = useState(false);
  const [error, setError] = useState<string | null>(null);

  async function load() {
    setLoading(true);
    const res = await fetch("/api/settings").then((r) => r.json());
    setSettings(res);
    setLoading(false);
  }

  async function loadPreview() {
    setPreviewLoading(true);
    try {
      const res = await fetch("/api/discord?force=1", {
        cache: "no-store",
      }).then((r) => r.json());
      setPreview(res);
    } finally {
      setPreviewLoading(false);
    }
  }

  useEffect(() => {
    load();
  }, []);

  useEffect(() => {
    if (!loading && settings.discordEnabled && settings.discordServerId) {
      loadPreview();
    } else {
      setPreview(null);
    }
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [loading]);

  async function save() {
    setSaving(true);
    setError(null);
    const res = await fetch("/api/settings", {
      method: "PATCH",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify(settings),
    });
    setSaving(false);
    if (!res.ok) {
      const d = await res.json().catch(() => ({}));
      setError(d.error || "Kaydedilemedi");
      return;
    }
    setSavedAt(Date.now());
    loadPreview();
  }

  async function saveContact() {
    setContactSaving(true);
    setContactError(null);
    const payload = {
      contactEmail: settings.contactEmail,
      contactDiscord: settings.contactDiscord,
      contactTwitter: settings.contactTwitter,
      contactGithub: settings.contactGithub,
      contactInstagram: settings.contactInstagram,
      contactYoutube: settings.contactYoutube,
    };
    const res = await fetch("/api/settings", {
      method: "PATCH",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify(payload),
    });
    setContactSaving(false);
    if (!res.ok) {
      const d = await res.json().catch(() => ({}));
      setContactError(d.error || "Kaydedilemedi");
      return;
    }
    const updated = await res.json().catch(() => null);
    if (updated) setSettings((s) => ({ ...s, ...updated }));
    setContactSavedAt(Date.now());
  }

  return (
    <div>
      <header className="mb-6">
        <h1 className="text-2xl font-bold text-white inline-flex items-center gap-2">
          <SettingsIcon className="w-6 h-6 text-brand-300" />
          Site Ayarları
        </h1>
        <p className="text-sm text-brand-300">
          Discord widget ve diğer site ayarlarını buradan yönetin.
        </p>
      </header>

      {loading ? (
        <p className="text-brand-300">Yükleniyor...</p>
      ) : (
        <div className="space-y-6">
          {/* İletişim Bölümü */}
          <section className="glass-strong rounded-2xl p-5">
            <div className="mb-4">
              <h2 className="text-base font-bold text-white">
                İletişim Bilgileri
              </h2>
              <p className="text-xs text-brand-400">
                Footer&apos;da gözüken sosyal medya ve iletişim bağlantıları.
                Boş bırakılan alanlar gizlenir.
              </p>
            </div>

            <div className="grid gap-3 sm:grid-cols-2">
              <ContactField
                icon={Mail}
                label="E-posta"
                placeholder="ornek@sourcesetups.com"
                value={settings.contactEmail}
                onChange={(v) =>
                  setSettings((s) => ({ ...s, contactEmail: v }))
                }
                hint="mailto: önekiyle bağlantı oluşturulur."
              />
              <ContactField
                icon={MessageCircle}
                label="Discord (davet bağlantısı)"
                placeholder="https://discord.gg/..."
                value={settings.contactDiscord}
                onChange={(v) =>
                  setSettings((s) => ({ ...s, contactDiscord: v }))
                }
              />
              <ContactField
                icon={Twitter}
                label="Twitter / X"
                placeholder="https://twitter.com/..."
                value={settings.contactTwitter}
                onChange={(v) =>
                  setSettings((s) => ({ ...s, contactTwitter: v }))
                }
              />
              <ContactField
                icon={Github}
                label="GitHub"
                placeholder="https://github.com/..."
                value={settings.contactGithub}
                onChange={(v) =>
                  setSettings((s) => ({ ...s, contactGithub: v }))
                }
              />
              <ContactField
                icon={Instagram}
                label="Instagram"
                placeholder="https://instagram.com/..."
                value={settings.contactInstagram}
                onChange={(v) =>
                  setSettings((s) => ({ ...s, contactInstagram: v }))
                }
              />
              <ContactField
                icon={Youtube}
                label="YouTube"
                placeholder="https://youtube.com/@..."
                value={settings.contactYoutube}
                onChange={(v) =>
                  setSettings((s) => ({ ...s, contactYoutube: v }))
                }
              />
            </div>

            {contactError && (
              <div className="mt-4 flex items-start gap-2 p-3 rounded-lg bg-red-500/10 border border-red-500/30 text-red-200 text-sm">
                <AlertCircle className="w-4 h-4 mt-0.5 shrink-0" />
                <span>{contactError}</span>
              </div>
            )}

            <div className="mt-5 flex items-center gap-3">
              <button
                onClick={saveContact}
                disabled={contactSaving}
                className="btn-primary disabled:opacity-60"
              >
                <Save className="w-4 h-4" />
                {contactSaving
                  ? "Kaydediliyor..."
                  : "İletişim Bilgilerini Kaydet"}
              </button>
              {contactSavedAt && Date.now() - contactSavedAt < 4000 && (
                <span className="inline-flex items-center gap-1 text-xs text-emerald-300">
                  <Check className="w-3.5 h-3.5" /> Kaydedildi
                </span>
              )}
            </div>
          </section>

          <section className="glass-strong rounded-2xl p-5">
            <div className="flex items-center justify-between mb-4">
              <div>
                <h2 className="text-base font-bold text-white">
                  Discord Widget
                </h2>
                <p className="text-xs text-brand-400">
                  Ana sayfada Discord sunucunuzu göstermek için ayarlar.
                </p>
              </div>
              <label className="inline-flex items-center gap-2 cursor-pointer">
                <span className="text-xs text-brand-300">
                  {settings.discordEnabled ? "Aktif" : "Kapalı"}
                </span>
                <span className="relative">
                  <input
                    type="checkbox"
                    checked={settings.discordEnabled}
                    onChange={(e) =>
                      setSettings((s) => ({
                        ...s,
                        discordEnabled: e.target.checked,
                      }))
                    }
                    className="peer sr-only"
                  />
                  <span className="block w-10 h-5 rounded-full bg-brand-700/60 peer-checked:bg-[#5865F2] transition" />
                  <span className="absolute left-0.5 top-0.5 w-4 h-4 rounded-full bg-white transition peer-checked:translate-x-5" />
                </span>
              </label>
            </div>

            <div className="space-y-3">
              <div>
                <label className="block text-sm text-brand-200 mb-1 inline-flex items-center gap-1.5">
                  <Hash className="w-3.5 h-3.5" />
                  Discord Sunucu ID
                </label>
                <input
                  type="text"
                  value={settings.discordServerId}
                  onChange={(e) =>
                    setSettings((s) => ({
                      ...s,
                      discordServerId: e.target.value.replace(/[^0-9]/g, ""),
                    }))
                  }
                  placeholder="örn. 123456789012345678"
                  className="w-full bg-brand-900/40 border border-brand-700/40 rounded-lg px-3 py-2 text-white outline-none focus:border-brand-400"
                />
                <p className="mt-1 text-[11px] text-brand-400 leading-relaxed">
                  Discord&apos;da sunucunuzun{" "}
                  <span className="text-brand-200 font-medium">
                    Server Settings → Widget
                  </span>{" "}
                  bölümünden{" "}
                  <span className="text-brand-200 font-medium">
                    Enable Server Widget
                  </span>{" "}
                  seçeneğini açın ve sunucu ID&apos;sini kopyalayıp buraya
                  yapıştırın. (Geliştirici modu açıkken sunucuya sağ tık → ID
                  Kopyala.)
                </p>
              </div>

              <div>
                <label className="block text-sm text-brand-200 mb-1 inline-flex items-center gap-1.5">
                  <LinkIcon className="w-3.5 h-3.5" />
                  Davet Bağlantısı (opsiyonel)
                </label>
                <input
                  type="url"
                  value={settings.discordInviteUrl}
                  onChange={(e) =>
                    setSettings((s) => ({
                      ...s,
                      discordInviteUrl: e.target.value,
                    }))
                  }
                  placeholder="https://discord.gg/..."
                  className="w-full bg-brand-900/40 border border-brand-700/40 rounded-lg px-3 py-2 text-white outline-none focus:border-brand-400"
                />
                <p className="mt-1 text-[11px] text-brand-400">
                  Boş bırakırsanız Discord widget&apos;ından otomatik gelen
                  davet bağlantısı kullanılır (varsa).
                </p>
              </div>
            </div>

          </section>

          {/* Global Save */}
          <div className="sticky bottom-4 z-20">
            <div className="glass-strong rounded-xl p-3 flex items-center justify-between gap-3 shadow-2xl">
              <div className="flex items-center gap-3">
                <button
                  onClick={save}
                  disabled={saving}
                  className="btn-primary disabled:opacity-60"
                >
                  <Save className="w-4 h-4" />
                  {saving ? "Kaydediliyor..." : "Tüm Ayarları Kaydet"}
                </button>
                {savedAt && Date.now() - savedAt < 4000 && (
                  <span className="inline-flex items-center gap-1 text-xs text-emerald-300">
                    <Check className="w-3.5 h-3.5" /> Kaydedildi
                  </span>
                )}
              </div>
              {error && (
                <span className="inline-flex items-center gap-1.5 text-xs text-red-300">
                  <AlertCircle className="w-3.5 h-3.5" />
                  {error}
                </span>
              )}
            </div>
          </div>

          {/* Preview */}
          {settings.discordEnabled && settings.discordServerId && (
            <section className="glass-strong rounded-2xl p-5">
              <div className="flex items-center justify-between mb-4">
                <h2 className="text-base font-bold text-white">Önizleme</h2>
                <button
                  onClick={loadPreview}
                  className="btn-secondary text-xs py-1.5 px-3"
                  disabled={previewLoading}
                >
                  {previewLoading ? (
                    <Loader2 className="w-3 h-3 animate-spin" />
                  ) : null}
                  Yenile
                </button>
              </div>

              {previewLoading && !preview ? (
                <p className="text-sm text-brand-300">Yükleniyor...</p>
              ) : (
                <>
                  {preview?.warnings && preview.warnings.length > 0 && (
                    <div className="mb-4 space-y-2">
                      {preview.warnings.map((w, i) => (
                        <div
                          key={i}
                          className="flex items-start gap-2 p-3 rounded-lg bg-amber-500/10 border border-amber-500/30 text-amber-200 text-xs"
                        >
                          <AlertCircle className="w-4 h-4 mt-0.5 shrink-0" />
                          <span>{w}</span>
                        </div>
                      ))}
                    </div>
                  )}
                  {preview?.debug && (
                    <details className="mb-4 rounded-lg bg-brand-900/30 border border-brand-700/40 p-3">
                      <summary className="text-xs text-brand-300 cursor-pointer select-none">
                        Tanı Bilgisi (debug)
                      </summary>
                      <div className="mt-2 grid grid-cols-2 gap-x-4 gap-y-1 text-[11px] font-mono">
                        <span className="text-brand-400">Server ID:</span>
                        <span className="text-brand-100 break-all">
                          {preview.debug.serverId || "—"}
                        </span>
                        <span className="text-brand-400">Davet kodu:</span>
                        <span className="text-brand-100">
                          {preview.debug.inviteCode || "—"}
                        </span>
                        <span className="text-brand-400">widget.json:</span>
                        <span
                          className={
                            preview.debug.widgetFetchOk
                              ? "text-emerald-300"
                              : "text-red-300"
                          }
                        >
                          {preview.debug.widgetFetchOk ? "OK" : "BAŞARISIZ"}
                        </span>
                        <span className="text-brand-400">invite endpoint:</span>
                        <span
                          className={
                            preview.debug.inviteFetchOk
                              ? "text-emerald-300"
                              : "text-red-300"
                          }
                        >
                          {preview.debug.inviteFetchOk === undefined
                            ? "—"
                            : preview.debug.inviteFetchOk
                              ? "OK"
                              : "BAŞARISIZ"}
                        </span>
                        <span className="text-brand-400">Banner hash:</span>
                        <span className="text-brand-100 break-all">
                          {preview.debug.bannerHash || "yok"}
                        </span>
                        <span className="text-brand-400">Icon hash:</span>
                        <span className="text-brand-100 break-all">
                          {preview.debug.iconHash || "yok"}
                        </span>
                      </div>
                    </details>
                  )}
                </>
              )}
              {preview?.data ? (
                <div className="rounded-xl border border-brand-700/40 overflow-hidden bg-brand-900/20">
                  {preview.banner ? (
                    // eslint-disable-next-line @next/next/no-img-element
                    <img
                      src={preview.banner}
                      alt="Sunucu banner"
                      className="w-full h-28 object-cover"
                    />
                  ) : (
                    <div className="h-12 bg-gradient-to-r from-[#5865F2]/30 to-transparent" />
                  )}
                  <div className="p-4 -mt-8 relative">
                    <div className="flex items-center gap-3 mb-3">
                      {preview.icon ? (
                        // eslint-disable-next-line @next/next/no-img-element
                        <img
                          src={preview.icon}
                          alt={preview.data.name}
                          className="w-12 h-12 rounded-lg border-2 border-[#0c1320] object-cover"
                        />
                      ) : (
                        <div className="w-12 h-12 rounded-lg bg-[#5865F2] border-2 border-[#0c1320] flex items-center justify-center text-white text-lg font-bold">
                          {preview.data.name.slice(0, 1).toUpperCase()}
                        </div>
                      )}
                      <div className="flex-1 min-w-0">
                        <div className="text-sm font-bold text-white truncate">
                          {preview.data.name}
                        </div>
                        <div className="text-xs text-brand-300 mt-0.5 inline-flex items-center gap-3">
                          <span className="inline-flex items-center gap-1">
                            <span className="w-1.5 h-1.5 rounded-full bg-emerald-400 inline-block" />
                            {preview.data.presence_count} çevrimiçi
                          </span>
                          {preview.memberCount !== null &&
                            preview.memberCount !== undefined && (
                              <span>{preview.memberCount} üye</span>
                            )}
                        </div>
                      </div>
                      {preview.inviteUrl && (
                        <a
                          href={preview.inviteUrl}
                          target="_blank"
                          rel="noopener noreferrer"
                          className="btn-secondary text-xs py-1.5"
                        >
                          <ExternalLink className="w-3 h-3" />
                          Davet
                        </a>
                      )}
                    </div>
                    {preview.data.members.length > 0 && (
                      <div className="mt-3 pt-3 border-t border-brand-700/30">
                        <div className="text-[11px] uppercase tracking-wider text-brand-400 mb-2">
                          Çevrimiçi (ilk{" "}
                          {Math.min(preview.data.members.length, 8)})
                        </div>
                        <div className="flex flex-wrap gap-2">
                          {preview.data.members.slice(0, 8).map((m, i) => (
                            <div
                              key={i}
                              className="inline-flex items-center gap-1.5 px-2 py-1 rounded-md bg-brand-800/60 text-xs text-brand-100"
                            >
                              {m.avatar_url && (
                                // eslint-disable-next-line @next/next/no-img-element
                                <img
                                  src={m.avatar_url}
                                  alt=""
                                  className="w-4 h-4 rounded-full"
                                />
                              )}
                              {m.username}
                            </div>
                          ))}
                        </div>
                      </div>
                    )}
                  </div>
                </div>
              ) : (
                <p className="text-sm text-brand-400">Veri yok.</p>
              )}
            </section>
          )}
        </div>
      )}
    </div>
  );
}

function ContactField({
  icon: Icon,
  label,
  placeholder,
  value,
  onChange,
  hint,
}: {
  icon: LucideIcon;
  label: string;
  placeholder: string;
  value: string;
  onChange: (v: string) => void;
  hint?: string;
}) {
  return (
    <div>
      <label className="block text-sm text-brand-200 mb-1 inline-flex items-center gap-1.5">
        <Icon className="w-3.5 h-3.5" />
        {label}
      </label>
      <input
        type="text"
        value={value}
        onChange={(e) => onChange(e.target.value)}
        placeholder={placeholder}
        className="w-full bg-brand-900/40 border border-brand-700/40 rounded-lg px-3 py-2 text-sm text-white outline-none focus:border-brand-400 transition placeholder:text-brand-500"
      />
      {hint && <p className="mt-1 text-[11px] text-brand-400">{hint}</p>}
    </div>
  );
}