"use client"

import { useState } from "react"
import Link from "next/link"
import { bulkDeleteUsersAction, bulkEmailUsersAction, setUserStageAction } from "@/app/admin/actions"
import { useRouter } from "next/navigation"

type Student = {
  id: string
  name: string | null
  email: string | null
  class: string | null
  county: string | null
  stage: number
  createdAt: Date | string
  _count: { entries: number }
}

export function BulkUserActions({ students, title = "👥 Elevi" }: { students: Student[], title?: string }) {
  const router = useRouter()
  const [selectedIds, setSelectedIds] = useState<Set<string>>(new Set())
  const [isDeleting, setIsDeleting] = useState(false)
  const [isEmailModalOpen, setIsEmailModalOpen] = useState(false)
  
  // Search filter
  const [searchTerm, setSearchTerm] = useState("")

  // Sort State
  type SortCol = "name" | "email" | "class" | "county" | "stage" | "createdAt" | "entries"
  const [sortCol, setSortCol] = useState<SortCol>("createdAt")
  const [sortAsc, setSortAsc] = useState<boolean>(false)
  const [stageFilter, setStageFilter] = useState<string>("ALL")

  // Email Modal state
  const [emailSubject, setEmailSubject] = useState("")
  const [emailBody, setEmailBody] = useState("")
  const [isSendingEmail, setIsSendingEmail] = useState(false)

  // Search + stage filtering
  const filteredStudents = students.filter(student => {
    // Stage filter
    if (stageFilter !== "ALL" && student.stage !== Number(stageFilter)) {
      return false
    }

    if (!searchTerm) return true
    
    const term = searchTerm.toLowerCase()
    const matchName = student.name?.toLowerCase().includes(term)
    const matchEmail = student.email?.toLowerCase().includes(term)
    const matchClass = student.class?.toLowerCase().includes(term)
    const matchCounty = student.county?.toLowerCase().includes(term)

    return matchName || matchEmail || matchClass || matchCounty
  })

  // Sorting
  const sortedStudents = [...filteredStudents].sort((a, b) => {
    let aVal: any = a[sortCol as keyof typeof a]
    let bVal: any = b[sortCol as keyof typeof b]
    
    if (sortCol === "entries") {
      aVal = a._count?.entries || 0
      bVal = b._count?.entries || 0
    } else if (sortCol === "createdAt") {
      aVal = new Date(a.createdAt as string).getTime()
      bVal = new Date(b.createdAt as string).getTime()
    } else if (sortCol === "class") {
      aVal = a.class ? parseInt(a.class) : 0
      bVal = b.class ? parseInt(b.class) : 0
    } else if (sortCol === "stage") {
      aVal = a.stage
      bVal = b.stage
    }

    if (aVal === bVal) return 0
    if (aVal === null || aVal === undefined) return 1
    if (bVal === null || bVal === undefined) return -1
    
    if (typeof aVal === "string" && typeof bVal === "string") {
      return sortAsc ? aVal.localeCompare(bVal) : bVal.localeCompare(aVal)
    }

    if (aVal < bVal) return sortAsc ? -1 : 1
    if (aVal > bVal) return sortAsc ? 1 : -1
    return 0
  })

  // Headers helper
  const handleSort = (col: SortCol) => {
    if (sortCol === col) setSortAsc(!sortAsc)
    else {
      setSortCol(col)
      setSortAsc(col === "createdAt" || col === "entries" ? false : true)
    }
  }

  const SortIndicator = ({ col }: { col: SortCol }) => {
    if (sortCol !== col) return <span style={{ marginLeft: "0.25rem", opacity: 0.3 }}>⇅</span>
    return <span style={{ marginLeft: "0.25rem", color: "var(--primary)" }}>{sortAsc ? "↑" : "↓"}</span>
  }

  const handleSelectAll = (e: React.ChangeEvent<HTMLInputElement>) => {
    if (e.target.checked) {
      const newSet = new Set(selectedIds)
      filteredStudents.forEach(s => newSet.add(s.id))
      setSelectedIds(newSet)
    } else {
      const newSet = new Set(selectedIds)
      filteredStudents.forEach(s => newSet.delete(s.id))
      setSelectedIds(newSet)
    }
  }

  const handleSelectOne = (id: string) => {
    const newSet = new Set(selectedIds)
    if (newSet.has(id)) {
      newSet.delete(id)
    } else {
      newSet.add(id)
    }
    setSelectedIds(newSet)
  }

  const handleDeleteSelected = async () => {
    if (selectedIds.size === 0) return
    if (!window.confirm(`Sunteți sigur că doriți să ascundeți cei ${selectedIds.size} elevi selectați?\nAceștia și postările lor vor fi trimise în Coșul de Gunoi (Setări), de unde îi puteți recupera sau șterge definitiv.`)) {
      return
    }

    setIsDeleting(true)
    try {
      await bulkDeleteUsersAction(Array.from(selectedIds))
      setSelectedIds(new Set())
      router.refresh()
    } catch (err) {
      alert("A apărut o eroare la stergere.")
    } finally {
      setIsDeleting(false)
    }
  }

  const handleSendEmailSubmit = async (e: React.FormEvent) => {
    e.preventDefault()
    if (selectedIds.size === 0 || !emailSubject || !emailBody) return
    
    setIsSendingEmail(true)
    try {
      await bulkEmailUsersAction(Array.from(selectedIds), emailSubject, emailBody)
      setIsEmailModalOpen(false)
      setEmailSubject("")
      setEmailBody("")
      setSelectedIds(new Set()) // Optional: clear selection after send
      alert("E-mailul a fost trimis cu succes către toți utilizatorii selectați.")
    } catch (err) {
      alert("A apărut o eroare la trimiterea e-mailurilor.")
    } finally {
      setIsSendingEmail(false)
    }
  }

  const handleExportSelected = () => {
    if (selectedIds.size === 0) return

    const selectedStudents = students.filter(s => selectedIds.has(s.id))
    
    // Create CSV content (UTF-8 with BOM to ensure Excel opens diacritics cleanly)
    const header = ["Nume", "Email", "Clasă", "Județ", "Etapă", "Data Înregistrării", "Număr Postări"]
    const rows = selectedStudents.map(user => [
      `"${(user.name || "").replace(/"/g, '""')}"`,
      `"${(user.email || "").replace(/"/g, '""')}"`,
      `"${(user.class || "").replace(/"/g, '""')}"`,
      `"${(user.county || "").replace(/"/g, '""')}"`,
      user.stage,
      `"${new Date(user.createdAt).toLocaleDateString("ro-RO")}"`,
      user._count.entries
    ])

    const csvContent = "\uFEFF" + [header.join(","), ...rows.map(r => r.join(","))].join("\n")
    
    // Trigger download mechanism
    const blob = new Blob([csvContent], { type: "text/csv;charset=utf-8;" })
    const url = URL.createObjectURL(blob)
    const link = document.createElement("a")
    link.href = url
    link.setAttribute("download", `export-elevi_${selectedIds.size}_${new Date().toISOString().split('T')[0]}.csv`)
    document.body.appendChild(link)
    link.click()
    document.body.removeChild(link)
  }

  // Derived properties
  const isAllSelected = filteredStudents.length > 0 && selectedIds.size === filteredStudents.length
  const isIndeterminate = selectedIds.size > 0 && selectedIds.size < filteredStudents.length

  return (
    <>
      <style>{`
        .sortable-header {
          transition: background-color 0.2s ease, color 0.2s ease;
        }
        .sortable-header:hover {
          background-color: var(--primary-light);
          color: var(--primary) !important;
        }
      `}</style>

      {/* Stage filter pills */}
      <div style={{ display: "flex", gap: "0.5rem", marginBottom: "1rem", flexWrap: "wrap", alignItems: "center" }}>
        <span style={{ fontSize: "0.9rem", color: "var(--text-muted)", fontWeight: 500, marginRight: "0.5rem" }}>Etapă:</span>
        {[{ key: "ALL", label: "Toate" }, { key: "1", label: "Etapa 1" }, { key: "2", label: "Etapa 2" }].map((sf) => (
          <button
            key={sf.key}
            onClick={() => setStageFilter(sf.key)}
            style={{
              padding: "0.4rem 0.8rem",
              borderRadius: "999px",
              border: "1px solid",
              background: stageFilter === sf.key ? "#8b5cf6" : "var(--surface-color)",
              color: stageFilter === sf.key ? "white" : "var(--text-main)",
              borderColor: stageFilter === sf.key ? "#8b5cf6" : "var(--border-color)",
              fontSize: "0.85rem",
              fontWeight: stageFilter === sf.key ? 600 : 400,
              cursor: "pointer",
            }}
          >
            {sf.label}
          </button>
        ))}
      </div>
      <div style={{ background: "var(--surface-color)", borderRadius: "var(--radius-lg)", border: "1px solid var(--border-color)", overflow: "hidden", marginBottom: "2rem" }}>
        
        {/* Header Title & Bulk Actions Bar */}
        <div style={{ padding: "1.25rem 1.5rem", borderBottom: "1px solid var(--border-color)", display: "flex", justifyContent: "space-between", alignItems: "center", flexWrap: "wrap", gap: "1rem" }}>
          
          <div style={{ display: "flex", alignItems: "center", gap: "1rem", flexWrap: "wrap" }}>
            <h2 style={{ fontSize: "1.15rem", fontWeight: 600, display: "flex", alignItems: "center", gap: "0.5rem", margin: 0 }}>
              {title} ({filteredStudents.length})
              {selectedIds.size > 0 && (
                <span style={{ fontSize: "0.85rem", background: "var(--primary-light)", color: "var(--primary)", padding: "0.2rem 0.6rem", borderRadius: "999px" }}>
                  {selectedIds.size} selectați
                </span>
              )}
            </h2>
            
            <input 
              type="search" 
              placeholder="Caută elev, clasă, județ..."
              value={searchTerm}
              onChange={(e) => setSearchTerm(e.target.value)}
              style={{
                padding: "0.4rem 0.8rem",
                borderRadius: "var(--radius-sm)",
                border: "1px solid var(--border-color)",
                background: "var(--surface-hover)",
                color: "var(--text-main)",
                fontSize: "0.85rem",
                minWidth: "220px"
              }}
            />
          </div>

          {/* Action Bar appears when selection exists */}
          {selectedIds.size > 0 && (
            <div style={{ display: "flex", gap: "0.75rem", alignItems: "center" }}>
              <button 
                onClick={() => setSelectedIds(new Set())}
                style={{ padding: "0.4rem 0.75rem", fontSize: "0.85rem", background: "none", border: "1px solid var(--border-color)", borderRadius: "var(--radius-sm)", cursor: "pointer", color: "var(--text-main)" }}
              >
                Deselectează tot
              </button>
              
              <button 
                onClick={() => setIsEmailModalOpen(true)}
                style={{ padding: "0.4rem 0.75rem", fontSize: "0.85rem", background: "var(--primary)", color: "white", border: "none", borderRadius: "var(--radius-sm)", cursor: "pointer", fontWeight: 500, display: "flex", alignItems: "center", gap: "0.3rem" }}
              >
                <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><rect width="20" height="16" x="2" y="4" rx="2"/><path d="m22 7-8.97 5.7a1.94 1.94 0 0 1-2.06 0L2 7"/></svg>
                E-mail
              </button>

              <button 
                onClick={handleExportSelected}
                style={{ padding: "0.4rem 0.75rem", fontSize: "0.85rem", background: "#10b981", color: "white", border: "none", borderRadius: "var(--radius-sm)", cursor: "pointer", fontWeight: 500, display: "flex", alignItems: "center", gap: "0.3rem" }}
              >
                <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="7 10 12 15 17 10"/><line x1="12" x2="12" y1="15" y2="3"/></svg>
                Exportă CSV
              </button>

              <button 
                onClick={handleDeleteSelected}
                disabled={isDeleting}
                style={{ padding: "0.4rem 0.75rem", fontSize: "0.85rem", background: "var(--danger)", color: "white", border: "none", borderRadius: "var(--radius-sm)", cursor: isDeleting ? "wait" : "pointer", fontWeight: 500, display: "flex", alignItems: "center", gap: "0.3rem", opacity: isDeleting ? 0.6 : 1 }}
              >
                <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M3 6h18"/><path d="M19 6v14c0 1-1 2-2 2H7c-1 0-2-1-2-2V6"/><path d="M8 6V4c0-1 1-2 2-2h4c1 0 2 1 2 2v2"/></svg>
                {isDeleting ? "Se șterg..." : "Șterge"}
              </button>
            </div>
          )}
        </div>

        {/* Table Content */}
        <div style={{ overflowX: "auto" }}>
          <table style={{ width: "100%", borderCollapse: "collapse", textAlign: "left" }}>
            <thead>
              <tr style={{ background: "var(--surface-hover)" }}>
                <th style={{ padding: "0.85rem 1.25rem", width: "40px" }}>
                  <input 
                    type="checkbox" 
                    checked={isAllSelected}
                    ref={(input) => { if (input) input.indeterminate = isIndeterminate }}
                    onChange={handleSelectAll}
                    style={{ cursor: "pointer", width: "16px", height: "16px", accentColor: "var(--primary)" }}
                  />
                </th>
                {[
                  { key: "name", label: "Nume" },
                  { key: "email", label: "Email" },
                  { key: "class", label: "Clasă" },
                  { key: "county", label: "Județ" },
                  { key: "stage", label: "Etapă" },
                  { key: "createdAt", label: "Înregistrat" },
                  { key: "entries", label: "Intrări" }
                ].map((h) => (
                  <th 
                    key={h.key} 
                    className="sortable-header"
                    onClick={() => handleSort(h.key as SortCol)}
                    style={{ padding: "0.85rem 1.25rem", fontSize: "0.8rem", color: "var(--text-muted)", fontWeight: 600, textTransform: "uppercase", cursor: "pointer", userSelect: "none", borderBottom: "1px solid transparent" }}
                  >
                    {h.label} <SortIndicator col={h.key as SortCol} />
                  </th>
                ))}
                <th style={{ padding: "0.85rem 1.25rem", fontSize: "0.8rem", color: "var(--text-muted)", fontWeight: 600, textTransform: "uppercase" }}>Acțiuni</th>
              </tr>
            </thead>
            <tbody>
              {sortedStudents.map((user) => (
                <tr 
                  key={user.id} 
                  style={{ 
                    borderBottom: "1px solid var(--border-color)",
                    background: selectedIds.has(user.id) ? "var(--surface-hover)" : "transparent"
                  }}
                >
                  <td style={{ padding: "0.85rem 1.25rem" }}>
                    <input 
                      type="checkbox"
                      checked={selectedIds.has(user.id)}
                      onChange={() => handleSelectOne(user.id)}
                      style={{ cursor: "pointer", width: "16px", height: "16px", accentColor: "var(--primary)" }}
                    />
                  </td>
                  <td style={{ padding: "0.85rem 1.25rem", fontWeight: 500 }} onClick={() => handleSelectOne(user.id)}>{user.name || "—"}</td>
                  <td style={{ padding: "0.85rem 1.25rem", color: "var(--text-muted)", fontSize: "0.9rem" }} onClick={() => handleSelectOne(user.id)}>{user.email}</td>
                  <td style={{ padding: "0.85rem 1.25rem" }} onClick={() => handleSelectOne(user.id)}>
                    {user.class ? (
                      <span style={{ padding: "0.2rem 0.6rem", background: "var(--primary-light)", color: "var(--primary)", borderRadius: "999px", fontSize: "0.8rem", fontWeight: 600 }}>
                        {user.class}
                      </span>
                    ) : "—"}
                  </td>
                  <td style={{ padding: "0.85rem 1.25rem", color: "var(--text-main)", fontSize: "0.85rem" }} onClick={() => handleSelectOne(user.id)}>
                    {user.county || "—"}
                  </td>
                  <td style={{ padding: "0.85rem 1.25rem" }} onClick={() => handleSelectOne(user.id)}>
                    <span style={{
                      fontSize: "0.75rem",
                      padding: "0.2rem 0.55rem",
                      borderRadius: "999px",
                      background: user.stage === 2 ? "rgba(59, 130, 246, 0.1)" : "rgba(139, 92, 246, 0.1)",
                      color: user.stage === 2 ? "#3b82f6" : "#8b5cf6",
                      fontWeight: 600,
                    }}>
                      {user.stage}
                    </span>
                  </td>
                  <td style={{ padding: "0.85rem 1.25rem", color: "var(--text-muted)", fontSize: "0.85rem" }}>
                    {new Date(user.createdAt).toLocaleDateString("ro-RO")}
                  </td>
                  <td style={{ padding: "0.85rem 1.25rem" }}>
                    <span style={{ fontWeight: 700, color: "var(--primary)" }}>{user._count.entries}</span>
                  </td>
                  <td style={{ padding: "0.85rem 1.25rem" }}>
                    <div style={{ display: "flex", gap: "0.5rem" }}>
                      <button
                        onClick={async (e) => {
                          e.stopPropagation()
                          const newStage = user.stage === 1 ? 2 : 1
                          const action = newStage === 2 ? "promova la Etapa 2" : "retrograda la Etapa 1"
                          if (!window.confirm(`Sigur doriți să ${action} elevul ${user.name || user.email}?`)) return
                          try {
                            await setUserStageAction(user.id, newStage)
                            router.refresh()
                          } catch { alert("Eroare la actualizarea etapei.") }
                        }}
                        title={user.stage === 1 ? "Promovează la Etapa 2" : "Retrogradează la Etapa 1"}
                        style={{
                          padding: "0.35rem 0.65rem",
                          background: user.stage === 1 ? "rgba(59, 130, 246, 0.1)" : "rgba(139, 92, 246, 0.1)",
                          color: user.stage === 1 ? "#3b82f6" : "#8b5cf6",
                          borderRadius: "var(--radius-sm)",
                          fontSize: "0.75rem",
                          fontWeight: 600,
                          border: "none",
                          cursor: "pointer",
                          whiteSpace: "nowrap",
                        }}
                      >
                        {user.stage === 1 ? "→ Et.2" : "→ Et.1"}
                      </button>
                      <Link
                        href={`/admin/users/${user.id}`}
                        style={{
                          padding: "0.35rem 0.75rem",
                          background: "var(--primary-light)",
                          color: "var(--primary)",
                          borderRadius: "var(--radius-sm)",
                          fontSize: "0.82rem",
                          fontWeight: 600,
                          textDecoration: "none",
                        }}
                        onClick={(e) => e.stopPropagation()}
                      >
                        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" style={{ display: "block" }}>
                          <path d="M17 3a2.85 2.83 0 1 1 4 4L7.5 20.5 2 22l1.5-5.5Z"/>
                          <path d="m15 5 4 4"/>
                        </svg>
                      </Link>
                    </div>
                  </td>
                </tr>
              ))}
              {filteredStudents.length === 0 && (
                <tr>
                  <td colSpan={9} style={{ padding: "2.5rem", textAlign: "center", color: "var(--text-muted)" }}>
                    Niciun elev nu corespunde criteriilor.
                  </td>
                </tr>
              )}
            </tbody>
          </table>
        </div>
      </div>

      {/* Email Modal */}
      {isEmailModalOpen && (
        <div style={{
          position: "fixed", top: 0, left: 0, right: 0, bottom: 0,
          background: "rgba(0,0,0,0.5)", zIndex: 9999, display: "flex", alignItems: "center", justifyContent: "center", padding: "1rem"
        }}>
          <div style={{ background: "var(--surface-color)", padding: "2rem", borderRadius: "var(--radius-lg)", width: "100%", maxWidth: "600px", boxShadow: "0 10px 25px rgba(0,0,0,0.1)", border: "1px solid var(--border-color)" }}>
            <h3 style={{ fontSize: "1.25rem", fontWeight: 600, marginBottom: "0.5rem" }}>E-mail către cei {selectedIds.size} selectați</h3>
            <p style={{ color: "var(--text-muted)", fontSize: "0.9rem", marginBottom: "1.5rem" }}>Adresele de email vor fi incluse automat la secțiunea BCC (Blind Carbon Copy) pentru a proteja intimitatea elevilor.</p>
            
            <form onSubmit={handleSendEmailSubmit}>
              <div style={{ marginBottom: "1rem" }}>
                <label style={{ display: "block", fontSize: "0.9rem", fontWeight: 500, marginBottom: "0.25rem" }}>Subiectul e-mailului *</label>
                <input 
                  type="text" 
                  required
                  value={emailSubject}
                  onChange={(e) => setEmailSubject(e.target.value)}
                  style={{ width: "100%", padding: "0.75rem", borderRadius: "var(--radius-sm)", border: "1px solid var(--border-color)", background: "var(--surface-hover)", color: "var(--text-main)", fontSize: "0.95rem" }}
                  placeholder="Ex: Anunț important privind concursul Ro-VIBE"
                />
              </div>

              <div style={{ marginBottom: "1.5rem" }}>
                <label style={{ display: "block", fontSize: "0.9rem", fontWeight: 500, marginBottom: "0.25rem" }}>Mesaj *</label>
                <textarea 
                  required
                  rows={6}
                  value={emailBody}
                  onChange={(e) => setEmailBody(e.target.value)}
                  style={{ width: "100%", padding: "0.75rem", borderRadius: "var(--radius-sm)", border: "1px solid var(--border-color)", background: "var(--surface-hover)", color: "var(--text-main)", fontSize: "0.95rem", resize: "vertical" }}
                  placeholder="Scrieți conținutul mesajului aici..."
                />
              </div>

              <div style={{ display: "flex", justifyContent: "flex-end", gap: "1rem" }}>
                <button 
                  type="button" 
                  disabled={isSendingEmail}
                  onClick={() => setIsEmailModalOpen(false)}
                  style={{ padding: "0.6rem 1.25rem", fontSize: "0.9rem", background: "none", border: "1px solid var(--border-color)", borderRadius: "var(--radius-md)", cursor: "pointer", color: "var(--text-main)" }}
                >
                  Anulează
                </button>
                <button 
                  type="submit"
                  disabled={isSendingEmail}
                  style={{ padding: "0.6rem 1.25rem", fontSize: "0.9rem", background: "var(--primary)", color: "white", border: "none", borderRadius: "var(--radius-md)", cursor: isSendingEmail ? "wait" : "pointer", fontWeight: 600, opacity: isSendingEmail ? 0.7 : 1 }}
                >
                  {isSendingEmail ? "Se trimite..." : "Trimite e-mail"}
                </button>
              </div>
            </form>
          </div>
        </div>
      )}
    </>
  )
}