"use client"

import { useState } from "react"
import {
  useDetectChanges,
  useFullExport,
  useFullImport,
  useExportSidecar,
  useImportSidecar,
  useResolveSidecarConflict,
} from "@/hooks/use-sidecars"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"
import {
  Card,
  CardContent,
  CardDescription,
  CardHeader,
  CardTitle,
} from "@/components/ui/card"
import { Badge } from "@/components/ui/badge"
import { toast } from "sonner"

export default function SidecarsPage() {
  const detectChanges = useDetectChanges()
  const fullExport = useFullExport()
  const fullImport = useFullImport()
  const exportSidecar = useExportSidecar()
  const importSidecar = useImportSidecar()
  const resolveConflict = useResolveSidecarConflict()

  const [assetId, setAssetId] = useState("")
  const [conflictPolicy, setConflictPolicy] = useState("keep_local")

  return (
    <div className="flex flex-col gap-6">
      <h1 className="text-lg font-semibold">Sidecar Management</h1>

      {/* Bulk actions */}
      <Card>
        <CardHeader>
          <CardTitle>Bulk Operations</CardTitle>
          <CardDescription>
            Manage sidecar metadata across all assets
          </CardDescription>
        </CardHeader>
        <CardContent className="flex gap-2">
          <Button
            size="sm"
            variant="outline"
            disabled={detectChanges.isPending}
            onClick={async () => {
              try {
                const res = await detectChanges.mutateAsync()
                toast.success(`Detected ${res.changed_count} change(s)`)
              } catch {
                toast.error("Detection failed")
              }
            }}
          >
            Detect Changes
          </Button>
          <Button
            size="sm"
            variant="outline"
            disabled={fullExport.isPending}
            onClick={async () => {
              try {
                await fullExport.mutateAsync()
                toast.success("Full export started")
              } catch {
                toast.error("Export failed")
              }
            }}
          >
            Full Export
          </Button>
          <Button
            size="sm"
            variant="outline"
            disabled={fullImport.isPending}
            onClick={async () => {
              try {
                await fullImport.mutateAsync()
                toast.success("Full import started")
              } catch {
                toast.error("Import failed")
              }
            }}
          >
            Full Import
          </Button>
        </CardContent>
      </Card>

      {/* Per-asset */}
      <Card>
        <CardHeader>
          <CardTitle>Per-Asset Operations</CardTitle>
        </CardHeader>
        <CardContent className="flex flex-col gap-3">
          <div className="flex flex-col gap-1">
            <Label className="text-xs">Asset ID</Label>
            <Input
              value={assetId}
              onChange={(e) => setAssetId(e.target.value)}
              placeholder="uuid"
              className="h-8"
            />
          </div>
          <div className="flex gap-2">
            <Button
              size="sm"
              variant="outline"
              disabled={!assetId || exportSidecar.isPending}
              onClick={async () => {
                try {
                  const res = await exportSidecar.mutateAsync(assetId)
                  toast.success(
                    <>
                      Exported: <Badge variant="secondary">{res.status}</Badge>
                    </>,
                  )
                } catch {
                  toast.error("Export failed")
                }
              }}
            >
              Export
            </Button>
            <Button
              size="sm"
              variant="outline"
              disabled={!assetId || importSidecar.isPending}
              onClick={async () => {
                try {
                  const res = await importSidecar.mutateAsync(assetId)
                  toast.success(`Import: ${res.status}`)
                } catch {
                  toast.error("Import failed")
                }
              }}
            >
              Import
            </Button>
            <div className="flex items-center gap-1">
              <Input
                value={conflictPolicy}
                onChange={(e) => setConflictPolicy(e.target.value)}
                placeholder="keep_local"
                className="h-8 w-32"
              />
              <Button
                size="sm"
                variant="secondary"
                disabled={!assetId || resolveConflict.isPending}
                onClick={async () => {
                  try {
                    await resolveConflict.mutateAsync({
                      assetId,
                      policy: conflictPolicy,
                    })
                    toast.success("Conflict resolved")
                  } catch {
                    toast.error("Resolve failed")
                  }
                }}
              >
                Resolve
              </Button>
            </div>
          </div>
        </CardContent>
      </Card>
    </div>
  )
}