"use client"

import { useState } from "react"
import { FieldGroup } from "@/components/admin/settings/field-group"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"
import {
  useAdminDriveOrgFolderMutations,
  useAdminDriveOrgFolders,
} from "@/lib/api/hooks/use-admin-drive-queries"

export function DriveOrgFoldersSection({ embedded = false }: { embedded?: boolean }) {
  const folders = useAdminDriveOrgFolders()
  const { create, remove, sync } = useAdminDriveOrgFolderMutations()
  const [orgSlug, setOrgSlug] = useState("")
  const [mountPoint, setMountPoint] = useState("")
  const [syncSlugs, setSyncSlugs] = useState("")

  return (
    <div className={embedded ? "space-y-4" : "space-y-6 rounded-lg border p-4"}>
      {!embedded ? (
        <div>
          <h3 className="text-sm font-medium">Dossiers d&apos;organisation</h3>
          <p className="text-xs text-muted-foreground">
            Espaces de stockage internes (group folders Nextcloud) liés aux organisations Authentik.
          </p>
        </div>
      ) : null}

      <div className="grid min-w-0 gap-4">
        <FieldGroup>
          <Label htmlFor="org-slug">Slug organisation</Label>
          <Input id="org-slug" value={orgSlug} onChange={(e) => setOrgSlug(e.target.value)} placeholder="acme" />
        </FieldGroup>
        <FieldGroup>
          <Label htmlFor="org-mount">Nom du dossier</Label>
          <Input id="org-mount" value={mountPoint} onChange={(e) => setMountPoint(e.target.value)} placeholder="Acme Corp" />
        </FieldGroup>
      </div>
      <Button
        size="sm"
        disabled={!orgSlug.trim() || !mountPoint.trim() || create.isPending}
        onClick={() =>
          void create.mutateAsync({ org_slug: orgSlug.trim(), mount_point: mountPoint.trim() })
        }
      >
        Créer le dossier
      </Button>

      <FieldGroup>
        <Label htmlFor="sync-orgs">Provisionnement automatique</Label>
        <p className="text-xs text-muted-foreground">
          Crée un dossier d&apos;organisation pour chaque slug listé, s&apos;il n&apos;existe pas encore.
          Les slugs correspondent aux organisations Authentik.
        </p>
        <Input
          id="sync-orgs"
          value={syncSlugs}
          onChange={(e) => setSyncSlugs(e.target.value)}
          placeholder="acme, beta"
        />
        <Button
          size="sm"
          variant="outline"
          disabled={!syncSlugs.trim() || sync.isPending}
          onClick={() =>
            void sync.mutateAsync(
              syncSlugs.split(",").map((s) => s.trim()).filter(Boolean)
            )
          }
        >
          Provisionner les dossiers
        </Button>
      </FieldGroup>

      <ul className="divide-y rounded-md border text-sm">
        {(folders.data ?? []).map((folder) => (
          <li key={folder.id} className="flex items-center justify-between gap-3 px-3 py-2">
            <div className="min-w-0">
              <p className="truncate font-medium">{folder.mount_point}</p>
              <p className="truncate text-xs text-muted-foreground">{folder.org_slug}</p>
            </div>
            <Button
              size="sm"
              variant="ghost"
              className="shrink-0 text-destructive"
              disabled={remove.isPending}
              onClick={() => void remove.mutateAsync(folder.id)}
            >
              Supprimer
            </Button>
          </li>
        ))}
        {folders.data?.length === 0 ? (
          <li className="px-3 py-4 text-center text-muted-foreground">Aucun dossier d&apos;organisation</li>
        ) : null}
      </ul>
    </div>
  )
}