import {
  ChevronDown,
  CircleDollarSign,
  CircleEllipsis,
  Clock3,
  Crown,
  FileEdit,
  Globe,
  Home,
  Inbox,
  ListChecks,
  LogOut,
  Mail,
  Menu,
  HandHelping,
  Plug,
  Send,
  Settings,
  Shield,
  ShieldAlert,
  Sparkles,
  Star,
  Trash2,
  Users,
  UsersRound,
  UserRound,
  X,
} from "lucide-react";
import { useCallback, useEffect, useState } from "react";
import { getCurrentAccount, getMyCompanyDomain } from "../api";
import {
  AUTH_ACCOUNT_KEY,
  AUTH_TOKEN_KEY,
  clearSession,
  getAccessToken,
} from "../auth";
import Brand from "./Brand";
import MobileChrome from "./MobileChrome";
import { ShellModeContext } from "../shellMode";
import CompanyDnsSetup from "./CompanyDnsSetup";
import CompanyDomains from "./CompanyDomains";
import CompanyAdministrators from "./CompanyAdministrators";
import CompanyAliases from "./CompanyAliases";
import CompanyGroups from "./CompanyGroups";
import CompanyPeople from "./CompanyPeople";
import CompanySecurity from "./CompanySecurity";
import CompanyOverview from "./CompanyOverview";
import CompanyOverviewSetup, { isOrgSetupComplete } from "./CompanyOverviewSetup";
import ChangePasswordModal from "./ChangePasswordModal";
import ComposeDock, { triggerOpenCompose } from "./ComposeDock";
import HumanHandoff from "./HumanHandoff";
import AccountProfile from "./AccountProfile";
import AccountSettings from "./AccountSettings";
import MailboxView from "./MailboxView";

const mailItems = [
  [Inbox, "Inbox", "unread"],
  [Star, "Starred", "starred"],
  [Clock3, "Snoozed"],
  [Send, "Sent"],
  [FileEdit, "Drafts", "drafts"],
  [ShieldAlert, "Spam"],
  [Trash2, "Trash"],
  [Clock3, "Scheduled"],
];

const labels = [
  ["Important", "rose", "Important"],
  ["Projects", "violet", "Projects"],
  ["Clients", "blue", "Clients"],
  ["Finance", "amber", "Finance"],
  ["Personal", "green", "Personal"],
];

const agentItems = [
  [HandHelping, "Human Handoff", "handoff"],
  [Sparkles, "Ask Agent", "ask"],
  [ListChecks, "Action Items", "actions"],
  [Sparkles, "Summaries", "summaries"],
  [Plug, "Integrations", "integrations"],
];

const companyNavItems = [
  [Home, "Overview"],
  [Users, "People"],
  [UsersRound, "Groups"],
  [Globe, "Domains"],
  [CircleEllipsis, "Aliases"],
];

const manageNavItems = [
  [Shield, "Security"],
  [Crown, "Administrators"],
  [CircleDollarSign, "Billing"],
  [Settings, "Settings"],
];

function SidebarSection({ title, children, className = "" }) {
  return (
    <section className={`dashboard-sidebar-section ${className}`}>
      <h2>{title}</h2>
      {children}
    </section>
  );
}

function NavBadge({ value, variant = "coral" }) {
  if (!value || value <= 0) return null;
  return <em className={variant === "neutral" ? "nav-badge-neutral" : "nav-badge-coral"}>{value}</em>;
}

export default function DashboardPage() {
  const [account, setAccount] = useState(null);
  const [companyDomain, setCompanyDomain] = useState(null);
  const [needsDnsSetup, setNeedsDnsSetup] = useState(false);
  const [domainError, setDomainError] = useState("");
  const [active, setActive] = useState("Inbox");
  const [mobileMenuOpen, setMobileMenuOpen] = useState(false);
  const [sidebarExpanded, setSidebarExpanded] = useState(
    () => typeof window !== "undefined" && window.matchMedia("(min-width: 1200px)").matches,
  );
  const [sheet, setSheet] = useState(null);
  const [notice, setNotice] = useState("");
  const [loading, setLoading] = useState(true);
  const [mailRefreshKey, setMailRefreshKey] = useState(0);
  const [lens, setLens] = useState("all");
  const [agentNav, setAgentNav] = useState(null);
  const [openThreadId, setOpenThreadId] = useState(null);
  const [labelsExpanded, setLabelsExpanded] = useState(false);
  const [companyActive, setCompanyActive] = useState(null);
  const [mustChangePassword, setMustChangePassword] = useState(false);
  const [mailStats, setMailStats] = useState({
    unread: 0,
    starred: 0,
    important: 0,
    drafts: 0,
    actionItems: 0,
    labels: {},
  });
  const handleStats = useCallback((stats) => setMailStats(stats), []);

  useEffect(() => {
    const token = getAccessToken();
    if (!token) {
      window.location.replace("/login");
      return;
    }

    getCurrentAccount(token)
      .then(async (currentAccount) => {
        sessionStorage.setItem(AUTH_ACCOUNT_KEY, JSON.stringify(currentAccount));
        setAccount(currentAccount);
        setMustChangePassword(Boolean(currentAccount.must_change_password));
        if (currentAccount.account_type === "company" && currentAccount.is_domain_owner) {
          try {
            const domain = await getMyCompanyDomain(token);
            setCompanyDomain(domain);
            setNeedsDnsSetup(domain.status === "pending_dns");
          } catch (error) {
            setDomainError(error.message || "Could not load your company domain.");
          }
        }
        setLoading(false);
      })
      .catch(() => {
        if (!getAccessToken()) return;
        clearSession();
        window.location.replace("/login");
      });
  }, []);

  useEffect(() => {
    if (!account?.is_domain_owner || needsDnsSetup) return;
    if (!isOrgSetupComplete(account.id)) {
      setCompanyActive("Overview");
    }
  }, [account, needsDnsSetup]);

  function logout() {
    clearSession();
    window.location.replace("/login");
  }

  function closeMobileMenu() {
    if (window.matchMedia("(max-width: 767.98px)").matches) {
      setMobileMenuOpen(false);
    }
  }

  function toggleSidebar() {
    if (window.matchMedia("(max-width: 767.98px)").matches) {
      setMobileMenuOpen(false);
      return;
    }
    setSidebarExpanded((open) => !open);
  }

  const sidebarClasses = [
    "dashboard-sidebar",
    mobileMenuOpen ? "open" : "",
    sidebarExpanded ? "expanded" : "",
  ].filter(Boolean).join(" ");

  function selectCompanyItem(label) {
    setCompanyActive(label);
    setAgentNav(null);
    closeMobileMenu();
    setSheet(null);
  }

  function selectMailItem(item) {
    setCompanyActive(null);
    setAgentNav(null);
    if (item === "Starred") {
      setActive("Inbox");
      setLens("starred");
    } else if (item === "Sent") {
      setActive("Outbox");
      setLens("all");
    } else {
      setActive(item);
      setLens("all");
    }
    closeMobileMenu();
    setSheet(null);
  }

  function selectLabel(name) {
    setCompanyActive(null);
    setAgentNav(null);
    setActive("Inbox");
    setLens(name);
    closeMobileMenu();
    setSheet(null);
  }

  function selectAgentItem(item, actionKey) {
    setCompanyActive(null);
    setActive("Inbox");
    setLens("all");
    setAgentNav(actionKey);
    closeMobileMenu();
    const compact = window.matchMedia("(max-width: 1199.98px)").matches;
    setSheet(actionKey === "handoff" || !compact ? null : "agent");
  }

  function openAgentDestination(actionKey) {
    setCompanyActive(null);
    setActive("Inbox");
    setLens("all");
    setAgentNav(actionKey);
    closeMobileMenu();
    setSheet("agent");
  }

  function showMailboxForSheet() {
    setCompanyActive(null);
    setActive("Inbox");
    setLens("all");
    closeMobileMenu();
  }

  function openSheet(next) {
    if (next === "agent" || next === "calendar" || next === "notes") {
      showMailboxForSheet();
      setAgentNav(next === "agent" ? "ask" : null);
    }
    setSheet(next);
  }

  function openCompose(context = null) {
    triggerOpenCompose(context);
  }

  function openProfile() {
    setCompanyActive(null);
    setActive("Profile");
    setAgentNav(null);
    closeMobileMenu();
    setSheet(null);
  }

  function updateAccount(next) {
    setAccount(next);
    sessionStorage.setItem("agmail_account", JSON.stringify(next));
  }

  function openExternalThread(threadId) {
    setCompanyActive(null);
    setActive("Inbox");
    setLens("all");
    setAgentNav(null);
    setOpenThreadId(threadId);
  }

  function emailSent() {
    setActive("Outbox");
    setMailRefreshKey((key) => key + 1);
    setNotice("Message accepted by the mail server. Delivery can take a few minutes — check spam if it does not arrive.");
    window.setTimeout(() => setNotice(""), 4000);
  }

  if (loading || !account) {
    return <main className="dashboard-loading"><Brand /><span>Opening your workspace…</span></main>;
  }

  if (account.account_type === "company" && domainError) {
    return (
      <main className="company-dns-setup">
        <header className="company-dns-header">
          <Brand />
          <button type="button" onClick={logout}>Log out</button>
        </header>
        <section className="company-dns-card">
          <p className="eyebrow">Company setup</p>
          <h1>Domain not ready</h1>
          <p className="form-error" role="alert">{domainError}</p>
        </section>
      </main>
    );
  }

  if (needsDnsSetup && companyDomain) {
    return (
      <CompanyDnsSetup
        account={account}
        domain={companyDomain}
        onComplete={() => {
          setCompanyDomain({ ...companyDomain, status: "active" });
          setNeedsDnsSetup(false);
          setCompanyActive("Overview");
        }}
        onLogout={logout}
      />
    );
  }

  const workspaceLabel = account.account_type === "company" ? "Company" : "Individual";
  const workspaceTitle = account.account_type === "company" && companyDomain
    ? companyDomain.domain_name
    : "Personal workspace";
  const isDomainOwner = account.account_type === "company" && account.is_domain_owner;
  const isOrgOnboarding = isDomainOwner && !isOrgSetupComplete(account.id);
  const mailActive = lens === "starred"
    ? "Starred"
    : active === "Outbox"
      ? "Sent"
      : labels.some(([name]) => lens === name)
        ? "Inbox"
        : active;

  return (
    <ShellModeContext.Provider value={{ sheet, setSheet }}>
    <div
      className="dashboard"
      data-sheet={sheet || undefined}
      data-onboarding={isOrgOnboarding ? "true" : undefined}
    >
      <header className="dashboard-mobile-header">
        <Brand forceHome />
        <button aria-label="Open navigation" type="button" onClick={() => { setSheet(null); setMobileMenuOpen(true); }}>
          <Menu size={21} />
        </button>
      </header>

      {mobileMenuOpen && (
        <button className="dashboard-scrim" aria-label="Close navigation" onClick={() => setMobileMenuOpen(false)} />
      )}
      <aside className={sidebarClasses}>
        <div className="dashboard-brand-row">
          <Brand forceHome />
          <button
            aria-label={(mobileMenuOpen || sidebarExpanded) ? "Collapse navigation" : "Expand navigation"}
            type="button"
            onClick={toggleSidebar}
          >
            {(mobileMenuOpen || sidebarExpanded) ? <X size={19} /> : <Menu size={19} />}
          </button>
        </div>

        {!isOrgOnboarding && (
          <button className="dashboard-compose" type="button" onClick={openCompose}>
            <Mail size={16} strokeWidth={1.75} />
            <span>Compose</span>
          </button>
        )}

        <div className="dashboard-sidebar-scroll">
          {isDomainOwner && (
            <>
              <SidebarSection title="Company" className="dashboard-sidebar-company dashboard-sidebar-first">
                <nav aria-label="Company">
                  {companyNavItems.map(([ItemIcon, label]) => (
                    <button
                      className={`dashboard-nav-item dashboard-company-item${companyActive === label ? " active" : ""}`}
                      key={label}
                      type="button"
                      onClick={() => selectCompanyItem(label)}
                    >
                      <ItemIcon size={16} strokeWidth={1.75} />
                      <span>{label}</span>
                    </button>
                  ))}
                </nav>
              </SidebarSection>
              <SidebarSection title="Manage" className="dashboard-sidebar-manage">
                <nav aria-label="Manage">
                  {manageNavItems.map(([ItemIcon, label]) => (
                    <button
                      className={`dashboard-nav-item dashboard-company-item${companyActive === label ? " active" : ""}`}
                      key={label}
                      type="button"
                      onClick={() => selectCompanyItem(label)}
                    >
                      <ItemIcon size={16} strokeWidth={1.75} />
                      <span>{label}</span>
                    </button>
                  ))}
                </nav>
              </SidebarSection>
            </>
          )}

          {!isOrgOnboarding && (
            <SidebarSection title="Mail" className="dashboard-sidebar-mail">
              <nav aria-label="Mail">
                {mailItems.map(([ItemIcon, label, countKey]) => (
                  <button
                    className={`dashboard-nav-item${!companyActive && mailActive === label ? " active" : ""}`}
                    key={label}
                    type="button"
                    onClick={() => selectMailItem(label)}
                  >
                    <ItemIcon size={16} strokeWidth={1.75} />
                    <span>{label}</span>
                    <NavBadge value={countKey ? mailStats[countKey] : 0} />
                  </button>
                ))}
              </nav>
            </SidebarSection>
          )}

          {!isOrgOnboarding && (
          <SidebarSection title="Labels" className="dashboard-sidebar-labels">
            <nav aria-label="Labels">
              {labels.map(([name, tone, countKey]) => (
                <button
                  className={`dashboard-nav-item dashboard-label-item${!companyActive && lens === name ? " active" : ""}`}
                  key={name}
                  type="button"
                  onClick={() => selectLabel(name)}
                >
                  <i className={`label-dot label-dot-${tone}`} />
                  <span>{name}</span>
                  <NavBadge variant="neutral" value={mailStats.labels?.[countKey]} />
                </button>
              ))}
              <button
                type="button"
                className="dashboard-nav-item dashboard-label-more"
                onClick={() => setLabelsExpanded((open) => !open)}
              >
                <ChevronDown size={14} strokeWidth={1.75} className={labelsExpanded ? "open" : ""} />
                <span>{labelsExpanded ? "Less" : "More"}</span>
              </button>
            </nav>
          </SidebarSection>
          )}

          {!isOrgOnboarding && (
          <SidebarSection title="Agent" className="dashboard-sidebar-agent">
            <nav aria-label="Agent">
              {agentItems.map(([ItemIcon, label, actionKey]) => (
                <button
                  className={`dashboard-nav-item dashboard-agent-item${!companyActive && agentNav === actionKey ? " active" : ""}`}
                  key={label}
                  type="button"
                  onClick={() => selectAgentItem(label, actionKey)}
                >
                  <ItemIcon size={16} strokeWidth={1.75} />
                  <span>{label}</span>
                  <NavBadge value={actionKey === "actions" ? mailStats.actionItems : 0} />
                </button>
              ))}
            </nav>
          </SidebarSection>
          )}
        </div>

        <div className="dashboard-profile">
          {account.profile_picture_url ? (
            <img src={account.profile_picture_url} alt="" className="dashboard-profile-photo" />
          ) : (
            <span>{account.first_name[0]}{account.last_name[0]}</span>
          )}
          <div><strong>{account.first_name} {account.last_name}</strong><small>{account.email}</small></div>
          <button aria-label="Open profile" title="Profile" type="button" onClick={openProfile}><UserRound size={17} /></button>
          <button aria-label="Log out" title="Log out" type="button" onClick={logout}><LogOut size={17} /></button>
        </div>
      </aside>

      <main className="dashboard-content">
        {companyActive && !["Overview", "Domains", "People", "Groups", "Aliases", "Security", "Administrators", "Settings"].includes(companyActive) && (
          <div className="dashboard-content-heading">
            <div><p>{workspaceTitle}</p><h1>{companyActive}</h1></div>
            <span className="dashboard-account-pill">{workspaceLabel}</span>
          </div>
        )}
        {!companyActive && !["Inbox", "Outbox", "Trash", "Profile", "Settings"].includes(active) && (
          <div className="dashboard-content-heading">
            <div><p>{workspaceTitle}</p><h1>{active}</h1></div>
            <span className="dashboard-account-pill">{workspaceLabel}</span>
          </div>
        )}
        {!companyActive && active === "Inbox" && agentNav === "handoff" && (
          <HumanHandoff account={account} onOpenExternal={openExternalThread} />
        )}
        {!companyActive && active === "Inbox" && agentNav !== "handoff" && (
          <MailboxView
            mailbox="inbox"
            title="Inbox"
            refreshKey={mailRefreshKey}
            account={account}
            lens={lens}
            agentNav={agentNav}
            initialThreadId={openThreadId}
            onLogout={logout}
            onOpenSettings={() => selectMailItem("Settings")}
            onOpenProfile={openProfile}
            onAccountUpdate={updateAccount}
            onCompose={openCompose}
            onStats={handleStats}
          />
        )}
        {!companyActive && active === "Outbox" && (
          <MailboxView
            mailbox="sent"
            title="Sent"
            refreshKey={mailRefreshKey}
            account={account}
            onLogout={logout}
            onOpenSettings={() => selectMailItem("Settings")}
            onOpenProfile={openProfile}
            onAccountUpdate={updateAccount}
            onCompose={openCompose}
          />
        )}
        {!companyActive && active === "Trash" && (
          <MailboxView
            mailbox="trash"
            title="Trash"
            refreshKey={mailRefreshKey}
            account={account}
            onLogout={logout}
            onOpenSettings={() => selectMailItem("Settings")}
            onOpenProfile={openProfile}
            onAccountUpdate={updateAccount}
            onCompose={openCompose}
          />
        )}
        {!companyActive && active === "Profile" && (
          <AccountProfile account={account} onUpdated={updateAccount} />
        )}
        {companyActive === "Overview" && isDomainOwner && !isOrgSetupComplete(account.id) && (
          <CompanyOverviewSetup
            account={account}
            companyDomain={companyDomain}
            onComplete={() => {
              setCompanyActive(null);
              setActive("Inbox");
            }}
          />
        )}
        {companyActive === "Overview" && isDomainOwner && isOrgSetupComplete(account.id) && (
          <CompanyOverview
            account={account}
            companyDomain={companyDomain}
            onNavigate={selectCompanyItem}
          />
        )}
        {companyActive === "Domains" && isDomainOwner && (
          <CompanyDomains
            account={account}
            primaryDomainName={account.company_domain}
          />
        )}
        {companyActive === "People" && isDomainOwner && (
          <CompanyPeople account={account} />
        )}
        {companyActive === "Groups" && isDomainOwner && (
          <CompanyGroups account={account} />
        )}
        {companyActive === "Aliases" && isDomainOwner && (
          <CompanyAliases account={account} />
        )}
        {companyActive === "Security" && isDomainOwner && (
          <CompanySecurity />
        )}
        {companyActive === "Administrators" && isDomainOwner && (
          <CompanyAdministrators account={account} />
        )}
        {companyActive && !["Overview", "Domains", "People", "Groups", "Aliases", "Security", "Administrators", "Settings"].includes(companyActive) && (
          <section className="dashboard-empty dashboard-company-view">
            <span><Sparkles size={24} /></span>
            <h2>{companyActive}</h2>
            <p>Company {companyActive.toLowerCase()} controls will appear here.</p>
          </section>
        )}
        {(active === "Settings" || companyActive === "Settings") && (
          <AccountSettings />
        )}
        {!companyActive && !["Inbox", "Outbox", "Trash", "Settings", "Profile"].includes(active) && (
          <section className="dashboard-empty">
            <span><Sparkles size={24} /></span>
            <h2>{active} is ready for you</h2>
            <p>Your personal mail and agent tools will appear here.</p>
          </section>
        )}
      </main>
      {notice && <div className="dashboard-notice" role="status">{notice}</div>}
      {mustChangePassword && (
        <ChangePasswordModal
          account={account}
          onComplete={(updated) => {
            setAccount(updated);
            setMustChangePassword(false);
            sessionStorage.setItem("agmail_account", JSON.stringify(updated));
          }}
        />
      )}
      {sheet && sheet !== "more" && (
        <button className="shell-drawer-scrim" type="button" aria-label="Close panel" onClick={() => setSheet(null)} />
      )}
      {!isOrgOnboarding && (
        <MobileChrome
          sheet={sheet}
          mailActive={!sheet && !companyActive && agentNav !== "handoff"}
          account={account}
          onMail={() => selectMailItem("Inbox")}
          onAgent={() => openSheet("agent")}
          onCompose={() => openCompose()}
          onCalendar={() => openSheet("calendar")}
          onMore={() => setSheet((current) => (current === "more" ? null : "more"))}
          onClose={() => setSheet(null)}
          onSettings={() => selectMailItem("Settings")}
          onNotes={() => openSheet("notes")}
          onHandoff={() => selectAgentItem("Human Handoff", "handoff")}
          onActionItems={() => openAgentDestination("actions")}
          onSummaries={() => openAgentDestination("summaries")}
          onIntegrations={() => openAgentDestination("integrations")}
          onLogout={logout}
        />
      )}
      <ComposeDock account={account} onSent={emailSent} agentOpen={!companyActive} />
    </div>
    </ShellModeContext.Provider>
  );
}