import { createFileRoute } from "@tanstack/react-router";
import { useEffect, useState } from "react";
import { useServerFn } from "@tanstack/react-start";
import { useQuery, useQueryClient } from "@tanstack/react-query";
import { getAppSettings, adminSaveAppSettings } from "@/lib/app-settings.functions";
import type { ThemePreset, ThemeMode } from "@/lib/app-settings.functions";
import { THEME_PRESETS } from "@/components/bkash/ThemeApplier";
import {
  Settings2, Loader2, Palette, Phone, Type, Image as ImageIcon, Wrench,
  Sun, Moon, MessageCircle, Facebook, Send as Telegram, Gift, HelpCircle,
} from "lucide-react";
import { toast } from "sonner";

export const Route = createFileRoute("/admin/settings")({
  component: AdminSettingsPage,
});

function AdminSettingsPage() {
  const get = useServerFn(getAppSettings);
  const save = useServerFn(adminSaveAppSettings);
  const qc = useQueryClient();
  const q = useQuery({ queryKey: ["app-settings"], queryFn: () => get() });

  const [form, setForm] = useState({
    app_name: "",
    app_tagline: "",
    app_logo_url: "",
    primary_color: "#e2136e",
    support_phone: "",
    footer_text: "",
    maintenance_mode: false,
    welcome_bonus_text: "",
    theme_preset: "pink" as ThemePreset,
    theme_mode: "light" as ThemeMode,
    whatsapp_url: "",
    facebook_url: "",
    telegram_url: "",
    help_center_intro: "",
  });
  const [saving, setSaving] = useState(false);

  useEffect(() => {
    if (q.data) {
      setForm({
        app_name: q.data.app_name ?? "",
        app_tagline: q.data.app_tagline ?? "",
        app_logo_url: q.data.app_logo_url ?? "",
        primary_color: q.data.primary_color ?? "#e2136e",
        support_phone: q.data.support_phone ?? "",
        footer_text: q.data.footer_text ?? "",
        maintenance_mode: !!q.data.maintenance_mode,
        welcome_bonus_text: q.data.welcome_bonus_text ?? "",
        theme_preset: (q.data.theme_preset as ThemePreset) ?? "pink",
        theme_mode: (q.data.theme_mode as ThemeMode) ?? "light",
        whatsapp_url: q.data.whatsapp_url ?? "",
        facebook_url: q.data.facebook_url ?? "",
        telegram_url: q.data.telegram_url ?? "",
        help_center_intro: q.data.help_center_intro ?? "",
      });
    }
  }, [q.data]);

  const onSave = async () => {
    setSaving(true);
    try {
      await save({
        data: {
          app_name: form.app_name.trim(),
          app_tagline: form.app_tagline.trim(),
          app_logo_url: form.app_logo_url.trim() ? form.app_logo_url.trim() : null,
          primary_color: form.primary_color,
          support_phone: form.support_phone.trim(),
          footer_text: form.footer_text.trim(),
          maintenance_mode: form.maintenance_mode,
          welcome_bonus_text: form.welcome_bonus_text.trim(),
          theme_preset: form.theme_preset,
          theme_mode: form.theme_mode,
          whatsapp_url: form.whatsapp_url.trim(),
          facebook_url: form.facebook_url.trim(),
          telegram_url: form.telegram_url.trim(),
          help_center_intro: form.help_center_intro.trim(),
        },
      });
      toast.success("সেটিংস সংরক্ষণ হয়েছে");
      qc.invalidateQueries({ queryKey: ["app-settings"] });
    } catch (e: any) {
      toast.error(e?.message ?? "সংরক্ষণ ব্যর্থ");
    } finally {
      setSaving(false);
    }
  };

  if (q.isLoading) {
    return (
      <div className="py-20 grid place-items-center">
        <Loader2 className="h-6 w-6 animate-spin text-primary" />
      </div>
    );
  }

  const set = <K extends keyof typeof form>(k: K, v: (typeof form)[K]) =>
    setForm((f) => ({ ...f, [k]: v }));

  return (
    <div className="space-y-4 max-w-2xl mx-auto">
      <div className="flex items-center gap-2">
        <div className="h-9 w-9 rounded-lg grid place-items-center text-primary-foreground"
          style={{ background: "var(--gradient-primary)" }}>
          <Settings2 className="h-5 w-5" />
        </div>
        <div>
          <h1 className="text-lg font-bold">অ্যাপ সেটিংস</h1>
          <p className="text-xs text-muted-foreground">অ্যাপের নাম, লোগো, থিম ও কন্টেন্ট পরিবর্তন করুন</p>
        </div>
      </div>

      {/* Branding */}
      <Section title="ব্র্যান্ডিং">
        <Field icon={<Type className="h-3.5 w-3.5" />} label="অ্যাপের নাম">
          <input value={form.app_name} onChange={(e) => set("app_name", e.target.value)} className="input" placeholder="bKash" />
        </Field>
        <Field icon={<Type className="h-3.5 w-3.5" />} label="ট্যাগলাইন">
          <input value={form.app_tagline} onChange={(e) => set("app_tagline", e.target.value)} className="input" placeholder="Mobile Financial Service" />
        </Field>
        <Field icon={<ImageIcon className="h-3.5 w-3.5" />} label="অ্যাপ লোগো URL">
          <input value={form.app_logo_url} onChange={(e) => set("app_logo_url", e.target.value)} className="input" placeholder="https://example.com/logo.png" />
          {form.app_logo_url && (
            <div className="mt-2 flex items-center gap-3 p-2 rounded-lg border bg-muted/40">
              <img src={form.app_logo_url} alt="preview" className="h-12 w-12 rounded-lg object-cover bg-white"
                onError={(e) => ((e.currentTarget as HTMLImageElement).style.opacity = "0.3")} />
              <span className="text-[11px] text-muted-foreground truncate">প্রিভিউ</span>
            </div>
          )}
        </Field>
        <Field icon={<Type className="h-3.5 w-3.5" />} label="ফুটার টেক্সট">
          <input value={form.footer_text} onChange={(e) => set("footer_text", e.target.value)} className="input" placeholder="© bKash" />
        </Field>
      </Section>

      {/* Theme */}
      <Section title="থিম কালার ও মোড">
        <div>
          <label className="text-xs font-semibold text-muted-foreground flex items-center gap-1.5">
            <Palette className="h-3.5 w-3.5" /> থিম প্রিসেট (৫টি)
          </label>
          <div className="mt-2 grid grid-cols-5 gap-2">
            {(Object.keys(THEME_PRESETS) as ThemePreset[]).map((k) => {
              const p = THEME_PRESETS[k];
              const active = form.theme_preset === k;
              return (
                <button
                  key={k}
                  type="button"
                  onClick={() => { set("theme_preset", k); set("primary_color", p.hex); }}
                  className={`aspect-square rounded-xl border-2 flex flex-col items-center justify-center gap-1 transition ${active ? "border-foreground ring-2 ring-primary/30" : "border-input"}`}
                  style={{ background: p.palette.gradientPrimary }}
                >
                  <div className="h-6 w-6 rounded-full bg-white/25" />
                  <span className="text-[9px] text-white font-bold leading-tight text-center px-1">{p.label}</span>
                </button>
              );
            })}
          </div>
        </div>
        <div>
          <label className="text-xs font-semibold text-muted-foreground">থিম মোড</label>
          <div className="mt-2 grid grid-cols-2 gap-2">
            {(["light", "dark"] as ThemeMode[]).map((m) => {
              const active = form.theme_mode === m;
              return (
                <button
                  key={m}
                  type="button"
                  onClick={() => set("theme_mode", m)}
                  className={`h-12 rounded-xl border flex items-center justify-center gap-2 font-semibold text-sm ${active ? "border-primary bg-primary/10 text-primary" : "border-input"}`}
                >
                  {m === "light" ? <Sun className="h-4 w-4" /> : <Moon className="h-4 w-4" />}
                  {m === "light" ? "লাইট" : "ডার্ক"}
                </button>
              );
            })}
          </div>
        </div>
      </Section>

      {/* Content */}
      <Section title="কন্টেন্ট">
        <Field icon={<Gift className="h-3.5 w-3.5" />} label="স্বাগত বোনাস টেক্সট (Auth পেজ)">
          <textarea
            value={form.welcome_bonus_text}
            onChange={(e) => set("welcome_bonus_text", e.target.value)}
            rows={2}
            className="input !h-auto py-2"
            placeholder="নতুন অ্যাকাউন্টে স্বাগত বোনাস হিসেবে ৳1,000 পাবেন।"
          />
        </Field>
        <Field icon={<HelpCircle className="h-3.5 w-3.5" />} label="সাহায্য কেন্দ্র ইন্ট্রো">
          <textarea
            value={form.help_center_intro}
            onChange={(e) => set("help_center_intro", e.target.value)}
            rows={2}
            className="input !h-auto py-2"
          />
        </Field>
      </Section>

      {/* Help Center Contacts */}
      <Section title="সাহায্য কেন্দ্র যোগাযোগ">
        <Field icon={<Phone className="h-3.5 w-3.5" />} label="সাপোর্ট ফোন">
          <input value={form.support_phone} onChange={(e) => set("support_phone", e.target.value)} className="input" placeholder="16247" />
        </Field>
        <Field icon={<MessageCircle className="h-3.5 w-3.5" />} label="WhatsApp লিংক">
          <input value={form.whatsapp_url} onChange={(e) => set("whatsapp_url", e.target.value)} className="input" placeholder="https://wa.me/8801XXXXXXXXX" />
        </Field>
        <Field icon={<Facebook className="h-3.5 w-3.5" />} label="Facebook গ্রুপ লিংক">
          <input value={form.facebook_url} onChange={(e) => set("facebook_url", e.target.value)} className="input" placeholder="https://facebook.com/groups/..." />
        </Field>
        <Field icon={<Telegram className="h-3.5 w-3.5" />} label="Telegram গ্রুপ লিংক">
          <input value={form.telegram_url} onChange={(e) => set("telegram_url", e.target.value)} className="input" placeholder="https://t.me/..." />
        </Field>
      </Section>

      <Section title="সিস্টেম">
        <label className="flex items-center justify-between gap-3 px-4 h-12 rounded-xl border bg-muted/40">
          <div className="flex items-center gap-2">
            <Wrench className="h-4 w-4 text-muted-foreground" />
            <div>
              <p className="text-sm font-semibold">মেইনটেন্যান্স মোড</p>
              <p className="text-[11px] text-muted-foreground">সক্রিয় থাকলে ইউজারদের নোটিশ দেখানো যাবে</p>
            </div>
          </div>
          <button type="button" onClick={() => set("maintenance_mode", !form.maintenance_mode)}
            className={`w-12 h-7 rounded-full transition relative ${form.maintenance_mode ? "bg-primary" : "bg-muted-foreground/30"}`}
            aria-pressed={form.maintenance_mode}>
            <span className={`absolute top-0.5 h-6 w-6 rounded-full bg-white shadow transition ${form.maintenance_mode ? "left-[calc(100%-1.625rem)]" : "left-0.5"}`} />
          </button>
        </label>
      </Section>

      <button
        onClick={onSave}
        disabled={saving}
        className="w-full h-12 rounded-full font-bold text-primary-foreground disabled:opacity-50 sticky bottom-4 shadow-lg"
        style={{ background: "var(--gradient-primary)" }}
      >
        {saving ? "সংরক্ষণ হচ্ছে…" : "সব পরিবর্তন সংরক্ষণ করুন"}
      </button>

      <div className="bg-primary/5 border border-primary/20 rounded-2xl p-4 text-xs text-muted-foreground space-y-1">
        <p className="font-bold text-foreground">💡 টিপস</p>
        <p>• থিম পরিবর্তন সাথে সাথে সব ইউজারের অ্যাপে দেখা যাবে</p>
        <p>• পিন ভুলে গেলে ইউজারদের Gmail এ কোড পাঠানো হবে (Resend কানেক্টর দরকার)</p>
        <p>• সাহায্য কেন্দ্র লিংকগুলো ইউজারদের "সাহায্য কেন্দ্র" পেজে দেখা যাবে</p>
      </div>

      <style>{`.input{margin-top:.25rem;width:100%;height:2.75rem;padding:0 .75rem;border-radius:.75rem;border:1px solid hsl(var(--input));background:hsl(var(--background));font-size:.875rem;outline:none}.input:focus{border-color:hsl(var(--primary))}`}</style>
    </div>
  );
}

function Section({ title, children }: { title: string; children: React.ReactNode }) {
  return (
    <div className="bg-card border rounded-2xl p-5 space-y-3">
      <h2 className="text-xs font-bold text-muted-foreground uppercase tracking-wider">{title}</h2>
      {children}
    </div>
  );
}

function Field({ icon, label, children }: { icon: React.ReactNode; label: string; children: React.ReactNode }) {
  return (
    <div>
      <label className="text-xs font-semibold text-muted-foreground flex items-center gap-1.5">
        {icon} {label}
      </label>
      {children}
    </div>
  );
}