"use client";
import type { MailFolder } from "@/app/[lang]/dashboard/mail/page";

const FOLDER_ICONS: Record<string, string> = {
  "\\Inbox": "📥",
  "\\Sent": "📤",
  "\\Drafts": "📝",
  "\\Trash": "🗑️",
  "\\Junk": "⚠️",
  "\\Archive": "📦",
};

const FOLDER_LABELS: Record<string, string> = {
  INBOX: "Gelen Kutusu",
  Sent: "Gönderilenler",
  Drafts: "Taslaklar",
  Trash: "Çöp Kutusu",
  Junk: "Spam",
  Archive: "Arşiv",
};

function getFolderIcon(folder: MailFolder): string {
  if (folder.specialUse && FOLDER_ICONS[folder.specialUse]) return FOLDER_ICONS[folder.specialUse];
  const lower = folder.path.toLowerCase();
  if (lower === "inbox") return "📥";
  if (lower.includes("sent")) return "📤";
  if (lower.includes("draft")) return "📝";
  if (lower.includes("trash")) return "🗑️";
  if (lower.includes("junk") || lower.includes("spam")) return "⚠️";
  if (lower.includes("archive")) return "📦";
  return "📁";
}

function getFolderLabel(folder: MailFolder): string {
  return FOLDER_LABELS[folder.name] ?? FOLDER_LABELS[folder.path] ?? folder.name;
}

export default function FolderList({ folders, active, onSelect }: {
  folders: MailFolder[];
  active: string;
  onSelect: (path: string) => void;
}) {
  const sorted = [...folders].sort((a, b) => {
    if (a.path === "INBOX") return -1;
    if (b.path === "INBOX") return 1;
    if (a.specialUse && !b.specialUse) return -1;
    if (!a.specialUse && b.specialUse) return 1;
    return a.name.localeCompare(b.name);
  });

  return (
    <div className="folder-list">
      {sorted.map((f) => (
        <button
          key={f.path}
          className={`folder-item ${active === f.path ? "active" : ""}`}
          onClick={() => onSelect(f.path)}
        >
          <span className="folder-icon">{getFolderIcon(f)}</span>
          <span className="folder-name">{getFolderLabel(f)}</span>
          {f.unseen > 0 && <span className="folder-badge">{f.unseen}</span>}
        </button>
      ))}
    </div>
  );
}