import React, { useState } from "react";
import { PlusIcon, MagnifyingGlassIcon } from "@heroicons/react/24/outline";
import { ProcessosList } from "./ProcessosList";
import { ProcessoModal } from "./ProcessoModal";
import { Processo } from "../../types/entities";

export const ProcessosPage: React.FC = () => {
  const [isModalOpen, setIsModalOpen] = useState(false);
  const [searchTerm, setSearchTerm] = useState("");
  const [selectedProcesso, setSelectedProcesso] = useState<Processo | null>(
    null,
  );

  return (
    <div className="space-y-6">
      {/* Header */}
      <div className="flex justify-between items-center">
        <div className="relative">
          <input
            type="text"
            placeholder="Buscar processos..."
            className="w-full pl-10 pr-4 py-2 rounded-lg border border-gray-300 dark:border-gray-600 
                     bg-white dark:bg-gray-700 text-gray-900 dark:text-white
                     focus:ring-2 focus:ring-blue-500 dark:focus:ring-blue-400 focus:border-transparent"
            value={searchTerm}
            onChange={(e) => setSearchTerm(e.target.value)}
          />
        </div>
        <button
          onClick={() => {
            setSelectedProcesso(null);
            setIsModalOpen(true);
          }}
          className="flex items-center px-4 py-2 bg-blue-600 text-white rounded-lg 
                         hover:bg-blue-700 dark:hover:bg-blue-500 transition-colors"
        >
          <PlusIcon className="h-5 w-5 mr-2" />
          Novo Processo
        </button>
      </div>

      {/* Lista de Processos */}
      <div className="bg-white dark:bg-gray-800 rounded-lg shadow overflow-hidden">
        <table className="min-w-full divide-y divide-gray-200 dark:divide-gray-700">
          <thead className="bg-gray-50 dark:bg-gray-900">
            <tr>
              {/* ...headers... */}
            </tr>
          </thead>
          <tbody className="divide-y divide-gray-200 dark:divide-gray-700">
            {/* ...rows... */}
          </tbody>
        </table>
      </div>

      <ProcessosList
        searchTerm={searchTerm}
        onEdit={(processo) => {
          setSelectedProcesso(processo);
          setIsModalOpen(true);
        }}
      />

      <ProcessoModal
        isOpen={isModalOpen}
        processo={selectedProcesso}
        onClose={() => {
          setIsModalOpen(false);
          setSelectedProcesso(null);
        }}
      />
    </div>
  );
};