import {
  Table,
  TableBody,
  TableCell,
  TableHead,
  TableHeader,
  TableRow,
} from "@/components/ui/table";
import { useLocaleFunction } from "@/hooks/use-localed";
import type {
  LabDatabaseResourceItem,
  LabResourceItem,
  LabUrlResourceItem,
  LabVirtualMachineResourceItem,
} from "@/lib/api/labs";
import { Fragment } from "react";

export function LabResourcesTable({
  resources,
}: {
  resources: LabResourceItem[];
}) {
  const visualMachineResources = resources.filter(
    (resource) => resource.Type === "Virtual Machine"
  );
  const databaseMachineResources = resources.filter(
    (resource) => resource.Type === "Database"
  );
  const urlResources = resources.filter((resource) => resource.Type === "URL");

  return (
    <div className="space-y-6">
      {visualMachineResources.length > 0 && (
        <VirtualMachineLabResourcesTable resources={visualMachineResources} />
      )}
      {databaseMachineResources.length > 0 && (
        <DatabaseLabResourcesTable resources={databaseMachineResources} />
      )}
      {urlResources.length > 0 && (
        <UrlLabResourcesTable resources={urlResources} />
      )}
    </div>
  );
}

function VirtualMachineLabResourcesTable({
  resources,
}: {
  resources: LabVirtualMachineResourceItem[];
}) {
  const t = useLocaleFunction();
  return (
    <div className="space-y-2 w-full overflow-x-hidden">
      <div>{t("lab.resources.vm")}</div>
      <div className="w-full overflow-x-auto">
        <Table className="table-auto">
          <TableHeader>
            <TableRow>
              <TableHead>{t("lab.resources:Role")}</TableHead>
              <TableHead>{t("lab.resources:Public IP")}</TableHead>
              <TableHead>{t("lab.resources:Private IP")}</TableHead>
            </TableRow>
          </TableHeader>
          <TableBody>
            {resources.map((resource) => (
              <TableRow key={resource["Private IP"]} className="odd:bg-muted">
                <TableCell>{resource.Role}</TableCell>
                <TableCell>{resource["Public IP"]}</TableCell>
                <TableCell>{resource["Private IP"]}</TableCell>
              </TableRow>
            ))}
          </TableBody>
        </Table>
      </div>
    </div>
  );
}

function DatabaseLabResourcesTable({
  resources,
}: {
  resources: LabDatabaseResourceItem[];
}) {
  const t = useLocaleFunction();
  return (
    <div className="space-y-2 w-full overflow-x-hidden">
      <div>{t("lab.resources.db")}</div>
      <div className="w-full overflow-x-auto">
        <Table className="table-auto">
          <TableHeader>
            <TableRow>
              <TableHead>{t("lab.resources:Endpoint")}</TableHead>
              <TableHead>{t("lab.resources:Role")}</TableHead>
            </TableRow>
          </TableHeader>
          <TableBody>
            {resources.map((resource) => (
              <Fragment key={resource["Endpoint"]}>
                <TableRow className="border-b-0">
                  <TableCell>{resource["Endpoint"]}</TableCell>
                  <TableCell>{resource["Role"]}</TableCell>
                </TableRow>
                <TableRow>
                  <TableCell colSpan={2}>
                    <div className="table table-auto">
                      <div className="table-row-group">
                        {resource["Environment"] != null && (
                          <div className="table-row-group">
                            <span className="table-cell font-semibold text-muted-foreground text-right">
                              {t("lab.resources:Environment")}
                            </span>
                            <span className="table-cell pl-2">
                              {resource["Environment"]}
                            </span>
                          </div>
                        )}
                        {resource["Cluster Name"] != null && (
                          <div className="table-row-group">
                            <span className="table-cell font-semibold text-muted-foreground text-right">
                              {t("lab.resources:Cluster Name")}:
                            </span>
                            <span className="table-cell pl-2">
                              {resource["Cluster Name"]}
                            </span>
                          </div>
                        )}
                        <div className="table-row-group">
                          <span className="table-cell font-semibold text-muted-foreground text-right">
                            {t("lab.resources:Port")}
                          </span>
                          <span className="table-cell pl-2">
                            {resource["Port"]}
                          </span>
                        </div>
                        <div className="table-row-group">
                          <span className="table-cell font-semibold text-muted-foreground text-right">
                            {t("lab.resources:Username")}
                          </span>
                          <span className="table-cell pl-2">
                            {resource["Username"]}
                          </span>
                        </div>
                        <div className="table-row-group">
                          <span className="table-cell font-semibold text-muted-foreground text-right">
                            {t("lab.resources:Password")}
                          </span>
                          <span className="table-cell pl-2">
                            {resource["Password"]}
                          </span>
                        </div>
                      </div>
                    </div>
                  </TableCell>
                </TableRow>
              </Fragment>
            ))}
          </TableBody>
        </Table>
      </div>
    </div>
  );
}

function UrlLabResourcesTable({
  resources,
}: {
  resources: LabUrlResourceItem[];
}) {
  const t = useLocaleFunction();
  return (
    <div className="space-y-2 w-full overflow-x-hidden">
      <div>{t("lab.resources.urls")}</div>
      <div className="w-full overflow-x-auto">
        <Table className="table-auto">
          <TableHeader>
            <TableRow>
              <TableHead>{t("lab.resources:Role")}</TableHead>
              <TableHead>{t("lab.resources:Endpoint")}</TableHead>
            </TableRow>
          </TableHeader>
          <TableBody>
            {resources.map((resource) => (
              <TableRow key={resource["Role"]} className="odd:bg-muted">
                <TableCell>{resource.Role}</TableCell>
                <TableCell>
                  {resource["Endpoint"].startsWith("http") ? (
                    <a
                      className="underline"
                      href={resource["Endpoint"]}
                      target="_blank"
                    >
                      {resource["Endpoint"]}
                    </a>
                  ) : (
                    resource["Endpoint"]
                  )}
                </TableCell>
              </TableRow>
            ))}
          </TableBody>
        </Table>
      </div>
    </div>
  );
}