"use client"

import { useEffect, useState } from "react"
import { Check, Copy } from "lucide-react"
import { toast } from "sonner"
import { TechBrandSelectLabel } from "@/components/admin/settings/tech-brand-select-label"
import { FieldGroup } from "@/components/admin/settings/field-group"
import { useOrgSettingsStore } from "@/lib/admin-settings/org-settings-store"
import type { DriveMountOAuthProvider, DriveMountOAuthSettings } from "@/lib/admin-settings/org-settings-types"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"
import { Switch } from "@/components/ui/switch"
import { buildDriveMountOAuthRedirectURI } from "@/lib/drive/drive-mount-oauth"

const PROVIDERS: {
  id: DriveMountOAuthProvider
  label: string
  hint: string
  icon: string
}[] = [
  {
    id: "google",
    label: "Google Drive",
    hint: "Console Google Cloud — API Drive, redirect URI ci-dessous",
    icon: "logos:google-drive",
  },
  {
    id: "dropbox",
    label: "Dropbox",
    hint: "App Dropbox — permissions files.metadata.read, files.content.read/write",
    icon: "logos:dropbox",
  },
  {
    id: "microsoft",
    label: "Microsoft OneDrive",
    hint: "Azure AD — Microsoft Graph Files.ReadWrite",
    icon: "logos:microsoft-onedrive",
  },
]

const SECRET_KEYS: Record<DriveMountOAuthProvider, "mount_oauth_google" | "mount_oauth_dropbox" | "mount_oauth_microsoft"> = {
  google: "mount_oauth_google",
  dropbox: "mount_oauth_dropbox",
  microsoft: "mount_oauth_microsoft",
}

export function DriveMountOAuthSection({
  draft,
  onChange,
  embedded = false,
}: {
  draft: DriveMountOAuthSettings
  onChange: (next: DriveMountOAuthSettings) => void
  embedded?: boolean
}) {
  const secrets = useOrgSettingsStore((s) => s.meta?.secrets)
  const [redirectUri, setRedirectUri] = useState("")
  const [copied, setCopied] = useState(false)

  useEffect(() => {
    setRedirectUri(buildDriveMountOAuthRedirectURI())
  }, [])

  const updateProvider = (provider: DriveMountOAuthProvider, patch: Partial<DriveMountOAuthSettings[typeof provider]>) => {
    onChange({
      ...draft,
      [provider]: { ...draft[provider], ...patch },
    })
  }

  const copyRedirectUri = async () => {
    const uri = redirectUri || buildDriveMountOAuthRedirectURI()
    try {
      await navigator.clipboard.writeText(uri)
      setCopied(true)
      toast.success("URI de redirection copiée")
      window.setTimeout(() => setCopied(false), 2000)
    } catch {
      toast.error("Impossible de copier l'URI")
    }
  }

  return (
    <div className={embedded ? "space-y-4" : "space-y-4 rounded-lg border p-4"}>
      {!embedded ? (
        <div>
          <h3 className="text-sm font-medium">Connexion cloud (OAuth)</h3>
          <p className="mt-1 text-xs text-muted-foreground">
            Permet aux utilisateurs de monter Google Drive, Dropbox ou OneDrive depuis UltiDrive.
          </p>
        </div>
      ) : null}
      <FieldGroup>
        <Label>URI de redirection OAuth</Label>
        <div className="flex gap-2">
          <Input
            className="h-9 flex-1 font-mono text-xs"
            readOnly
            value={redirectUri}
            placeholder="Chargement…"
          />
          <Button
            type="button"
            variant="outline"
            size="sm"
            className="h-9 shrink-0 gap-1.5 px-3"
            onClick={() => void copyRedirectUri()}
            disabled={!redirectUri}
          >
            {copied ? <Check className="h-4 w-4" /> : <Copy className="h-4 w-4" />}
            Copier
          </Button>
        </div>
        <p className="text-xs text-muted-foreground">
          Basée sur l&apos;URL actuelle du navigateur. Enregistrez-la chez chaque fournisseur OAuth
          (Google, Dropbox, Microsoft).
        </p>
      </FieldGroup>
      <div className="space-y-4">
        {PROVIDERS.map(({ id, label, hint, icon }) => {
          const provider = draft[id]
          const configured = Boolean(secrets?.[SECRET_KEYS[id]]?.configured)
          return (
            <div key={id} className="space-y-3 rounded-md border p-3">
              <label className="flex items-center justify-between gap-4">
                <FieldGroup>
                  <TechBrandSelectLabel icon={icon} className="text-sm font-medium">
                    {label}
                  </TechBrandSelectLabel>
                  <p className="text-xs text-muted-foreground">{hint}</p>
                </FieldGroup>
                <Switch
                  checked={provider.enabled}
                  onCheckedChange={(enabled) => updateProvider(id, { enabled })}
                />
              </label>
              {provider.enabled ? (
                <div className="grid min-w-0 gap-4">
                  <FieldGroup>
                    <Label>Client ID</Label>
                    <Input
                      className="h-9 font-mono text-xs"
                      value={provider.client_id}
                      onChange={(e) => updateProvider(id, { client_id: e.target.value })}
                      autoComplete="off"
                    />
                  </FieldGroup>
                  <FieldGroup>
                    <Label>Client secret</Label>
                    <Input
                      className="h-9 font-mono text-xs"
                      type="password"
                      value={provider.client_secret}
                      onChange={(e) => updateProvider(id, { client_secret: e.target.value })}
                      placeholder={configured ? "•••••••• (laisser vide pour conserver)" : "Coller le secret"}
                      autoComplete="off"
                    />
                    {configured && !provider.client_secret.trim() ? (
                      <p className="text-xs text-muted-foreground">Secret configuré</p>
                    ) : null}
                  </FieldGroup>
                </div>
              ) : null}
            </div>
          )
        })}
      </div>
    </div>
  )
}