"use client";

import { Suspense } from "react";
import { useParams, useSearchParams, useRouter } from "next/navigation";

const SECTIONS = [
  {
    id: "emails",
    label: "Emails",
    icon: "◈",
    title: "Email",
    desc: "Transactional and support emails — onboarding sequences, password resets, billing receipts, and support replies — all in one place.",
    items: ["Onboarding Sequence", "Transactional Emails", "Support Replies", "Billing Notices", "Digests & Summaries"],
  },
  {
    id: "chat",
    label: "Chat Support",
    icon: "◎",
    title: "Chat Support",
    desc: "Live chat and AI-powered support widget embedded in your product. Routes to human agents when needed, logs every conversation.",
    items: ["Live Chat Widget", "AI First Response", "Agent Handoff", "Conversation History", "Canned Responses"],
  },
  {
    id: "support-site",
    label: "Support Site",
    icon: "▭",
    title: "Support Site",
    desc: "Your public help centre — searchable docs, FAQs, guides, and tutorials. Deflects support tickets before they're created.",
    items: ["Help Articles", "FAQs", "Video Guides", "Release Notes", "Status Page"],
  },
  {
    id: "communications",
    label: "Communications",
    icon: "↗",
    title: "In-App Communications",
    desc: "Announcements, tooltips, banners, and nudges shown directly inside your product to guide and inform users.",
    items: ["In-App Banners", "Tooltips & Tours", "Feature Announcements", "NPS Surveys", "Feedback Prompts"],
  },
] as const;

type SectionId = typeof SECTIONS[number]["id"];

const NAV_GROUP: React.CSSProperties = {
  fontSize: "0.6rem", fontWeight: 700, color: "#b5b0a6",
  letterSpacing: "0.09em", textTransform: "uppercase",
  padding: "14px 12px 6px", fontFamily: "var(--font-inter), ui-sans-serif, sans-serif",
};

function AssistInner() {
  const params = useParams();
  const searchParams = useSearchParams();
  const router = useRouter();
  const workspace = params.workspace as string;
  const projectId = params.projectId as string;

  const activeId = (searchParams.get("section") ?? "emails") as SectionId;
  const active = SECTIONS.find(s => s.id === activeId) ?? SECTIONS[0];

  const setSection = (id: string) =>
    router.push(`/${workspace}/project/${projectId}/assist?section=${id}`, { scroll: false });

  return (
    <div style={{ display: "flex", height: "100%", fontFamily: "var(--font-inter), ui-sans-serif, sans-serif", overflow: "hidden" }}>

      {/* Left nav */}
      <div style={{ width: 200, flexShrink: 0, borderRight: "1px solid #e8e4dc", background: "#faf8f5", display: "flex", flexDirection: "column", overflow: "auto" }}>
        <div style={NAV_GROUP}>Assist</div>
        {SECTIONS.map(s => {
          const isActive = activeId === s.id;
          return (
            <button key={s.id} onClick={() => setSection(s.id)} style={{
              display: "flex", alignItems: "center", gap: 8, width: "100%", textAlign: "left",
              background: isActive ? "#f0ece4" : "transparent", border: "none", cursor: "pointer",
              padding: "6px 12px", borderRadius: 5,
              fontSize: "0.78rem", fontWeight: isActive ? 600 : 440,
              color: isActive ? "#1a1a1a" : "#5a5550",
            }}
              onMouseEnter={e => { if (!isActive) (e.currentTarget as HTMLElement).style.background = "#f6f4f0"; }}
              onMouseLeave={e => { if (!isActive) (e.currentTarget as HTMLElement).style.background = "transparent"; }}
            >
              <span style={{ fontSize: "0.65rem", opacity: 0.55, width: 14, textAlign: "center" }}>{s.icon}</span>
              {s.label}
            </button>
          );
        })}
      </div>

      {/* Content */}
      <div style={{ flex: 1, overflow: "auto", display: "flex", flexDirection: "column" }}>
        <div style={{ padding: "28px 32px", maxWidth: 800 }}>
          <div style={{ marginBottom: 24 }}>
            <div style={{ fontSize: "1.1rem", fontWeight: 700, color: "#1a1a1a", marginBottom: 6 }}>{active.title}</div>
            <div style={{ fontSize: "0.82rem", color: "#6b6560", lineHeight: 1.65, maxWidth: 520 }}>{active.desc}</div>
          </div>

          <div style={{ display: "grid", gridTemplateColumns: "repeat(auto-fill, minmax(200px, 1fr))", gap: 12, marginBottom: 32 }}>
            {active.items.map(item => (
              <div key={item} style={{
                background: "#fff", border: "1px solid #e8e4dc", borderRadius: 9,
                padding: "14px 16px", display: "flex", alignItems: "center", justifyContent: "space-between",
              }}>
                <span style={{ fontSize: "0.8rem", fontWeight: 500, color: "#1a1a1a" }}>{item}</span>
                <span style={{ fontSize: "0.65rem", color: "#c5c0b8", background: "#f6f4f0", padding: "2px 7px", borderRadius: 4 }}>Soon</span>
              </div>
            ))}
          </div>

          <div style={{
            background: "linear-gradient(135deg, #1a1a1a 0%, #2d2820 100%)",
            borderRadius: 12, padding: "24px 28px",
            display: "flex", alignItems: "center", justifyContent: "space-between", gap: 20,
          }}>
            <div>
              <div style={{ fontSize: "0.85rem", fontWeight: 600, color: "#fff", marginBottom: 4 }}>{active.title} is coming to VIBN</div>
              <div style={{ fontSize: "0.75rem", color: "#8a8478", lineHeight: 1.5 }}>We&apos;re building this section next. Shape it by telling us what you need.</div>
            </div>
            <button style={{ background: "#d4a04a", color: "#fff", border: "none", borderRadius: 8, padding: "9px 20px", fontSize: "0.78rem", fontWeight: 600, cursor: "pointer", whiteSpace: "nowrap", flexShrink: 0 }}>
              Give feedback
            </button>
          </div>
        </div>
      </div>
    </div>
  );
}

export default function AssistPage() {
  return (
    <Suspense fallback={<div style={{ display: "flex", height: "100%", alignItems: "center", justifyContent: "center", color: "#a09a90", fontFamily: "var(--font-inter), ui-sans-serif, sans-serif", fontSize: "0.85rem" }}>Loading…</div>}>
      <AssistInner />
    </Suspense>
  );
}