"use client"

import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Label } from "@/components/ui/label"
import { Switch } from "@/components/ui/switch"
import { usePreferences } from "@/contexts/preferences-context"

export default function SettingsPage() {
    const { preferences, updatePreferences, loading } = usePreferences()

    if (loading) {
        return <div>Loading settings...</div>
    }

    return (
        <div className="max-w-2xl mx-auto space-y-6">
            <h1 className="text-3xl font-bold tracking-tight">Settings</h1>

            <Card>
                <CardHeader>
                    <CardTitle>Preferences</CardTitle>
                    <CardDescription>
                        Customize your browsing experience.
                    </CardDescription>
                </CardHeader>
                <CardContent className="space-y-6">
                    <div className="flex items-center justify-between space-x-2">
                        <div className="space-y-0.5">
                            <Label htmlFor="wiki-mode">Wiki Mode</Label>
                            <p className="text-sm text-muted-foreground">
                                Hide all social features (comments, ratings, reviews) for a pure archive experience.
                            </p>
                        </div>
                        <Switch
                            id="wiki-mode"
                            checked={preferences.wiki_mode}
                            onCheckedChange={(checked) => updatePreferences({ wiki_mode: checked })}
                        />
                    </div>

                    <div className="flex items-center justify-between space-x-2">
                        <div className="space-y-0.5">
                            <Label htmlFor="show-ratings">Show Ratings</Label>
                            <p className="text-sm text-muted-foreground">
                                Display 1-10 ratings on shows and songs.
                            </p>
                        </div>
                        <Switch
                            id="show-ratings"
                            checked={preferences.show_ratings}
                            disabled={preferences.wiki_mode}
                            onCheckedChange={(checked) => updatePreferences({ show_ratings: checked })}
                        />
                    </div>

                    <div className="flex items-center justify-between space-x-2">
                        <div className="space-y-0.5">
                            <Label htmlFor="show-comments">Show Comments</Label>
                            <p className="text-sm text-muted-foreground">
                                Display comment sections on pages.
                            </p>
                        </div>
                        <Switch
                            id="show-comments"
                            checked={preferences.show_comments}
                            disabled={preferences.wiki_mode}
                            onCheckedChange={(checked) => updatePreferences({ show_comments: checked })}
                        />
                    </div>
                </CardContent>
            </Card>
        </div>
    )
}