import { createFileRoute } from "@tanstack/react-router";
import { ActionScreen } from "@/components/bkash/ActionScreen";
import { useAppSettings } from "@/hooks/useAppSettings";
import { MessageCircle, Facebook, Send as Telegram, Phone, HelpCircle } from "lucide-react";

export const Route = createFileRoute("/_authenticated/help-center")({
  component: HelpCenterPage,
});

function HelpCenterPage() {
  const { settings } = useAppSettings();
  const tiles: Array<{ icon: any; label: string; sub: string; href: string; color: string }> = [];
  if (settings.whatsapp_url) tiles.push({ icon: MessageCircle, label: "WhatsApp", sub: "সরাসরি মেসেজ করুন", href: settings.whatsapp_url, color: "#25D366" });
  if (settings.facebook_url) tiles.push({ icon: Facebook, label: "Facebook গ্রুপ", sub: "কমিউনিটিতে যোগ দিন", href: settings.facebook_url, color: "#1877F2" });
  if (settings.telegram_url) tiles.push({ icon: Telegram, label: "Telegram গ্রুপ", sub: "আপডেট পান", href: settings.telegram_url, color: "#26A5E4" });
  if (settings.support_phone) tiles.push({ icon: Phone, label: "সাপোর্ট কল", sub: settings.support_phone, href: `tel:${settings.support_phone}`, color: "hsl(var(--primary))" });

  return (
    <ActionScreen title="সাহায্য কেন্দ্র" subtitle="আমাদের সাথে যোগাযোগ করুন">
      <div className="space-y-4">
        <div className="bg-card border rounded-2xl p-5 flex items-start gap-3">
          <div className="h-10 w-10 rounded-xl grid place-items-center text-primary-foreground shrink-0"
            style={{ background: "var(--gradient-primary)" }}>
            <HelpCircle className="h-5 w-5" />
          </div>
          <p className="text-sm text-foreground/80 leading-relaxed">{settings.help_center_intro}</p>
        </div>

        {tiles.length === 0 ? (
          <div className="bg-muted/40 border rounded-2xl p-6 text-center text-sm text-muted-foreground">
            কোনো যোগাযোগ চ্যানেল সেট করা হয়নি।
          </div>
        ) : (
          <div className="grid grid-cols-2 gap-3">
            {tiles.map((t) => (
              <a
                key={t.label}
                href={t.href}
                target={t.href.startsWith("tel:") ? undefined : "_blank"}
                rel="noreferrer"
                className="bg-card border rounded-2xl p-4 flex flex-col items-center gap-2 active:scale-95 transition"
              >
                <div className="h-12 w-12 rounded-2xl grid place-items-center text-white"
                  style={{ background: t.color }}>
                  <t.icon className="h-6 w-6" />
                </div>
                <p className="font-bold text-sm">{t.label}</p>
                <p className="text-[11px] text-muted-foreground text-center">{t.sub}</p>
              </a>
            ))}
          </div>
        )}
      </div>
    </ActionScreen>
  );
}