web/src/components/sidebar/LeftSidebar.tsx

// web/src/components/sidebar/LeftSidebar.tsx
import React, { useMemo, useState } from "react";
import { Button } from "../ui/button";
import { Input } from "../ui/input";
import { Badge } from "../ui/badge";

import { SavedChatSection } from "./SavedChatSection";

import { MailPlus, Users, GraduationCap } from "lucide-react";

import { toast } from "sonner";

import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogFooter,
  DialogHeader,
  DialogTitle,
} from "../ui/dialog";

import type {
  SavedChat,
  Workspace,
  LearningMode,
  Language,
  SpaceType,
  GroupMember,
  User,
  SavedItem,
} from "../../App";
import type { CourseDirectoryItem } from "../../lib/courseDirectory";

import clareAvatar from "../../assets/dfe44dab3ad8cd93953eac4a3e68bd1a5f999653.png";

// ✅ Theme-compatible divider (light/dark) + visibility
const Divider = () => (
  <div className="w-full border-t border-border/70 dark:border-border flex-shrink-0" />
);

type Props = {
  learningMode: LearningMode;
  language: Language;
  onLearningModeChange: (m: LearningMode) => void;
  onLanguageChange: (l: Language) => void;

  spaceType: SpaceType;
  groupMembers: GroupMember[];

  user: User | null;
  onLogin: (u: any) => void;
  onLogout: () => void;
  isLoggedIn: boolean;

  onEditProfile: () => void;

  savedItems: SavedItem[];
  recentlySavedId: string | null;
  onUnsave: (id: string) => void;
  onSave: (
    content: string,
    type: "export" | "quiz" | "summary",
    saveAsChat?: boolean,
    format?: "pdf" | "text",
    workspaceId?: string
  ) => void;

  savedChats: SavedChat[];
  onLoadChat: (chat: SavedChat) => void;
  onDeleteSavedChat: (id: string) => void;
  onRenameSavedChat: (id: string, newTitle: string) => void;

  currentWorkspaceId: string;
  workspaces: Workspace[];

  selectedCourse: string;
  availableCourses: CourseDirectoryItem[];

  // optional if you already wired backend
  onRenameGroupName?: (workspaceId: string, newName: string) => Promise<void> | void;
  onRenameGroupNo?: (workspaceId: string, newNo: number) => Promise<void> | void;
};

function gmailComposeLink(email: string, subject?: string, body?: string) {
  const to = `to=${encodeURIComponent(email)}`;
  const su = subject ? `&su=${encodeURIComponent(subject)}` : "";
  const bd = body ? `&body=${encodeURIComponent(body)}` : "";
  return `https://mail.google.com/mail/?view=cm&fs=1&${to}${su}${bd}`;
}

function norm(s: any) {
  return String(s ?? "").trim().toLowerCase();
}

function pickAny(obj: any, keys: string[]) {
  for (const k of keys) {
    const v = obj?.[k];
    if (v !== undefined && v !== null && String(v).trim() !== "") return v;
  }
  return undefined;
}

function toIntOrFallback(v: any, fb: number) {
  const n = Number(v);
  if (Number.isFinite(n) && n > 0) return Math.floor(n);
  return fb;
}

/**
 * Hard-stop sanitizer to prevent any "pencil/edit" artifacts
 * from appearing in the Group Name area due to backend-provided strings.
 */
function sanitizeGroupLabel(v: any, fallback: string) {
  let s = String(v ?? "").trim();
  if (!s) return fallback;

  // Remove known "edit" text patterns (case-insensitive)
  s = s.replace(/\b(edit|rename|pencil)\b/gi, "").trim();

  // Remove common emoji pencil and variants
  s = s.replace(/✏️|✏/g, "").trim();

  // Collapse excessive whitespace
  s = s.replace(/\s{2,}/g, " ").trim();

  return s || fallback;
}

export function LeftSidebar(props: Props) {
  const {
    isLoggedIn,
    spaceType,
    groupMembers,
    savedChats,
    onLoadChat,
    onDeleteSavedChat,
    onRenameSavedChat,
    currentWorkspaceId,
    workspaces,
    selectedCourse,
    availableCourses,
  } = props;

  const currentWorkspace = useMemo(
    () => workspaces.find((w) => w.id === currentWorkspaceId),
    [workspaces, currentWorkspaceId]
  );

  const isMyWorkspace = useMemo(() => {
    const ws: any = currentWorkspace as any;

    if (ws?.isPersonal === true) return true;
    if (String(ws?.spaceType || "").toLowerCase().includes("my")) return true;
    if (String(ws?.type || "").toLowerCase().includes("my")) return true;
    if (String(ws?.kind || "").toLowerCase().includes("my")) return true;

    const id = String(ws?.id || "").toLowerCase();
    const name = String(ws?.name || "").toLowerCase();
    if (id.includes("my") || id.includes("personal")) return true;
    if (name.includes("my space") || name.includes("personal")) return true;

    return false;
  }, [currentWorkspace]);

  const isTeamSpace = useMemo(() => {
    if (isMyWorkspace) return false;
    const st = String(spaceType || "").toLowerCase();
    return st === "group" || st === "team";
  }, [spaceType, isMyWorkspace]);

  // --------- CourseInfo resolution ---------
  const courseInfo = useMemo((): CourseDirectoryItem | null => {
    const list = Array.isArray(availableCourses) ? availableCourses : [];

    const selRaw = (selectedCourse || "").trim();
    const sel = norm(selRaw);
    if (sel) {
      const hit =
        list.find((c: any) => norm(c.id) === sel) ||
        list.find((c: any) => norm(c.name) === sel);
      if (hit) return hit as any;
    }

    const wsCourse = (currentWorkspace as any)?.courseInfo as
      | { id?: string; name?: string; instructor?: any; teachingAssistant?: any }
      | undefined;

    const wsId = norm(wsCourse?.id);
    if (wsId) return (list.find((c: any) => norm(c.id) === wsId) ?? (wsCourse as any)) as any;

    const wsName = norm(wsCourse?.name);
    if (wsName) return (list.find((c: any) => norm(c.name) === wsName) ?? (wsCourse as any)) as any;

    return null;
  }, [availableCourses, currentWorkspace, selectedCourse]);

  const courseName = useMemo(() => {
    return (courseInfo as any)?.name ?? (selectedCourse || "Course");
  }, [courseInfo, selectedCourse]);

  // --------- Group fields ---------
  const wsGroupNoRaw = useMemo(() => {
    const ws: any = currentWorkspace as any;
    return ws?.groupNo ?? ws?.groupNumber ?? ws?.groupIndex ?? ws?.group_id ?? ws?.groupId ?? 1;
  }, [currentWorkspace]);

  const wsGroupNameRaw = useMemo(() => {
    const ws: any = currentWorkspace as any;
    // If backend sends name/title containing ✏️ etc, we sanitize later before display
    return pickAny(ws, ["groupName", "name", "title"]) || "My Group";
  }, [currentWorkspace]);

  const memberCount = (groupMembers || []).length;

  // ✅ Final display values (sanitized)
  const groupName = useMemo(
    () => sanitizeGroupLabel(wsGroupNameRaw, "My Group"),
    [wsGroupNameRaw]
  );
  const groupNo = useMemo(
    () => toIntOrFallback(wsGroupNoRaw, 1),
    [wsGroupNoRaw]
  );

  // --------- Demo group mapping (My Space only) ---------
  const demoGroupMap: Record<string, { name: string; no: number }> = useMemo(
    () => ({
      "Introduction to AI": { name: "CS 101 Study Group", no: 1 },
      "Machine Learning": { name: "Study Sprint", no: 3 },
      "Data Visualization": { name: "Design Lab", no: 2 },
    }),
    []
  );

  const demoGroup = useMemo(() => {
    const hit = demoGroupMap[courseName];
    if (hit) return hit;
    return {
      name: sanitizeGroupLabel(wsGroupNameRaw, "My Group"),
      no: toIntOrFallback(wsGroupNoRaw, 1),
    };
  }, [demoGroupMap, courseName, wsGroupNameRaw, wsGroupNoRaw]);

  // Invite dialog state
  const [inviteOpen, setInviteOpen] = useState(false);
  const [inviteEmail, setInviteEmail] = useState("");

  const handleSendInvite = () => {
    if (!inviteEmail.trim()) {
      toast.error("Please enter an email to invite");
      return;
    }
    toast.success(`Invitation sent to ${inviteEmail}`);
    setInviteEmail("");
    setInviteOpen(false);
  };

  // --------- Contacts ---------
  const instructorName = (courseInfo as any)?.instructor?.name ?? "N/A";
  const instructorEmail = String((courseInfo as any)?.instructor?.email ?? "").trim();

  const taName = (courseInfo as any)?.teachingAssistant?.name ?? "N/A";
  const taEmail = String((courseInfo as any)?.teachingAssistant?.email ?? "").trim();

  return (
    <div className="h-full w-full flex flex-col min-h-0 bg-background text-foreground">
      {/* ================= TOP (non-scroll) ================= */}
      <div className="flex-shrink-0">
        <div className="mt-2 mb-4">
          <Divider />
        </div>

        {/* Course + Group */}
        <div className="px-4 pt-5 pb-6 space-y-4">
          {/* Course row */}
          <div className="flex items-start gap-3">
            <div className="w-6 flex items-start justify-center flex-shrink-0 pt-[2px]">
              <GraduationCap className="w-5 h-5 text-muted-foreground" />
            </div>
            <div className="text-[22px] leading-snug font-semibold truncate">{courseName}</div>
          </div>

          {/* ===== My Space (beautified) ===== */}
          {!isTeamSpace ? (
            <div className="space-y-2">
              <div className="flex items-center justify-between text-[15px]">
                <span className="text-muted-foreground">Group Name:</span>
                <span className="font-semibold truncate max-w-[60%] text-right">
                  {demoGroup.name}
                </span>
              </div>
              <div className="flex items-center justify-between text-[15px]">
                <span className="text-muted-foreground">Group Number:</span>
                <span className="font-semibold">{demoGroup.no}</span>
              </div>
            </div>
          ) : (
            /* ===== Team/Group (no pencil in group name area) ===== */
            <div className="rounded-2xl border bg-background overflow-hidden">
              <div className="px-4 pt-4 pb-3 space-y-3">
                {/* Line 1: group name (read-only) */}
                <div className="flex items-center gap-2">
                  <div className="text-[18px] font-semibold truncate">{groupName}</div>
                </div>

                {/* Line 2: Group {no} ({count}) + Invite */}
                <div className="flex items-center justify-between gap-3">
                  <div className="flex items-center gap-2">
                    <Users className="w-4 h-4 text-muted-foreground" />
                    <div className="text-[16px] font-medium">
                      Group <span className="font-semibold">{groupNo}</span> ({memberCount})
                    </div>
                  </div>

                  <Button
                    type="button"
                    variant="secondary"
                    className="h-9 px-3 text-[13px]"
                    onClick={() => setInviteOpen(true)}
                  >
                    <MailPlus className="w-4 h-4 mr-2" />
                    Invite
                  </Button>
                </div>
              </div>

              <div className="px-3 pb-3 space-y-2">
                {(groupMembers || []).map((member) => {
                  const isAI = !!(member as any).isAI;
                  const name = String((member as any).name || "");
                  const email = String((member as any).email || "");
                  const initials = name
                    ? name
                        .split(" ")
                        .filter(Boolean)
                        .map((n) => n[0])
                        .join("")
                        .toUpperCase()
                    : "?";

                  return (
                    <div
                      key={(member as any).id}
                      className="flex items-center gap-3 p-2 rounded-lg hover:bg-muted/50 transition-colors"
                    >
                      <div
                        className={`w-8 h-8 rounded-full flex items-center justify-center flex-shrink-0 ${
                          isAI ? "overflow-hidden bg-background" : "bg-muted"
                        }`}
                      >
                        {isAI ? (
                          <img src={clareAvatar} alt="Clare" className="w-full h-full object-cover" />
                        ) : (
                          <span className="text-sm">{initials}</span>
                        )}
                      </div>

                      <div className="flex-1 min-w-0">
                        <div className="flex items-center gap-2">
                          <p className="text-sm truncate">{name}</p>
                          {isAI && (
                            <Badge variant="secondary" className="text-xs">
                              AI
                            </Badge>
                          )}
                        </div>
                        <p className="text-xs text-muted-foreground truncate">{email}</p>
                      </div>

                      <div className="w-2 h-2 rounded-full bg-green-500 flex-shrink-0" title="Online" />
                    </div>
                  );
                })}
              </div>
            </div>
          )}
        </div>

        <div className="mt-1 mb-6">
          <Divider />
        </div>
      </div>

      {/* ================= MIDDLE (only scroll) ================= */}
      <div className="flex-1 min-h-0 overflow-hidden">
        <div className="h-full min-h-0 panelScroll px-0 py-0">
          <SavedChatSection
            isLoggedIn={isLoggedIn}
            savedChats={savedChats}
            onLoadChat={onLoadChat}
            onDeleteSavedChat={onDeleteSavedChat}
            onRenameSavedChat={onRenameSavedChat}
          />
        </div>
      </div>

      {/* ================= BOTTOM (fixed, non-scroll) ================= */}
      <div className="flex-shrink-0">
        <div className="mt-6 mb-4">
          <Divider />
        </div>

        <div className="px-4 py-4 space-y-2 text-[16px]">
          <div className="text-muted-foreground">
            Instructor:&nbsp;
            {instructorEmail ? (
              <a
                href={gmailComposeLink(
                  instructorEmail,
                  `[Clare] Question about ${courseName}`,
                  `Hi ${instructorName},\n\nI have a question about ${courseName}:\n\n(Write your question here)\n\nThanks,\n`
                )}
                target="_blank"
                rel="noopener noreferrer"
                className="text-primary hover:underline"
              >
                {instructorName}
              </a>
            ) : (
              <span className="text-muted-foreground/60">{instructorName}</span>
            )}
          </div>

          <div className="text-muted-foreground">
            TA:&nbsp;
            {taEmail ? (
              <a
                href={gmailComposeLink(
                  taEmail,
                  `[Clare] Help request for ${courseName}`,
                  `Hi ${taName},\n\nI need help with ${courseName}:\n\n(Write your question here)\n\nThanks,\n`
                )}
                target="_blank"
                rel="noopener noreferrer"
                className="text-primary hover:underline"
              >
                {taName}
              </a>
            ) : (
              <span className="text-muted-foreground/60">{taName}</span>
            )}
          </div>
        </div>
      </div>

      {/* Invite Dialog */}
      <Dialog open={inviteOpen} onOpenChange={setInviteOpen}>
        <DialogContent className="w-[600px] max-w-[600px] sm:max-w-[600px]" style={{ maxWidth: 600 }}>
          <DialogHeader>
            <DialogTitle>Invite member</DialogTitle>
            <DialogDescription>Send a quick email invite with the team details.</DialogDescription>
          </DialogHeader>
          <div className="space-y-3">
            <Input
              type="email"
              placeholder="name@example.com"
              value={inviteEmail}
              onChange={(e) => setInviteEmail(e.target.value)}
            />
            <p className="text-xs text-muted-foreground">
              An invitation email with a join link will be sent to this address.
            </p>
          </div>
          <DialogFooter>
            <Button variant="outline" onClick={() => setInviteOpen(false)}>
              Cancel
            </Button>
            <Button onClick={handleSendInvite}>Send invite</Button>
          </DialogFooter>
        </DialogContent>
      </Dialog>
    </div>
  );
}