"use client"

import { useState } from "react"
import { bulkRestoreEntriesAction, bulkHardDeleteEntriesAction } from "@/app/admin/actions"
import { useRouter } from "next/navigation"

type Entry = {
  id: string
  title: string
  subjectName: string
  city: string
  county: string
  status: string
  createdAt: Date | string
  deletedAt: Date | string | null
  user: {
    name: string | null
    email: string | null
    class: string | null
  }
}

export function TrashEntriesActions({ entries }: { entries: Entry[] }) {
  const router = useRouter()
  const [selectedIds, setSelectedIds] = useState<Set<string>>(new Set())
  const [isProcessing, setIsProcessing] = useState(false)

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

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

  const handleRestoreSelected = async () => {
    if (selectedIds.size === 0) return
    setIsProcessing(true)
    try {
      await bulkRestoreEntriesAction(Array.from(selectedIds))
      setSelectedIds(new Set())
      router.refresh()
    } catch (err) {
      alert("A apărut o eroare la restaurare.")
    } finally {
      setIsProcessing(false)
    }
  }

  const handleHardDeleteSelected = async () => {
    if (selectedIds.size === 0) return
    if (!window.confirm("ATENȚIE MAJORA! Sunteți sigur că doriți eliminarea definitivă a intrărilor selectate?\nSe vor șterge irecuperabil atât din baza de date cât și de pe spațiul de stocare (imaginile).")) return
    
    setIsProcessing(true)
    try {
      await bulkHardDeleteEntriesAction(Array.from(selectedIds))
      setSelectedIds(new Set())
      // Add slight delay to make sure DB reflects physical deletions
      setTimeout(() => router.refresh(), 500)
    } catch (err) {
      alert("A apărut o eroare la ștergerea definitivă.")
    } finally {
      setIsProcessing(false)
    }
  }

  const isAllSelected = entries.length > 0 && selectedIds.size === entries.length
  const isIndeterminate = selectedIds.size > 0 && selectedIds.size < entries.length

  return (
    <div style={{ background: "var(--surface-color)", borderRadius: "var(--radius-lg)", border: "1px solid var(--border-color)", overflow: "hidden", marginTop: "3rem" }}>
      <div style={{ padding: "1.25rem 1.5rem", borderBottom: "1px solid var(--border-color)", background: "rgba(239, 68, 68, 0.05)", 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, color: "var(--danger)" }}>
            🗑 Coș de Reciclare ({entries.length})
            {selectedIds.size > 0 && (
              <span style={{ fontSize: "0.85rem", background: "var(--danger)", color: "white", padding: "0.2rem 0.6rem", borderRadius: "999px" }}>
                {selectedIds.size} selectate
              </span>
            )}
          </h2>
        </div>

        {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)" }}
            >
              Anulează selecția
            </button>

            <button 
              onClick={handleRestoreSelected}
              disabled={isProcessing}
              style={{ padding: "0.4rem 0.75rem", fontSize: "0.85rem", background: "var(--success)", color: "white", border: "none", borderRadius: "var(--radius-sm)", cursor: isProcessing ? "wait" : "pointer", fontWeight: 500, opacity: isProcessing ? 0.6 : 1 }}
            >
              Restaurează ({selectedIds.size})
            </button>

            <button 
              onClick={handleHardDeleteSelected}
              disabled={isProcessing}
              style={{ padding: "0.4rem 0.75rem", fontSize: "0.85rem", background: "var(--danger)", color: "white", border: "none", borderRadius: "var(--radius-sm)", cursor: isProcessing ? "wait" : "pointer", fontWeight: 500, opacity: isProcessing ? 0.6 : 1 }}
            >
              Șterge Definitiv
            </button>
          </div>
        )}
      </div>

      <div style={{ overflowX: "auto" }}>
        <table style={{ width: "100%", borderCollapse: "collapse", textAlign: "left" }}>
          <thead>
            <tr style={{ background: "var(--surface-hover)" }}>
              <th style={{ padding: "1rem 1.5rem", 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(--danger)" }}
                />
              </th>
              <th style={{ padding: "1rem 1.5rem", fontSize: "0.85rem", color: "var(--text-muted)", fontWeight: 600, textTransform: "uppercase" }}>Obiectiv</th>
              <th style={{ padding: "1rem 1.5rem", fontSize: "0.85rem", color: "var(--text-muted)", fontWeight: 600, textTransform: "uppercase" }}>Elev</th>
              <th style={{ padding: "1rem 1.5rem", fontSize: "0.85rem", color: "var(--text-muted)", fontWeight: 600, textTransform: "uppercase" }}>Data Ștergerii</th>
            </tr>
          </thead>
          <tbody>
            {entries.map((entry) => (
              <tr 
                key={entry.id} 
                style={{ 
                  borderBottom: "1px solid var(--border-color)",
                  background: selectedIds.has(entry.id) ? "rgba(239, 68, 68, 0.05)" : "transparent"
                }}
              >
                <td style={{ padding: "1rem 1.5rem" }}>
                  <input 
                    type="checkbox"
                    checked={selectedIds.has(entry.id)}
                    onChange={() => handleSelectOne(entry.id)}
                    style={{ cursor: "pointer", width: "16px", height: "16px", accentColor: "var(--danger)" }}
                  />
                </td>
                <td style={{ padding: "1rem 1.5rem" }} onClick={() => handleSelectOne(entry.id)}>
                  <div style={{ fontWeight: 500, color: "var(--text-main)", marginBottom: "0.25rem" }}>{entry.title}</div>
                  <div style={{ fontSize: "0.85rem", color: "var(--text-muted)" }}>{entry.city}, {entry.county}</div>
                </td>
                <td style={{ padding: "1rem 1.5rem" }} onClick={() => handleSelectOne(entry.id)}>
                  <div style={{ fontWeight: 500, color: "var(--text-main)", marginBottom: "0.25rem" }}>{entry.user.name}</div>
                </td>
                <td style={{ padding: "1rem 1.5rem", fontSize: "0.9rem", color: "var(--text-muted)", fontWeight: 600 }} onClick={() => handleSelectOne(entry.id)}>
                  <span style={{ color: "var(--danger)" }}>
                    {entry.deletedAt ? new Date(entry.deletedAt).toLocaleDateString("ro-RO") : "Necunoscut"}
                  </span>
                </td>
              </tr>
            ))}
            {entries.length === 0 && (
              <tr>
                <td colSpan={4} style={{ padding: "3rem", textAlign: "center", color: "var(--text-muted)" }}>
                  Coșul de reciclare este gol.
                </td>
              </tr>
            )}
          </tbody>
        </table>
      </div>
    </div>
  )
}