condado-newsletter/frontend/src/pages/EntitiesPage.tsx

import { useState } from 'react'
import { Link, useNavigate } from 'react-router-dom'
import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query'
import {
  getEntities,
  createEntity,
  deleteEntity,
  VirtualEntityCreateDto,
} from '../api/entitiesApi'

const DEFAULT_CONTEXT_WINDOW_DAYS = 3

const initialFormState: VirtualEntityCreateDto = {
  name: '',
  email: '',
  jobTitle: '',
  personality: '',
  contextWindowDays: DEFAULT_CONTEXT_WINDOW_DAYS,
}

export default function EntitiesPage() {
  const navigate = useNavigate()
  const queryClient = useQueryClient()
  const { data: entities = [] } = useQuery({ queryKey: ['entities'], queryFn: getEntities })
  const [dialogOpen, setDialogOpen] = useState(false)
  const [form, setForm] = useState<VirtualEntityCreateDto>(initialFormState)

  const createMutation = useMutation({
    mutationFn: createEntity,
    onSuccess: (createdEntity) => {
      queryClient.invalidateQueries({ queryKey: ['entities'] })
      setDialogOpen(false)
      setForm(initialFormState)
      navigate(`/entities/${createdEntity.id}`)
    },
  })

  const deleteMutation = useMutation({
    mutationFn: (id: string) => deleteEntity(id),
    onSuccess: (_data, id) => {
      queryClient.setQueryData(
        ['entities'],
        (currentEntities: Awaited<ReturnType<typeof getEntities>> | undefined) =>
          currentEntities?.filter((entity) => entity.id !== id) ?? []
      )
    },
  })

  return (
    <div className="p-8">
      <div className="flex items-center justify-between">
        <h1 className="text-2xl font-bold text-slate-100">Virtual Entities</h1>
        <button
          onClick={() => setDialogOpen(true)}
          className="rounded bg-cyan-500 px-4 py-2 text-sm font-medium text-slate-950 hover:bg-cyan-400"
        >
          New Entity
        </button>
      </div>

      <ul className="mt-6 divide-y divide-slate-800 rounded-lg border border-slate-800 bg-slate-900/70 shadow-sm">
        {entities.map((entity) => (
          <li key={entity.id} className="flex items-center justify-between px-4 py-3">
            <div>
              <p className="font-medium text-slate-100">{entity.name}</p>
              <p className="text-sm text-slate-300">{entity.jobTitle} - {entity.email}</p>
            </div>
            <div className="ml-4 flex items-center gap-2">
              <Link
                to={`/entities/${entity.id}`}
                className="rounded border border-cyan-500 px-3 py-1 text-sm text-cyan-300 hover:bg-cyan-500/10"
              >
                Open details
              </Link>
              <button
                onClick={() => deleteMutation.mutate(entity.id)}
                className="rounded border border-red-400/60 px-3 py-1 text-sm text-red-300 hover:bg-red-400/10"
              >
                Delete
              </button>
            </div>
          </li>
        ))}
        {entities.length === 0 && (
          <li className="px-4 py-3 text-sm text-slate-400">No entities yet.</li>
        )}
      </ul>

      {dialogOpen && (
        <div
          role="dialog"
          aria-modal="true"
          aria-label="Create Entity"
          className="fixed inset-0 z-50 flex items-center justify-center bg-slate-950/70"
        >
          <div className="w-full max-w-md rounded-lg border border-slate-800 bg-slate-950 p-6 shadow-lg">
            <h2 className="mb-4 text-lg font-semibold text-slate-100">New Entity</h2>
            <form
              onSubmit={(e) => {
                e.preventDefault()
                createMutation.mutate(form)
              }}
              className="space-y-3"
            >
              <div>
                <label htmlFor="entity-name" className="mb-1 block text-sm font-medium text-slate-200">
                  Entity Name
                </label>
                <input
                  id="entity-name"
                  value={form.name}
                  onChange={(e) => setForm({ ...form, name: e.target.value })}
                  className="block w-full rounded border border-slate-700 bg-slate-900 px-3 py-2 text-sm text-slate-100"
                  required
                />
              </div>
              <div>
                <label htmlFor="entity-email" className="mb-1 block text-sm font-medium text-slate-200">
                  Sender Email
                </label>
                <input
                  id="entity-email"
                  type="email"
                  value={form.email}
                  onChange={(e) => setForm({ ...form, email: e.target.value })}
                  className="block w-full rounded border border-slate-700 bg-slate-900 px-3 py-2 text-sm text-slate-100"
                  required
                />
              </div>
              <div>
                <label htmlFor="entity-job-title" className="mb-1 block text-sm font-medium text-slate-200">
                  Job Title
                </label>
                <input
                  id="entity-job-title"
                  value={form.jobTitle}
                  onChange={(e) => setForm({ ...form, jobTitle: e.target.value })}
                  className="block w-full rounded border border-slate-700 bg-slate-900 px-3 py-2 text-sm text-slate-100"
                  required
                />
              </div>
              <div>
                <label htmlFor="entity-personality" className="mb-1 block text-sm font-medium text-slate-200">
                  Personality Notes
                </label>
                <textarea
                  id="entity-personality"
                  value={form.personality}
                  onChange={(e) => setForm({ ...form, personality: e.target.value })}
                  className="block w-full rounded border border-slate-700 bg-slate-900 px-3 py-2 text-sm text-slate-100"
                />
              </div>
              <div className="flex justify-end gap-2 pt-2">
                <button
                  type="button"
                  onClick={() => setDialogOpen(false)}
                  className="rounded border border-slate-700 px-4 py-2 text-sm text-slate-200"
                >
                  Cancel
                </button>
                <button
                  type="submit"
                  className="rounded bg-cyan-500 px-4 py-2 text-sm font-medium text-slate-950 hover:bg-cyan-400"
                >
                  Create
                </button>
              </div>
            </form>
          </div>
        </div>
      )}
    </div>
  )
}