// Dashboard — campaign & folder manager
// Reads from Firestore: workspaces/{wid}/folders, workspaces/{wid}/campaigns

const { useState, useEffect, useMemo } = React;

const StatusBadge = ({ status }) => {
  const map = {
    draft:    { cls: "status-draft",    label: "Draft" },
    review:   { cls: "status-review",   label: "In review" },
    ready:    { cls: "status-ready",    label: "Ready" },
    sent:     { cls: "status-sent",     label: "Sent" },
    archived: { cls: "status-archived", label: "Archived" },
  };
  const m = map[status] || map.draft;
  return (
    <span className={`status-badge ${m.cls}`}>
      <span className="dot" />
      {m.label}
    </span>
  );
};

const LocaleStack = ({ codes = [], missing = [] }) => {
  const visible = codes.slice(0, 4);
  const extra = codes.length - visible.length;
  return (
    <span className="locale-stack">
      {visible.map((c, i) => (
        <span key={c} className={`lc${i === 0 ? " is-default" : ""}`} title={c}>{c}</span>
      ))}
      {missing.map(c => (
        <span key={c} className="lc is-missing" title={`${c} missing copy`}>{c}</span>
      ))}
      {extra > 0 && <span className="lc-more">+{extra}</span>}
    </span>
  );
};

const timeAgoShort = (ts) => {
  if (!ts) return "—";
  const now = Date.now();
  const t = ts.toDate ? ts.toDate().getTime() : new Date(ts).getTime();
  const diff = now - t;
  const mins = Math.floor(diff / 60000);
  if (mins < 1) return "Just now";
  if (mins < 60) return `${mins} min ago`;
  const hours = Math.floor(mins / 60);
  if (hours < 24) return `${hours} h ago`;
  const days = Math.floor(hours / 24);
  if (days === 1) return "Yesterday";
  if (days < 7) return `${days} days ago`;
  if (days < 30) return `${Math.floor(days / 7)} weeks ago`;
  const d = ts.toDate ? ts.toDate() : new Date(ts);
  return d.toLocaleDateString("en-US", { month: "short", day: "numeric", year: "numeric" });
};

const CampaignCard = ({ c, selected, onSelect, onOpen, onShare, canOpen }) => {
  const tagColor = {
    lifecycle: "#3b6bff",
    transactional: "#16a34a",
    marketing: "#d97706",
  }[c.type] || "#71717a";

  return (
    <div
      className={`camp-card${selected ? " is-selected" : ""}`}
      onClick={() => onSelect(c.id)}
      onDoubleClick={canOpen ? onOpen : undefined}
      style={{ "--card-c": tagColor }}>
      <div className="camp-card-thumb">
        <div className="camp-card-thumb-art">
          <div className="thumb-line thumb-line--w70" />
          <div className="thumb-line thumb-line--w40" />
          <div className="thumb-block" />
          <div className="thumb-line thumb-line--w55" />
          <div className="thumb-line thumb-line--w80" />
          <div className="thumb-line thumb-line--w50" />
          <div className="thumb-cta" />
        </div>
        <div className="camp-card-thumb-overlay">
          <div className={`camp-icon ${c.type}`}>
            <Icon name={c.icon || "mail"} size={15} />
          </div>
          <span className="camp-card-type">{c.type}</span>
        </div>
        <div className="camp-card-hover-actions" onClick={(e) => e.stopPropagation()}>
          {canOpen && (
            <button onClick={onOpen} title="Open in composer">
              <Icon name="eye" size={13} /> Open
            </button>
          )}
          <button onClick={onShare} title="Share live preview">
            <Icon name="globe" size={13} />
          </button>
        </div>
      </div>
      <div className="camp-card-body">
        <div className="camp-card-row1">
          <div className="camp-card-title" title={c.title}>{c.title}</div>
          <StatusBadge status={c.status} />
        </div>
        <div className="camp-card-subj" title={c.subject}>{c.subject}</div>
        <div className="camp-card-meta">
          <LocaleStack codes={c.locales} missing={c.localesMissing} />
          <span className="camp-card-dot" />
          <div className="author">
            <div className="author-av" style={{ background: c.authorColor || "#71717a" }}>{c.authorInitials || "?"}</div>
            <span className="camp-card-modified">{timeAgoShort(c.updatedAt)}</span>
          </div>
        </div>
      </div>
    </div>
  );
};

const CampaignGrid = ({ campaigns, selectedId, onSelect, onOpen, onShare, canOpen }) => (
  <div className="camp-grid">
    {campaigns.map(c => (
      <CampaignCard key={c.id} c={c}
        selected={selectedId === c.id}
        onSelect={onSelect}
        onOpen={onOpen}
        onShare={onShare}
        canOpen={canOpen} />
    ))}
  </div>
);

const FolderRow = ({ f, active, onClick }) => (
  <button
    className={`folder-row depth-${f.depth || 0}${active ? " is-active" : ""}`}
    onClick={onClick}
  >
    {f.kind === "folder" && (
      <span className={`folder-chev${f.open ? " is-open" : ""}`}>
        <Icon name="chevronRight" size={11} />
      </span>
    )}
    {f.kind === "view" && <span className="folder-chev" />}
    <span className="folder-icon"><Icon name={f.icon || "mail"} size={14} /></span>
    <span className="folder-label">{f.label}</span>
    <span className="folder-count">{f.count}</span>
  </button>
);

const DashboardView = ({ onOpenCampaign, onOpenShare, profile }) => {
  const [workspace, setWorkspace] = useState(null);
  const [folders, setFolders] = useState([]);
  const [campaigns, setCampaigns] = useState([]);
  const [loading, setLoading] = useState(true);
  const [loadError, setLoadError] = useState("");
  const [activeFolder, setActiveFolder] = useState("all");
  const [viewMode, setViewMode] = useState("list");
  const [selectedRow, setSelectedRow] = useState(null);
  const [searchQuery, setSearchQuery] = useState("");
  const canCreateCampaign = hasPermission(profile, "createCampaign");
  const canCreateFolder = hasPermission(profile, "createFolder");
  const canDeleteCampaign = hasPermission(profile, "deleteCampaign");
  const canOpenComposer = hasPermission(profile, "accessComposer");

  const wid = profile?.workspaceId;

  useEffect(() => {
    if (!wid) {
      setLoadError("This account is not linked to a workspace yet.");
      setLoading(false);
      return;
    }

    setLoading(true);
    setLoadError("");

    fbDb.collection("workspaces").doc(wid).get()
      .then(snap => {
        if (snap.exists) setWorkspace(snap.data());
      })
      .catch(err => {
        console.error("Unable to load workspace", err);
      });

    const unsubFolders = fbDb.collection("workspaces").doc(wid).collection("folders")
      .onSnapshot(snap => {
        setFolders(
          snap.docs
            .map(d => ({ id: d.id, ...d.data() }))
            .sort((a, b) => (a.order ?? 0) - (b.order ?? 0))
        );
      }, err => {
        console.error("Unable to load folders", err);
        setLoadError("The workspace library could not be loaded for this account.");
        setLoading(false);
      });

    const unsubCampaigns = fbDb.collection("workspaces").doc(wid).collection("campaigns")
      .onSnapshot(snap => {
        setCampaigns(
          snap.docs
            .map(d => ({ id: d.id, ...d.data() }))
            .sort((a, b) => {
              const aTime = a.updatedAt?.toDate ? a.updatedAt.toDate().getTime() : new Date(a.updatedAt || 0).getTime();
              const bTime = b.updatedAt?.toDate ? b.updatedAt.toDate().getTime() : new Date(b.updatedAt || 0).getTime();
              return bTime - aTime;
            })
        );
        setLoadError("");
        setLoading(false);
      }, err => {
        console.error("Unable to load campaigns", err);
        setLoadError("The workspace library could not be loaded for this account.");
        setLoading(false);
      });

    return () => { unsubFolders(); unsubCampaigns(); };
  }, [wid]);

  const smartViews = useMemo(() => [
    { id: "all", label: "All campaigns", icon: "grid", kind: "view", count: campaigns.length },
    { id: "starred", label: "Starred", icon: "star", kind: "view", count: campaigns.filter(c => c.starred).length },
    { id: "drafts", label: "Drafts", icon: "file", kind: "view", count: campaigns.filter(c => c.status === "draft").length },
  ], [campaigns]);

  const folderTree = useMemo(() => {
    const roots = folders.filter(f => !f.parentId);
    const buildTree = (parentId, depth) => {
      const children = folders.filter(f => f.parentId === parentId);
      return children.flatMap(f => [
        { ...f, depth, kind: "folder", icon: "mail", count: campaigns.filter(c => c.folderId === f.id).length },
        ...buildTree(f.id, depth + 1),
      ]);
    };
    return roots.flatMap(f => [
      { ...f, depth: 0, kind: "folder", icon: "mail", count: campaigns.filter(c => c.folderId === f.id).length },
      ...buildTree(f.id, 1),
    ]);
  }, [folders, campaigns]);

  const filtered = useMemo(() => {
    let list = campaigns;
    if (activeFolder === "starred") list = list.filter(c => c.starred);
    else if (activeFolder === "drafts") list = list.filter(c => c.status === "draft");
    else if (activeFolder !== "all") list = list.filter(c => c.folderId === activeFolder);
    if (searchQuery) {
      const q = searchQuery.toLowerCase();
      list = list.filter(c => c.title?.toLowerCase().includes(q) || c.subject?.toLowerCase().includes(q));
    }
    return list;
  }, [campaigns, activeFolder, searchQuery]);

  const activeFolderLabel = activeFolder === "all" ? "All campaigns"
    : activeFolder === "starred" ? "Starred"
    : activeFolder === "drafts" ? "Drafts"
    : folders.find(f => f.id === activeFolder)?.name || "Campaigns";

  const createCampaign = async () => {
    if (!wid) return;
    const ref = fbDb.collection("workspaces").doc(wid).collection("campaigns").doc();
    await ref.set({
      title: "Untitled campaign",
      subject: "",
      folderId: activeFolder !== "all" && activeFolder !== "starred" && activeFolder !== "drafts" ? activeFolder : null,
      status: "draft",
      type: "lifecycle",
      authorId: fbAuth.currentUser.uid,
      authorInitials: profile.avatarInitials,
      authorName: profile.displayName,
      authorColor: profile.avatarColor,
      locales: ["EN"],
      localesMissing: [],
      tags: [],
      starred: false,
      version: 1,
      createdAt: firebase.firestore.FieldValue.serverTimestamp(),
      updatedAt: firebase.firestore.FieldValue.serverTimestamp(),
    });
  };

  const createFolder = async () => {
    if (!wid) return;
    const name = prompt("Folder name:");
    if (!name) return;
    const parentId = activeFolder !== "all" && activeFolder !== "starred" && activeFolder !== "drafts"
      ? activeFolder : null;
    await fbDb.collection("workspaces").doc(wid).collection("folders").add({
      name,
      parentId,
      order: folders.length,
    });
  };

  const deleteCampaign = async (cid) => {
    if (!wid || !confirm("Delete this campaign?")) return;
    await fbDb.collection("workspaces").doc(wid).collection("campaigns").doc(cid).delete();
  };

  if (loading) {
    return (
      <div className="dash" style={{display:"flex",alignItems:"center",justifyContent:"center"}}>
        <span className="auth-spinner" />
      </div>
    );
  }

  if (loadError) {
    return (
      <div className="dash" style={{display:"flex",alignItems:"center",justifyContent:"center",padding:"48px"}}>
        <div className="dash-empty" style={{maxWidth:"520px"}}>
          <Icon name="warn" size={32} />
          <div className="dash-empty-t">Workspace unavailable</div>
          <div className="dash-empty-s">{loadError}</div>
        </div>
      </div>
    );
  }

  return (
    <div className="dash">
      {/* ---------- Folder rail ---------- */}
      <aside className="dash-rail">
        <div className="dash-rail-head">
          <div className="workspace-pill" title="Workspace">
            <span className="ws-mark">{workspace?.name?.charAt(0) || "W"}</span>
            <span className="ws-meta">
              <div className="ws-name">{workspace?.name || "Workspace"}</div>
              <div className="ws-tier">{workspace?.plan ? workspace.plan.charAt(0).toUpperCase() + workspace.plan.slice(1) : "—"} plan · {campaigns.length} templates</div>
            </span>
          </div>
        </div>

        <div className="dash-rail-section">Library</div>
        <div className="folder-tree">
          {smartViews.map(f => (
            <FolderRow key={f.id} f={f} active={activeFolder === f.id} onClick={() => setActiveFolder(f.id)} />
          ))}
        </div>

        <div className="dash-rail-section">Workspace <span className="count">{campaigns.length}</span></div>
        <div className="folder-tree">
          {folderTree.map(f => (
            <FolderRow key={f.id} f={f} active={activeFolder === f.id} onClick={() => setActiveFolder(f.id)} />
          ))}
          {folderTree.length === 0 && (
            <div style={{padding:"8px 16px",fontSize:"11px",color:"var(--fg-3)"}}>No folders yet</div>
          )}
        </div>

        <div className="rail-storage">
          <div className="rail-storage-head">
            <span>Asset storage</span>
            <span>0 / 50 GB</span>
          </div>
          <div className="rail-storage-track">
            <div className="rail-storage-fill" style={{ width: "0%" }} />
          </div>
          <div className="rail-storage-meta">0% used</div>
        </div>
      </aside>

      {/* ---------- Content ---------- */}
      <section className="dash-content">
        <header className="dash-header">
          <div className="dash-title">
            <div className="dash-breadcrumb">
              <b>{activeFolderLabel}</b>
            </div>
            <div className="dash-h1">
              {activeFolderLabel}
              <span className="dash-h1-count">{filtered.length} {filtered.length === 1 ? "campaign" : "campaigns"}</span>
            </div>
          </div>
          <div className="dash-actions">
            <Button variant="ghost" iconLeft="globe" onClick={onOpenShare}>Share live preview</Button>
            {canCreateFolder && <Button variant="secondary" iconLeft="file" onClick={createFolder}>New folder</Button>}
            {canCreateCampaign && <Button variant="primary" iconLeft="plus" onClick={createCampaign}>New campaign</Button>}
          </div>
        </header>

        <div className="dash-toolbar">
          <div className="dash-search">
            <Icon name="search" size={13} />
            <input placeholder="Search campaigns, subject lines…" value={searchQuery} onChange={e => setSearchQuery(e.target.value)} />
            <span className="kbd-hint">⌘K</span>
          </div>
          <button className="filter-chip">
            <Icon name="chip" size={13} /> Status
            <Icon name="chevronDown" size={11} />
          </button>
          <button className="filter-chip">
            <Icon name="globe" size={13} /> Locales
            <Icon name="chevronDown" size={11} />
          </button>
          <button className="filter-chip">
            <Icon name="history" size={13} /> Recent
            <Icon name="chevronDown" size={11} />
          </button>
          <div className="dash-toolbar-spacer" />
          <div className="view-toggle">
            <button className={viewMode === "list" ? "is-active" : ""} onClick={() => setViewMode("list")} title="List view">
              <Icon name="viewList" size={14} />
            </button>
            <button className={viewMode === "grid" ? "is-active" : ""} onClick={() => setViewMode("grid")} title="Grid view">
              <Icon name="viewGrid" size={14} />
            </button>
          </div>
        </div>

        <div className="dash-scroll">
          {filtered.length === 0 ? (
            <div className="dash-empty">
              <Icon name="mail" size={32} />
              <div className="dash-empty-t">No campaigns yet</div>
              <div className="dash-empty-s">Create your first email campaign to get started.</div>
              {canCreateCampaign && <Button variant="primary" iconLeft="plus" onClick={createCampaign}>New campaign</Button>}
            </div>
          ) : viewMode === "list" ? (
            <table className="camp-table">
              <thead>
                <tr>
                  <th className="col-name sortable" style={{ width: "44%" }}>Campaign</th>
                  <th style={{ width: "120px" }}>Status</th>
                  <th style={{ width: "180px" }}>Locales</th>
                  <th style={{ width: "150px" }}>Owner</th>
                  <th className="sortable" style={{ width: "150px" }}>Last modified ↓</th>
                  <th style={{ width: "72px" }} />
                </tr>
              </thead>
              <tbody>
                {filtered.map(c => (
                  <tr key={c.id}
                      className={selectedRow === c.id ? "is-selected" : ""}
                      onClick={() => setSelectedRow(c.id)}
                      onDoubleClick={canOpenComposer ? onOpenCampaign : undefined}>
                    <td className="col-name">
                      <div className="camp-name">
                        <div className={`camp-icon ${c.type || "lifecycle"}`}>
                          <Icon name={c.icon || "mail"} size={15} />
                        </div>
                        <div className="camp-name-text">
                          <div className="title">{c.title}</div>
                          <div className="subj">{c.subject || "No subject"}</div>
                        </div>
                      </div>
                    </td>
                    <td><StatusBadge status={c.status} /></td>
                    <td><LocaleStack codes={c.locales || []} missing={c.localesMissing || []} /></td>
                    <td>
                      <div className="author">
                        <div className="author-av" style={{ background: c.authorColor || "#71717a" }}>{c.authorInitials || "?"}</div>
                        <span className="author-name">{c.authorName || "Unknown"}</span>
                      </div>
                    </td>
                    <td><span className="modified">{timeAgoShort(c.updatedAt)}</span></td>
                    <td>
                      <div className="row-actions">
                        {canOpenComposer && (
                          <button title="Open in composer" onClick={(e) => { e.stopPropagation(); onOpenCampaign(); }}>
                            <Icon name="eye" size={14} />
                          </button>
                        )}
                        {canDeleteCampaign && (
                          <button title="Delete" onClick={(e) => { e.stopPropagation(); deleteCampaign(c.id); }}>
                            <Icon name="x" size={14} />
                          </button>
                        )}
                      </div>
                    </td>
                  </tr>
                ))}
              </tbody>
            </table>
          ) : (
            <CampaignGrid campaigns={filtered} selectedId={selectedRow} onSelect={setSelectedRow} onOpen={onOpenCampaign} onShare={onOpenShare} canOpen={canOpenComposer} />
          )}
        </div>
      </section>
    </div>
  );
};

Object.assign(window, { DashboardView });