"use client";import { useState } from "react";import { FileWarning, File, Monitor, Cloud, Check } from "lucide-react";import { Button } from "@/components/ui/button";import {  Dialog,  DialogContent,  DialogDescription,  DialogFooter,  DialogHeader,  DialogTitle,  DialogTrigger,} from "@/components/ui/dialog";import { Label } from "@/components/ui/label";import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group";import { Badge } from "@/components/ui/badge";const conflictData = {  fileName: "Q4-Report-Final.docx",  localVersion: {    size: "2.4 MB",    modified: "Today at 3:45 PM",    modifiedBy: "You",    device: "MacBook Pro",  },  cloudVersion: {    size: "2.1 MB",    modified: "Today at 2:30 PM",    modifiedBy: "Sarah Chen",    device: "Cloud sync",  },};type Resolution = "keep-local" | "keep-cloud" | "keep-both" | "";export const title = "React Dialog Block File Conflict Resolution";export default function DialogFileConflict() {  const [open, setOpen] = useState(false);  const [resolution, setResolution] = useState<Resolution>("");  const [resolved, setResolved] = useState(false);  const handleResolve = () => {    console.log({ resolution });    setResolved(true);  };  const handleClose = () => {    setOpen(false);    setTimeout(() => {      setResolution("");      setResolved(false);    }, 200);  };  return (    <Dialog open={open} onOpenChange={setOpen}>      <div className="flex min-h-[350px] items-center justify-center">        <DialogTrigger asChild>          <Button variant="outline">            <FileWarning className="mr-2 h-4 w-4" />            Resolve Conflict          </Button>        </DialogTrigger>      </div>      <DialogContent className="sm:max-w-md">        {resolved ? (          <div className="flex flex-col items-center justify-center py-8 text-center">            <Check className="h-8 w-8 text-primary" />            <h3 className="mt-4 text-lg font-semibold">Conflict Resolved</h3>            <p className="mt-2 text-sm text-muted-foreground">              {resolution === "keep-both"                ? "Both versions have been saved."                : resolution === "keep-local"                ? "Your local version has been kept."                : "The cloud version has been downloaded."}            </p>            <Button onClick={handleClose} className="mt-6">              Done            </Button>          </div>        ) : (          <>            <DialogHeader>              <DialogTitle className="flex items-center gap-2">                <FileWarning className="h-5 w-5" />                Sync Conflict              </DialogTitle>              <DialogDescription>                This file was modified in two places.              </DialogDescription>            </DialogHeader>            <div className="py-4 space-y-4">              <div className="flex items-center gap-2 rounded-lg border p-3">                <File className="h-4 w-4 text-muted-foreground" />                <span className="text-sm font-medium">{conflictData.fileName}</span>              </div>              <div className="space-y-2">                <div className="flex items-center justify-between rounded-lg border p-3">                  <div className="flex items-center gap-2">                    <Monitor className="h-4 w-4 text-muted-foreground" />                    <div>                      <p className="text-sm font-medium">Local Version</p>                      <p className="text-xs text-muted-foreground">                        {conflictData.localVersion.size} · {conflictData.localVersion.modified}                      </p>                    </div>                  </div>                  <Badge variant="secondary" className="text-xs">Newer</Badge>                </div>                <div className="flex items-center justify-between rounded-lg border p-3">                  <div className="flex items-center gap-2">                    <Cloud className="h-4 w-4 text-muted-foreground" />                    <div>                      <p className="text-sm font-medium">Cloud Version</p>                      <p className="text-xs text-muted-foreground">                        {conflictData.cloudVersion.size} · {conflictData.cloudVersion.modified}                      </p>                    </div>                  </div>                </div>              </div>              <RadioGroup                value={resolution}                onValueChange={(value) => setResolution(value as Resolution)}                className="space-y-3"              >                <div className="flex items-center space-x-3 rounded-lg border p-3 hover:bg-muted cursor-pointer">                  <RadioGroupItem value="keep-local" id="keep-local" />                  <Label htmlFor="keep-local" className="flex-1 cursor-pointer">                    <span className="font-medium">Keep local version</span>                    <p className="text-xs text-muted-foreground">                      Upload your local file and replace the cloud version                    </p>                  </Label>                </div>                <div className="flex items-center space-x-3 rounded-lg border p-3 hover:bg-muted cursor-pointer">                  <RadioGroupItem value="keep-cloud" id="keep-cloud" />                  <Label htmlFor="keep-cloud" className="flex-1 cursor-pointer">                    <span className="font-medium">Keep cloud version</span>                    <p className="text-xs text-muted-foreground">                      Download the cloud file and replace your local version                    </p>                  </Label>                </div>                <div className="flex items-center space-x-3 rounded-lg border p-3 hover:bg-muted cursor-pointer">                  <RadioGroupItem value="keep-both" id="keep-both" />                  <Label htmlFor="keep-both" className="flex-1 cursor-pointer">                    <span className="font-medium">Keep both versions</span>                    <p className="text-xs text-muted-foreground">                      Save local as &quot;Q4-Report-Final (conflict).docx&quot;                    </p>                  </Label>                </div>              </RadioGroup>            </div>            <DialogFooter>              <Button variant="outline" onClick={handleClose}>                Skip              </Button>              <Button onClick={handleResolve} disabled={!resolution}>                Resolve              </Button>            </DialogFooter>          </>        )}      </DialogContent>    </Dialog>  );}