import { open as openDialog } from "@tauri-apps/plugin-dialog";
import {
  Dialog,
  DialogContent,
  DialogHeader,
  DialogTitle,
  DialogDescription,
} from "@/components/ui/dialog";
import { useStore, actions } from "@/lib/store";
import { Button } from "@/components/ui/button";
import { Separator } from "@/components/ui/separator";

interface SettingsDialogProps {
  open: boolean;
  onOpenChange: (open: boolean) => void;
}

export function SettingsDialog({ open, onOpenChange }: SettingsDialogProps) {
  const { settings } = useStore();

  const handlePickCustomCSS = async () => {
    const selected = await openDialog({
      multiple: false,
      filters: [{ name: "CSS Files", extensions: ["css"] }],
    });
    if (selected) {
      actions.updateSettings({ customCssPath: selected as string });
    }
  };

  const handleClearCustomCSS = () => {
    actions.updateSettings({ customCssPath: null });
  };

  return (
    <Dialog open={open} onOpenChange={onOpenChange}>
      <DialogContent className="max-w-[450px]">
        <DialogHeader>
          <DialogTitle>Settings</DialogTitle>
          <DialogDescription>Configure the editor to your preferences.</DialogDescription>
        </DialogHeader>

        <div className="space-y-4">
          <div className="flex items-center justify-between">
            <div>
              <label className="text-sm font-medium">Font Size</label>
              <p className="text-xs text-muted-foreground">{settings.fontSize}px</p>
            </div>
            <div className="flex items-center gap-2">
              <Button
                variant="outline"
                size="sm"
                onClick={() => actions.updateSettings({ fontSize: Math.max(10, settings.fontSize - 1) })}
              >
                -
              </Button>
              <span className="w-8 text-center text-sm">{settings.fontSize}</span>
              <Button
                variant="outline"
                size="sm"
                onClick={() => actions.updateSettings({ fontSize: Math.min(32, settings.fontSize + 1) })}
              >
                +
              </Button>
            </div>
          </div>

          <Separator />

          <div className="flex items-center justify-between">
            <div>
              <label className="text-sm font-medium">Tab Size</label>
              <p className="text-xs text-muted-foreground">Spaces per tab</p>
            </div>
            <div className="flex gap-1">
              {[2, 4, 8].map((size) => (
                <Button
                  key={size}
                  variant={settings.tabSize === size ? "default" : "outline"}
                  size="sm"
                  onClick={() => actions.updateSettings({ tabSize: size })}
                >
                  {size}
                </Button>
              ))}
            </div>
          </div>

          <Separator />

          <div className="flex items-center justify-between">
            <div>
              <label className="text-sm font-medium">Word Wrap</label>
              <p className="text-xs text-muted-foreground">Wrap long lines</p>
            </div>
            <Button
              variant={settings.wordWrap ? "default" : "outline"}
              size="sm"
              onClick={() => actions.updateSettings({ wordWrap: !settings.wordWrap })}
            >
              {settings.wordWrap ? "On" : "Off"}
            </Button>
          </div>

          <Separator />

          <div className="flex items-center justify-between">
            <div>
              <label className="text-sm font-medium">Theme</label>
              <p className="text-xs text-muted-foreground">Editor color scheme</p>
            </div>
            <div className="flex gap-1">
              <Button
                variant={settings.theme === "dark" ? "default" : "outline"}
                size="sm"
                onClick={() => actions.updateSettings({ theme: "dark" })}
              >
                Dark
              </Button>
              <Button
                variant={settings.theme === "light" ? "default" : "outline"}
                size="sm"
                onClick={() => actions.updateSettings({ theme: "light" })}
              >
                Light
              </Button>
            </div>
          </div>

          <Separator />

          <div className="flex items-center justify-between">
            <div>
              <label className="text-sm font-medium">Auto Save</label>
              <p className="text-xs text-muted-foreground">Save files automatically</p>
            </div>
            <Button
              variant={settings.autoSave ? "default" : "outline"}
              size="sm"
              onClick={() => actions.updateSettings({ autoSave: !settings.autoSave })}
            >
              {settings.autoSave ? "On" : "Off"}
            </Button>
          </div>

          <Separator />

          <div className="flex items-center justify-between">
            <div>
              <label className="text-sm font-medium">Custom CSS</label>
              <p className="text-xs text-muted-foreground truncate max-w-[200px]">
                {settings.customCssPath
                  ? settings.customCssPath.split("/").pop()
                  : "No custom theme loaded"}
              </p>
            </div>
            <div className="flex gap-1">
              <Button variant="outline" size="sm" onClick={handlePickCustomCSS}>
                Browse
              </Button>
              {settings.customCssPath && (
                <Button variant="outline" size="sm" onClick={handleClearCustomCSS}>
                  Clear
                </Button>
              )}
            </div>
          </div>
        </div>
      </DialogContent>
    </Dialog>
  );
}
