import { useNavigate } from "react-router-dom";
import { ArrowLeft, Sun, Moon } from "lucide-react";
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
import { Switch } from "@/components/ui/switch";
import { Label } from "@/components/ui/label";
import { Button } from "@/components/ui/button";
import { usePreferences } from "@/contexts/PreferencesContext";

const Preferences = () => {
  const navigate = useNavigate();
  const { theme, engines, setTheme, toggleEngine } = usePreferences();

  return (
    <div className="min-h-screen bg-background">
      {/* Header */}
      <header className="sticky top-0 z-50 bg-background/95 backdrop-blur-sm border-b border-border">
        <div className="max-w-2xl mx-auto px-4 py-3 flex items-center gap-3">
          <Button variant="ghost" size="icon" onClick={() => navigate("/")} className="text-muted-foreground hover:text-foreground">
            <ArrowLeft size={18} />
          </Button>
          <h1 className="font-mono font-bold text-lg text-foreground tracking-tight">Preferences</h1>
        </div>
      </header>

      <main className="max-w-2xl mx-auto px-4 py-8 space-y-6">
        {/* Appearance */}
        <Card className="bg-card border-border">
          <CardHeader>
            <CardTitle className="text-foreground">Appearance</CardTitle>
            <CardDescription className="text-muted-foreground">Choose your preferred theme.</CardDescription>
          </CardHeader>
          <CardContent>
            <div className="flex gap-3">
              <button
                onClick={() => setTheme("light")}
                className={`flex-1 flex items-center justify-center gap-2 px-4 py-3 rounded-lg border transition-colors ${
                  theme === "light"
                    ? "border-primary bg-primary/10 text-foreground"
                    : "border-border text-muted-foreground hover:border-muted-foreground/40"
                }`}
              >
                <Sun size={18} />
                <span className="text-sm font-medium">Light</span>
              </button>
              <button
                onClick={() => setTheme("dark")}
                className={`flex-1 flex items-center justify-center gap-2 px-4 py-3 rounded-lg border transition-colors ${
                  theme === "dark"
                    ? "border-primary bg-primary/10 text-foreground"
                    : "border-border text-muted-foreground hover:border-muted-foreground/40"
                }`}
              >
                <Moon size={18} />
                <span className="text-sm font-medium">Dark</span>
              </button>
            </div>
          </CardContent>
        </Card>

        {/* Search Engines */}
        <Card className="bg-card border-border">
          <CardHeader>
            <CardTitle className="text-foreground">Search Engines</CardTitle>
            <CardDescription className="text-muted-foreground">Enable or disable engines used for queries.</CardDescription>
          </CardHeader>
          <CardContent>
            <div className="space-y-4">
              {engines.map((engine) => (
                <div key={engine.id} className="flex items-center justify-between">
                  <Label htmlFor={engine.id} className="text-foreground font-medium cursor-pointer">
                    {engine.name}
                  </Label>
                  <Switch
                    id={engine.id}
                    checked={engine.enabled}
                    onCheckedChange={() => toggleEngine(engine.id)}
                  />
                </div>
              ))}
            </div>
          </CardContent>
        </Card>
      </main>
    </div>
  );
};

export default Preferences;