"use client"

import { Plus, Database } from "lucide-react";
import AddIntegrationModal from "./AddIntegrationModal";
import IntegrationTable from "./IntegratinTable";
import { useState } from "react";

function IntegrationMainPage() {
  const [isModalOpen, setIsModalOpen] = useState(false);

  return (
    <div className="p-6 space-y-6">
      <div className="flex items-center justify-between">
        <div>
          <h1 className="text-2xl font-semibold text-gray-500">
            External Integrations
          </h1>
          <p className="text-sm text-gray-500 mt-1">
            Connect to external systems like HRMS, CRM, and ERP
          </p>
        </div>

        <button
          className="flex items-center gap-2 bg-indigo-600 hover:bg-indigo-700 text-white px-4 py-2 rounded-md text-sm font-medium"
          onClick={() => setIsModalOpen(true)}
        >
          <Plus size={16} />
          Add Integration
        </button>
      </div>
      <div className="border border-dashed border-gray-300 rounded-lg p-12 flex flex-col items-center justify-center text-center">
        <div className="w-14 h-14 flex items-center justify-center rounded-full bg-gray-100 mb-4">
          <Database className="text-gray-500" size={28} />
        </div>

        <h2 className="text-lg font-semibold text-gray-500">
          No integrations yet
        </h2>

        <p className="text-sm text-gray-500 mt-2 max-w-md">
          Connect your external systems to sync data with your project
          management platform.
        </p>

        <button
          className="mt-6 flex items-center gap-2 bg-indigo-600 hover:bg-indigo-700 text-white px-5 py-2.5 rounded-md text-sm font-medium"
          onClick={() => setIsModalOpen(true)}
        >
          <Plus size={16} />
          Add Your First Integration
        </button>
      </div>
      {/* {isModalOpen && <AddIntegrationModal onClose={() => setIsModalOpen(false)} onSubmit={() => {
              setIsModalOpen(false);
              console.log("Integration created");
          } } open={false} />} */}
      <IntegrationTable />
      {isModalOpen && (
        <AddIntegrationModal
          open={isModalOpen}
          onClose={() => setIsModalOpen(false)}
          onSubmit={(data) => {
            console.log("Received in parent:", data);
          }}
        />
      )}{" "}
    </div>
  );
}

export default IntegrationMainPage;