import type { Route } from "./+types/ecosystem";
import React from "react";
import { ProtectedRoute } from "~/components/auth/protected-route";
import { DashboardLayout } from "~/components/dashboard/layout";
import { Card, CardContent, CardHeader, CardTitle } from "~/components/ui/card";
import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle } from "~/components/ui/dialog";
import { NetworkGraph } from "~/components/ecosystem/network-graph";
import { InfoPanel } from "~/components/ecosystem/info-panel";
import { Checkbox } from "~/components/ui/checkbox";

export function meta({}: Route.MetaArgs) {
  return [
    { title: "زیست بوم فناوری" },
    { name: "description", content: "نمایش زیست بوم فناوری با گراف شبکه‌ای شرکت‌ها" },
  ];
}

export default function EcosystemPage() {
  const [selectedCompany, setSelectedCompany] = React.useState<
    | { id: string; label?: string; [key: string]: unknown }
    | null
  >(null);
  const [highlightUnpaid, setHighlightUnpaid] = React.useState(false);

  const closeDialog = () => setSelectedCompany(null);

  return (
    <ProtectedRoute requireAuth={true}>
      <DashboardLayout title="زیست بوم فناوری">
        <div className="p-4 lg:p-6">
          <div className="grid grid-cols-1 items-start lg:grid-cols-12 gap-4">

            <div className="lg:col-span-4">
              {//<InfoPanel selectedCompany={selectedCompany} />
              }
            </div>

            <div className="lg:col-span-8">
              <Card className="h-[70vh] lg:h-[calc(100vh-220px)]">
                <CardHeader className="pb-2 flex flex-row items-center justify-between gap-4">
                  <CardTitle className="font-persian text-base">گراف شبکه‌ای شرکت‌ها</CardTitle>
                  </CardHeader>
                <CardContent className="p-0 h-full">
                  <NetworkGraph onNodeClick={setSelectedCompany} highlightUnpaid={highlightUnpaid} />
                </CardContent>
              </Card>
            </div>

          </div>
        </div>

        {/* Node info dialog */}
        <Dialog open={!!selectedCompany} onOpenChange={(open) => !open && closeDialog()}>
          <DialogContent className="font-persian">
            <DialogHeader>
              <DialogTitle>{selectedCompany?.label || "اطلاعات شرکت"}</DialogTitle>
              <DialogDescription>
                شناسه: {selectedCompany?.id}
              </DialogDescription>
            </DialogHeader>
            <div className="space-y-2 text-sm">
              <p>Test</p>
            </div>
          </DialogContent>
        </Dialog>
      </DashboardLayout>
    </ProtectedRoute>
  );
}