import { type Preferences } from "@/app/lib/store";
import { Input } from "../ui/input";
import { ScrollArea } from "../ui/scroll-area";
import { SlidersHorizontal } from "lucide-react";
import { Switch } from "../ui/switch";

type PreferencesSettingsTabProps = {
  preferences: Preferences;
  setPreferences: (prefs: Partial<Preferences>) => void;
};

export function PreferencesSettingsTab({
  preferences,
  setPreferences,
}: PreferencesSettingsTabProps) {
  return (
    <div className="flex-1 m-0 overflow-hidden">
      <ScrollArea className="h-full">
        <div className="mx-auto max-w-2xl space-y-6 p-6">
          <section className="rounded border border-border bg-card overflow-hidden">
            <div className="border-b border-border px-5 py-4">
              <div className="flex items-center gap-2">
                <SlidersHorizontal className="h-4 w-4 text-primary" />
                <h3 className="text-sm font-semibold">Panel Sizes</h3>
              </div>
              <p className="mt-1 text-body-sm text-muted-foreground">
                Control the min/max widths of the sidebar and inspector panels
                (in % of screen).
              </p>
            </div>
            <div className="p-5 space-y-4">
              <div className="grid grid-cols-2 gap-4">
                <div className="space-y-1.5">
                  <label className="text-body-sm font-medium text-muted-foreground">
                    Sidebar min width (%)
                  </label>
                  <Input
                    type="number"
                    min={5}
                    max={50}
                    value={preferences.sidebarMinWidth}
                    onChange={(e) =>
                      setPreferences({
                        sidebarMinWidth: Number(e.target.value),
                      })
                    }
                    className="h-8 text-xs"
                  />
                </div>
                <div className="space-y-1.5">
                  <label className="text-body-sm font-medium text-muted-foreground">
                    Sidebar max width (%)
                  </label>
                  <Input
                    type="number"
                    min={10}
                    max={60}
                    value={preferences.sidebarMaxWidth}
                    onChange={(e) =>
                      setPreferences({
                        sidebarMaxWidth: Number(e.target.value),
                      })
                    }
                    className="h-8 text-xs"
                  />
                </div>
                <div className="space-y-1.5">
                  <label className="text-body-sm font-medium text-muted-foreground">
                    Inspector min width (%)
                  </label>
                  <Input
                    type="number"
                    min={5}
                    max={50}
                    value={preferences.inspectorMinWidth}
                    onChange={(e) =>
                      setPreferences({
                        inspectorMinWidth: Number(e.target.value),
                      })
                    }
                    className="h-8 text-xs"
                  />
                </div>
                <div className="space-y-1.5">
                  <label className="text-body-sm font-medium text-muted-foreground">
                    Inspector max width (%)
                  </label>
                  <Input
                    type="number"
                    min={10}
                    max={60}
                    value={preferences.inspectorMaxWidth}
                    onChange={(e) =>
                      setPreferences({
                        inspectorMaxWidth: Number(e.target.value),
                      })
                    }
                    className="h-8 text-xs"
                  />
                </div>
              </div>
            </div>
          </section>

          <section className="rounded border border-border bg-card overflow-hidden">
            <div className="border-b border-border px-5 py-4">
              <h3 className="text-sm font-semibold">Data Grid</h3>
              <p className="mt-1 text-body-sm text-muted-foreground">
                Control column sizing and auto-fit behavior.
              </p>
            </div>
            <div className="p-5 space-y-4">
              <Switch
                checked={preferences.autoFitColumnWidth}
                onCheckedChange={(checked) =>
                  setPreferences({ autoFitColumnWidth: checked })
                }
                size="sm"
                label="Auto-fit column widths"
                description="Automatically size columns to fit their longest value"
              />
              {preferences.autoFitColumnWidth && (
                <div className="space-y-1.5 ml-12">
                  <label className="text-body-sm font-medium text-muted-foreground">
                    Max auto column width (px)
                  </label>
                  <Input
                    type="number"
                    min={100}
                    max={1000}
                    value={preferences.maxAutoColumnWidth}
                    onChange={(e) =>
                      setPreferences({
                        maxAutoColumnWidth: Number(e.target.value),
                      })
                    }
                    className="h-8 text-xs w-30"
                  />
                </div>
              )}
            </div>
          </section>
        </div>
      </ScrollArea>
    </div>
  );
}
