// frontend/src/pages/bellcloud/devices/tabs/ManageTab.jsx
// Manage tab — Device Users + Device Notes + Linked Issues

import { useState, useEffect, useCallback } from 'react'
import { useNavigate } from 'react-router-dom'
import api from '@/lib/api'
import { useToast } from '@/components/ui/Toast'
import Button from '@/components/ui/Button'
import StatusBadge from '@/components/ui/StatusBadge'
import Spinner from '@/components/ui/Spinner'
import ConfirmDialog from '@/components/ui/ConfirmDialog'
import Icon from '@/components/ui/Icon'
import { fmtDateMedium, fmtRelative } from '@/lib/formatters'

import AddDeviceUserModal from '@/modals/bellcloud/devices/AddDeviceUserModal'
import DeviceNoteModal    from '@/modals/bellcloud/devices/DeviceNoteModal'
import EntryFormModal     from '@/modals/crm/helpdesk/EntryFormModal'

// ─── Visual constants (match OverviewTab's GlassCard aesthetic) ───────────────

const GLASS       = 'rgba(28, 32, 38, 0.30)'
const GLASS_INNER = 'rgba(28, 32, 38, 0.40)'
const GLASS_HOVER = 'rgba(49, 53, 60, 0.55)'
const BLUR        = 'blur(12px)'

// ─── Status/severity maps (match IssuesTab constants) ─────────────────────────

const STATUS_META = {
  open:        { label: 'Open',        color: 'var(--color-danger)',  bg: 'var(--color-danger-bg)'  },
  researching: { label: 'Researching', color: 'var(--color-warning)', bg: 'var(--color-warning-bg)' },
  resolved:    { label: 'Resolved',    color: 'var(--color-success)', bg: 'var(--color-success-bg)' },
}

const SEVERITY_META = {
  low:      { label: 'Low',      color: 'var(--color-info)'    },
  medium:   { label: 'Medium',   color: 'var(--color-warning)' },
  high:     { label: 'High',     color: 'var(--color-danger)'  },
  critical: { label: 'Critical', color: 'var(--color-danger)',  breathe: true },
}

// ─── Sub-components ───────────────────────────────────────────────────────────

function SectionLabel({ children }) {
  return (
    <span style={{
      fontSize: 'var(--font-size-xs)',
      fontWeight: 'var(--font-weight-semibold)',
      color: 'var(--color-text-muted)',
      letterSpacing: 'var(--tracking-wide)',
      textTransform: 'uppercase',
    }}>
      {children}
    </span>
  )
}

function GlassCard({ children, style = {} }) {
  return (
    <div style={{
      background: GLASS,
      backdropFilter: BLUR,
      WebkitBackdropFilter: BLUR,
      border: '1px solid var(--color-border)',
      borderRadius: 'var(--radius-xl)',
      boxShadow: 'var(--shadow-card), var(--shadow-md)',
      ...style,
    }}>
      {children}
    </div>
  )
}

function CardHeader({ label, count, action }) {
  return (
    <div style={{
      display: 'flex',
      alignItems: 'center',
      justifyContent: 'space-between',
      padding: 'var(--space-4) var(--space-5)',
      borderBottom: '1px solid var(--color-border)',
    }}>
      <div style={{ display: 'flex', alignItems: 'center', gap: 'var(--space-3)' }}>
        <SectionLabel>{label}</SectionLabel>
        {count != null && (
          <span style={{
            fontSize: 'var(--font-size-xs)',
            color: 'var(--color-text-muted)',
            background: GLASS_INNER,
            padding: '2px var(--space-2)',
            borderRadius: 'var(--radius-full)',
            border: '1px solid var(--color-border)',
            lineHeight: 1.4,
          }}>
            {count}
          </span>
        )}
      </div>
      {action}
    </div>
  )
}

function EmptySlate({ icon, message, action }) {
  return (
    <div style={{
      display: 'flex',
      flexDirection: 'column',
      alignItems: 'center',
      gap: 'var(--space-3)',
      padding: 'var(--space-8) var(--space-6)',
      color: 'var(--color-text-muted)',
    }}>
      <div style={{ opacity: 0.35 }}>{icon}</div>
      <p style={{ margin: 0, fontSize: 'var(--font-size-sm)', textAlign: 'center' }}>{message}</p>
      {action}
    </div>
  )
}

function StatusPill({ status }) {
  const m = STATUS_META[status] || { label: status, color: 'var(--color-text-muted)', bg: 'var(--color-bg-elevated)' }
  return (
    <span style={{
      display: 'inline-flex', alignItems: 'center', gap: 5,
      padding: '2px 8px',
      borderRadius: 'var(--radius-full)',
      backgroundColor: m.bg,
      border: `1px solid ${m.color}33`,
      fontSize: 'var(--font-size-xs)',
      fontWeight: 'var(--font-weight-semibold)',
      color: m.color,
      whiteSpace: 'nowrap',
      flexShrink: 0,
    }}>
      <span style={{ width: 5, height: 5, borderRadius: '50%', backgroundColor: m.color, flexShrink: 0 }} />
      {m.label}
    </span>
  )
}

function SeverityBars({ severity }) {
  if (!severity) return null
  const m = SEVERITY_META[severity] || { label: severity, color: 'var(--color-text-muted)' }
  const bars = { low: 1, medium: 2, high: 3, critical: 4 }[severity] || 1
  return (
    <span
      className={m.breathe ? 'severity-critical' : undefined}
      style={{ display: 'inline-flex', alignItems: 'center', gap: 4, flexShrink: 0 }}
    >
      <span style={{ display: 'flex', alignItems: 'flex-end', gap: 2, height: 12 }}>
        {[1, 2, 3, 4].map(b => (
          <span key={b} style={{
            width: 3,
            height: 2 + b * 2,
            borderRadius: 1,
            backgroundColor: b <= bars ? m.color : 'var(--color-bg-island)',
            display: 'block',
          }} />
        ))}
      </span>
      <span style={{ fontSize: 'var(--font-size-xs)', fontWeight: 'var(--font-weight-medium)', color: m.color }}>
        {m.label}
      </span>
    </span>
  )
}

// ─── ManageTab ────────────────────────────────────────────────────────────────

export default function ManageTab({ device, canEdit, deviceUsers: propUsers, usersLoading: propUsersLoading }) {
  const navigate  = useNavigate()
  const { toast } = useToast()
  const id        = device?.id || device?.device_id

  // ── Users state ────────────────────────────────────────────────────────────
  // We manage our own copy so we can add/remove without refetching the entire device
  const [users,        setUsers]        = useState(propUsers || [])
  const [usersLoading, setUsersLoading] = useState(propUsersLoading || false)
  const [removingUser, setRemovingUser] = useState(null)
  const [confirmRemoveUser, setConfirmRemoveUser] = useState(null)
  const [showAddUser,  setShowAddUser]  = useState(false)

  // Sync from parent prop on mount / prop change
  useEffect(() => {
    if (propUsers) setUsers(propUsers)
  }, [propUsers])

  useEffect(() => {
    setUsersLoading(propUsersLoading)
  }, [propUsersLoading])

  const reloadUsers = useCallback(async () => {
    if (!id) return
    setUsersLoading(true)
    try {
      const data = await api.get(`/devices/${id}/users`)
      setUsers(data.users || [])
    } catch {
      // silent — parent has already shown this device's users
    } finally {
      setUsersLoading(false)
    }
  }, [id])

  const handleUserAdded = (user) => {
    setUsers(prev => [...prev, user])
    toast.success('User added', `${user.display_name || user.email} now has access.`)
  }

  const handleRemoveUser = async () => {
    if (!confirmRemoveUser) return
    const targetId = confirmRemoveUser.user_id || confirmRemoveUser.id
    setRemovingUser(targetId)
    try {
      await api.delete(`/devices/${id}/user-list/${targetId}`)
      setUsers(prev => prev.filter(u => (u.user_id || u.id) !== targetId))
      toast.success('Removed', `${confirmRemoveUser.display_name || confirmRemoveUser.email} removed.`)
    } catch (err) {
      toast.danger('Error', err.message || 'Failed to remove user.')
    } finally {
      setRemovingUser(null)
      setConfirmRemoveUser(null)
    }
  }

  // ── Device notes (Firestore) ──────────────────────────────────────────────
  const [notes,        setNotes]        = useState([])
  const [notesLoading, setNotesLoading] = useState(false)
  const [noteModal,    setNoteModal]    = useState({ open: false, note: null })
  const [deletingNote, setDeletingNote] = useState(null)
  const [confirmDeleteNote, setConfirmDeleteNote] = useState(null)

  const loadNotes = useCallback(async () => {
    if (!id) return
    setNotesLoading(true)
    try {
      const data = await api.get(`/devices/${id}/notes`)
      setNotes((data.notes || []).slice().reverse()) // newest first
    } catch {
      setNotes([])
    } finally {
      setNotesLoading(false)
    }
  }, [id])

  useEffect(() => { loadNotes() }, [loadNotes])

  const handleNoteSaved = () => {
    setNoteModal({ open: false, note: null })
    loadNotes()
  }

  const handleDeleteNote = async () => {
    if (!confirmDeleteNote) return
    setDeletingNote(confirmDeleteNote.id)
    try {
      await api.delete(`/devices/${id}/notes/${confirmDeleteNote.id}`)
      setNotes(prev => prev.filter(n => n.id !== confirmDeleteNote.id))
      toast.success('Deleted', 'Note removed.')
    } catch (err) {
      toast.danger('Error', err.message || 'Failed to delete note.')
    } finally {
      setDeletingNote(null)
      setConfirmDeleteNote(null)
    }
  }

  // ── Linked issues (global /notes system, entity_type=device) ─────────────
  const [issues,        setIssues]        = useState([])
  const [issuesLoading, setIssuesLoading] = useState(false)
  const [issueModal,    setIssueModal]    = useState({ open: false, entry: null })
  const [confirmDeleteIssue, setConfirmDeleteIssue] = useState(null)
  const [deletingIssue, setDeletingIssue] = useState(false)

  const loadIssues = useCallback(async () => {
    if (!id) return
    setIssuesLoading(true)
    try {
      const data = await api.get(`/notes/by-entity/device/${id}`)
      setIssues(Array.isArray(data) ? data : [])
    } catch {
      setIssues([])
    } finally {
      setIssuesLoading(false)
    }
  }, [id])

  useEffect(() => { loadIssues() }, [loadIssues])

  const openNewIssue = () => setIssueModal({ open: true, entry: null })
  const openEditIssue = (entry) => setIssueModal({ open: true, entry })

  const handleIssueSaved = () => {
    setIssueModal({ open: false, entry: null })
    loadIssues()
  }

  const handleDeleteIssue = async () => {
    if (!confirmDeleteIssue) return
    setDeletingIssue(true)
    try {
      await api.delete(`/notes/${confirmDeleteIssue}`)
      toast.success('Deleted', 'Issue removed.')
      setConfirmDeleteIssue(null)
      loadIssues()
    } catch (err) {
      toast.danger('Error', err.message || 'Failed to delete issue.')
    } finally {
      setDeletingIssue(false)
    }
  }

  const sn = device?.serial_number || device?.device_id
  const existingUserIds = users.map(u => u.user_id || u.id).filter(Boolean)

  // ── Render ─────────────────────────────────────────────────────────────────

  return (
    <>
      <style>{`
        .manage-user-row:hover .manage-user-remove { opacity: 1; }
        .manage-user-row .manage-user-remove { opacity: 0; transition: opacity 0.15s; }
        .manage-issue-row { cursor: pointer; transition: background 0.12s; }
        .manage-issue-row:hover { background: ${GLASS_HOVER} !important; }
        .manage-note-card { transition: box-shadow 0.15s; }
        .manage-note-card:hover { box-shadow: var(--shadow-md) !important; }
        @keyframes severity-critical-glow {
          0%, 100% { filter: drop-shadow(0 0 0px var(--color-danger)); }
          50%       { filter: drop-shadow(0 0 5px var(--color-danger)); }
        }
        .severity-critical { animation: severity-critical-glow 0.9s ease-in-out infinite; }
      `}</style>

      <div style={{ display: 'flex', flexDirection: 'column', gap: 'var(--space-6)', width: '100%', maxWidth: 2000, margin: '0 auto' }}>

        {/* ── 1. DEVICE ACCESS (Users) ──────────────────────────────────────── */}
        <GlassCard>
          <CardHeader
            label="Device Access"
            count={users.length || undefined}
            action={canEdit && (
              <Button variant="secondary" size="sm" onClick={() => setShowAddUser(true)}>
                + Add User
              </Button>
            )}
          />

          <div style={{ padding: 'var(--space-4) var(--space-5)', display: 'flex', flexDirection: 'column', gap: 'var(--space-2)' }}>
            {usersLoading ? (
              <div style={{ display: 'flex', justifyContent: 'center', padding: 'var(--space-6)' }}>
                <Spinner size="sm" />
              </div>
            ) : users.length === 0 ? (
              <EmptySlate
                icon={
                  <svg width="36" height="36" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round">
                    <path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/>
                    <circle cx="9" cy="7" r="4"/>
                    <path d="M23 21v-2a4 4 0 0 0-3-3.87M16 3.13a4 4 0 0 1 0 7.75"/>
                  </svg>
                }
                message="No users have access to this device."
                action={canEdit && (
                  <Button variant="secondary" size="sm" onClick={() => setShowAddUser(true)}>Add first user</Button>
                )}
              />
            ) : (
              users.map((user) => {
                const userId  = user.user_id || user.id
                const initials = (user.display_name || user.email || '?').charAt(0).toUpperCase()
                return (
                  <div
                    key={userId}
                    className="manage-user-row"
                    style={{
                      display: 'flex', alignItems: 'center', gap: 'var(--space-3)',
                      padding: 'var(--space-3)',
                      borderRadius: 'var(--radius-md)',
                      background: GLASS_INNER,
                      border: '1px solid var(--color-border)',
                      cursor: userId ? 'pointer' : 'default',
                      transition: 'background 0.15s',
                    }}
                    onClick={() => userId && navigate(`/users/${userId}`)}
                    onMouseEnter={e => e.currentTarget.style.background = GLASS_HOVER}
                    onMouseLeave={e => e.currentTarget.style.background = GLASS_INNER}
                  >
                    <div style={{
                      width: 36, height: 36, borderRadius: '50%', overflow: 'hidden',
                      background: 'var(--color-primary-subtle)', flexShrink: 0,
                      display: 'flex', alignItems: 'center', justifyContent: 'center',
                      fontSize: 'var(--font-size-sm)', fontWeight: 'var(--font-weight-semibold)',
                      color: 'var(--color-primary)', border: '1px solid rgba(192,193,255,0.20)',
                    }}>
                      {user.photo_url ? <img src={user.photo_url} alt="" style={{ width: '100%', height: '100%', objectFit: 'cover' }} /> : initials}
                    </div>
                    <div style={{ flex: 1, minWidth: 0 }}>
                      <p style={{ margin: 0, fontSize: 'var(--font-size-sm)', fontWeight: 'var(--font-weight-medium)', color: 'var(--color-text-primary)', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>
                        {user.display_name || user.email || 'Unknown User'}
                      </p>
                      {user.email && user.display_name && (
                        <p style={{ margin: 0, fontSize: 'var(--font-size-xs)', color: 'var(--color-text-muted)', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>
                          {user.email}
                        </p>
                      )}
                    </div>
                    {user.role && <StatusBadge variant="info">{user.role}</StatusBadge>}
                    {canEdit && (
                      <button
                        className="manage-user-remove"
                        onClick={e => { e.stopPropagation(); setConfirmRemoveUser(user) }}
                        disabled={removingUser === userId}
                        title="Remove access" aria-label="Remove user"
                        style={{
                          width: 28, height: 28, borderRadius: 'var(--radius-md)',
                          border: '1px solid var(--color-border-strong)',
                          background: 'var(--color-danger-bg)', color: 'var(--color-danger)',
                          cursor: 'pointer', display: 'flex', alignItems: 'center', justifyContent: 'center',
                          flexShrink: 0, transition: 'background 0.12s',
                        }}
                        onMouseEnter={e => e.currentTarget.style.background = 'var(--color-danger)'}
                        onMouseLeave={e => e.currentTarget.style.background = 'var(--color-danger-bg)'}
                      >
                        <Icon name="delete" size={13} />
                      </button>
                    )}
                  </div>
                )
              })
            )}
          </div>
        </GlassCard>

        {/* ── 2. DEVICE NOTES ───────────────────────────────────────────────── */}
        <GlassCard>
          <CardHeader
            label="Device Notes"
            count={notes.length || undefined}
            action={canEdit && (
              <Button variant="secondary" size="sm" onClick={() => setNoteModal({ open: true, note: null })}>
                + Add Note
              </Button>
            )}
          />

          <div style={{ padding: notesLoading || notes.length === 0 ? 0 : 'var(--space-4) var(--space-5)' }}>
            {notesLoading ? (
              <div style={{ display: 'flex', justifyContent: 'center', padding: 'var(--space-8)' }}>
                <Spinner size="sm" />
              </div>
            ) : notes.length === 0 ? (
              <EmptySlate
                icon={
                  <svg width="36" height="36" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round">
                    <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/>
                    <polyline points="14 2 14 8 20 8"/>
                    <line x1="16" y1="13" x2="8" y2="13"/>
                    <line x1="16" y1="17" x2="8" y2="17"/>
                    <polyline points="10 9 9 9 8 9"/>
                  </svg>
                }
                message="No notes recorded for this device yet."
                action={canEdit && (
                  <Button variant="secondary" size="sm" onClick={() => setNoteModal({ open: true, note: null })}>
                    Add first note
                  </Button>
                )}
              />
            ) : (
              <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fill, minmax(280px, 1fr))', gap: 'var(--space-3)' }}>
                {notes.map(note => (
                  <div
                    key={note.id}
                    className="manage-note-card"
                    style={{
                      display: 'flex', flexDirection: 'column', gap: 'var(--space-3)',
                      padding: 'var(--space-4)',
                      borderRadius: 'var(--radius-lg)',
                      background: GLASS_INNER,
                      border: '1px solid var(--color-border)',
                      boxShadow: 'var(--shadow-sm)',
                    }}
                  >
                    <p style={{ margin: 0, fontSize: 'var(--font-size-sm)', color: 'var(--color-text-primary)', lineHeight: 1.6, whiteSpace: 'pre-wrap', flex: 1 }}>
                      {note.content || '—'}
                    </p>
                    <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 'var(--space-2)' }}>
                      <div style={{ display: 'flex', flexDirection: 'column', gap: 2, minWidth: 0 }}>
                        <span style={{ fontSize: 'var(--font-size-xs)', color: 'var(--color-text-muted)' }} title={fmtDateMedium(note.created_at)}>
                          {fmtRelative(note.created_at)}
                        </span>
                        {note.created_by && (
                          <span style={{ fontSize: 'var(--font-size-xs)', color: 'var(--color-text-muted)', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>
                            {note.created_by}
                          </span>
                        )}
                      </div>
                      {canEdit && (
                        <div style={{ display: 'flex', gap: 'var(--space-1)', flexShrink: 0 }}>
                          <button onClick={() => setNoteModal({ open: true, note })} title="Edit note" aria-label="Edit note"
                            style={{ width: 26, height: 26, borderRadius: 'var(--radius-sm)', border: '1px solid transparent', background: 'none', color: 'var(--color-text-muted)', cursor: 'pointer', display: 'flex', alignItems: 'center', justifyContent: 'center', transition: 'color 0.12s, background 0.12s, border-color 0.12s' }}
                            onMouseEnter={e => { e.currentTarget.style.color = 'var(--color-primary)'; e.currentTarget.style.background = 'var(--color-primary-subtle)'; e.currentTarget.style.borderColor = 'rgba(192,193,255,0.25)' }}
                            onMouseLeave={e => { e.currentTarget.style.color = 'var(--color-text-muted)'; e.currentTarget.style.background = 'none'; e.currentTarget.style.borderColor = 'transparent' }}
                          >
                            <Icon name="edit" size={13} />
                          </button>
                          <button onClick={() => setConfirmDeleteNote(note)} title="Delete note" aria-label="Delete note"
                            style={{ width: 26, height: 26, borderRadius: 'var(--radius-sm)', border: '1px solid transparent', background: 'none', color: 'var(--color-text-muted)', cursor: 'pointer', display: 'flex', alignItems: 'center', justifyContent: 'center', transition: 'color 0.12s, background 0.12s, border-color 0.12s' }}
                            onMouseEnter={e => { e.currentTarget.style.color = 'var(--color-danger)'; e.currentTarget.style.background = 'var(--color-danger-bg)'; e.currentTarget.style.borderColor = 'var(--color-danger)' }}
                            onMouseLeave={e => { e.currentTarget.style.color = 'var(--color-text-muted)'; e.currentTarget.style.background = 'none'; e.currentTarget.style.borderColor = 'transparent' }}
                          >
                            <Icon name="delete" size={13} />
                          </button>
                        </div>
                      )}
                    </div>
                  </div>
                ))}
              </div>
            )}
          </div>
        </GlassCard>

        {/* ── 3. LINKED ISSUES ──────────────────────────────────────────────── */}
        <GlassCard>
          <CardHeader
            label="Linked Issues"
            count={
              issues.filter(i => i.status !== 'resolved').length > 0
                ? `${issues.filter(i => i.status !== 'resolved').length} open`
                : issues.length > 0 ? `${issues.length} total` : undefined
            }
            action={canEdit && (
              <Button variant="secondary" size="sm" onClick={openNewIssue}>
                + New Issue
              </Button>
            )}
          />

          <div style={{ display: 'flex', flexDirection: 'column' }}>
            {issuesLoading ? (
              <div style={{ display: 'flex', justifyContent: 'center', padding: 'var(--space-8)' }}>
                <Spinner size="sm" />
              </div>
            ) : issues.length === 0 ? (
              <EmptySlate
                icon={
                  <svg width="36" height="36" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round">
                    <circle cx="12" cy="12" r="10"/><line x1="12" y1="8" x2="12" y2="12"/><line x1="12" y1="16" x2="12.01" y2="16"/>
                  </svg>
                }
                message="No issues linked to this device."
                action={canEdit && (
                  <Button variant="secondary" size="sm" onClick={openNewIssue}>Log first issue</Button>
                )}
              />
            ) : (
              issues.map((issue, idx) => (
                <div
                  key={issue.id}
                  className="manage-issue-row"
                  style={{
                    display: 'grid',
                    gridTemplateColumns: 'auto 1fr auto auto auto',
                    alignItems: 'center',
                    gap: 'var(--space-3)',
                    padding: 'var(--space-3) var(--space-5)',
                    borderBottom: idx < issues.length - 1 ? '1px solid var(--color-border)' : 'none',
                  }}
                  onClick={() => canEdit && openEditIssue(issue)}
                >
                  <StatusPill status={issue.status} />

                  <div style={{ minWidth: 0 }}>
                    <p style={{ margin: 0, fontSize: 'var(--font-size-sm)', fontWeight: 'var(--font-weight-medium)', color: 'var(--color-text-primary)', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>
                      {issue.title}
                    </p>
                    {issue.body && (
                      <p style={{ margin: '2px 0 0', fontSize: 'var(--font-size-xs)', color: 'var(--color-text-muted)', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>
                        {issue.body.replace(/<[^>]*>/g, '').slice(0, 90)}
                      </p>
                    )}
                  </div>

                  <SeverityBars severity={issue.severity} />

                  <span style={{ fontSize: 'var(--font-size-xs)', color: 'var(--color-text-muted)', whiteSpace: 'nowrap', flexShrink: 0 }} title={fmtDateMedium(issue.created_at)}>
                    {fmtRelative(issue.created_at)}
                  </span>

                  {canEdit && (
                    <button
                      onClick={e => { e.stopPropagation(); setConfirmDeleteIssue(issue.id) }}
                      title="Delete issue" aria-label="Delete issue"
                      style={{ width: 26, height: 26, borderRadius: 'var(--radius-sm)', border: '1px solid transparent', background: 'none', color: 'var(--color-text-muted)', cursor: 'pointer', display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0, transition: 'color 0.12s, background 0.12s, border-color 0.12s' }}
                      onMouseEnter={e => { e.currentTarget.style.color = 'var(--color-danger)'; e.currentTarget.style.background = 'var(--color-danger-bg)'; e.currentTarget.style.borderColor = 'var(--color-danger)' }}
                      onMouseLeave={e => { e.currentTarget.style.color = 'var(--color-text-muted)'; e.currentTarget.style.background = 'none'; e.currentTarget.style.borderColor = 'transparent' }}
                    >
                      <Icon name="delete" size={13} />
                    </button>
                  )}
                </div>
              ))
            )}
          </div>
        </GlassCard>

      </div>

      {/* ── Modals ─────────────────────────────────────────────────────────── */}

      <AddDeviceUserModal
        open={showAddUser}
        deviceId={id}
        existingUserIds={existingUserIds}
        onClose={() => setShowAddUser(false)}
        onAdded={handleUserAdded}
      />

      <DeviceNoteModal
        open={noteModal.open}
        deviceId={id}
        note={noteModal.note}
        onClose={() => setNoteModal({ open: false, note: null })}
        onSaved={handleNoteSaved}
      />

      {/* Issue form — pre-link to this device (locked — cannot be removed) */}
      <EntryFormModal
        open={issueModal.open}
        entry={issueModal.entry}
        defaultType="issue"
        prefilledLinks={issueModal.entry
          ? undefined
          : [{ entity_type: 'device', entity_id: id, display_name: device?.device_name || sn, locked: true }]
        }
        knownEntities={id ? { [id]: device?.device_name || sn } : undefined}
        onClose={() => setIssueModal({ open: false, entry: null })}
        onSaved={handleIssueSaved}
        onDelete={canEdit ? (entryId) => {
          setIssueModal({ open: false, entry: null })
          setConfirmDeleteIssue(entryId)
        } : null}
      />

      {/* Confirm: remove user */}
      <ConfirmDialog
        open={!!confirmRemoveUser}
        variant="danger"
        title="Remove Access"
        message={`Remove ${confirmRemoveUser?.display_name || confirmRemoveUser?.email || 'this user'} from the device?`}
        confirmLabel="Remove"
        onConfirm={handleRemoveUser}
        onClose={() => setConfirmRemoveUser(null)}
        loading={!!removingUser}
      />

      {/* Confirm: delete note */}
      <ConfirmDialog
        open={!!confirmDeleteNote}
        variant="danger"
        title="Delete Note"
        message="This note will be permanently deleted."
        confirmLabel="Delete"
        onConfirm={handleDeleteNote}
        onClose={() => setConfirmDeleteNote(null)}
        loading={deletingNote === confirmDeleteNote?.id}
      />

      {/* Confirm: delete issue */}
      <ConfirmDialog
        open={!!confirmDeleteIssue}
        variant="danger"
        title="Delete Issue"
        message="This issue and all its entity links will be permanently removed."
        confirmLabel="Delete"
        onConfirm={handleDeleteIssue}
        onClose={() => setConfirmDeleteIssue(null)}
        loading={deletingIssue}
      />
    </>
  )
}