"use client"

import { useState } from "react"
import Link from "next/link"
import { bulkDeleteUsersAction, bulkEmailUsersAction } 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
  createdAt: Date | string
  _count: { entries: number }
}

export function BulkUserActions({ students }: { students: Student[] }) {
  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("")

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

  // Search filtering
  const filteredStudents = students.filter(student => {
    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
  })

  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ă ștergeți DEFINITIV cei ${selectedIds.size} elevi selectați?\nSe vor șterge toate datele, postările și fotografiile lor din baza de date și de pe unitatea de stocare aferentă. Această acțiune este ireversibilă!`)) {
      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ț", "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, '""')}"`,
      `"${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 (
    <>
      <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 }}>
              👥 Elevi ({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>
                {["Nume", "Email", "Clasă", "Județ", "Înregistrat", "Intrări", "Acțiuni"].map((h) => (
                  <th key={h} style={{ padding: "0.85rem 1.25rem", fontSize: "0.8rem", color: "var(--text-muted)", fontWeight: 600, textTransform: "uppercase" }}>{h}</th>
                ))}
              </tr>
            </thead>
            <tbody>
              {filteredStudents.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 }}>
                        Clasa a {user.class}-a
                      </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", 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" }}>
                      <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()}
                      >
                        Editează
                      </Link>
                    </div>
                  </td>
                </tr>
              ))}
              {filteredStudents.length === 0 && (
                <tr>
                  <td colSpan={8} 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>
      )}
    </>
  )
}