"use client"

import { useState } from "react"
import { ArrowLeft, MapPin, Shield, Eye, Clock, Trash2 } from "lucide-react"
import { Button } from "@/components/ui/button"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { Switch } from "@/components/ui/switch"
import { Slider } from "@/components/ui/slider"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
import { useRouter } from "next/navigation"

export default function LocationSettingsPage() {
  const router = useRouter()
  const [settings, setSettings] = useState({
    shareLocation: true,
    showOnMap: true,
    allowNearbySearch: true,
    shareWithContacts: true,
    shareWithNearby: false,
    autoUpdateLocation: true,
    locationAccuracy: "high", // high, medium, low
    searchRadius: 5,
    locationHistory: true,
    shareLocationDuration: "always", // always, 1hour, 8hours, until_turned_off
  })

  const handleSettingChange = (key: string, value: boolean | string | number) => {
    setSettings((prev) => ({ ...prev, [key]: value }))
  }

  const clearLocationHistory = () => {
    console.log("[v0] Clearing location history")
    // In a real app, clear stored location data
  }

  return (
    <div className="min-h-screen bg-background">
      {/* Header */}
      <div className="sticky top-0 z-10 bg-card border-b border-border p-4">
        <div className="flex items-center space-x-3">
          <Button variant="ghost" size="sm" onClick={() => router.back()}>
            <ArrowLeft className="h-4 w-4" />
          </Button>
          <h1 className="text-xl font-semibold">Location Settings</h1>
        </div>
      </div>

      <div className="p-4 space-y-6">
        {/* Privacy Settings */}
        <Card>
          <CardHeader>
            <CardTitle className="flex items-center space-x-2">
              <Shield className="h-5 w-5" />
              <span>Privacy & Sharing</span>
            </CardTitle>
          </CardHeader>
          <CardContent className="space-y-4">
            <div className="flex items-center justify-between">
              <div>
                <p className="font-medium">Share Location</p>
                <p className="text-sm text-muted-foreground">Allow others to see your location</p>
              </div>
              <Switch
                checked={settings.shareLocation}
                onCheckedChange={(checked) => handleSettingChange("shareLocation", checked)}
              />
            </div>

            <div className="flex items-center justify-between">
              <div>
                <p className="font-medium">Show on Map</p>
                <p className="text-sm text-muted-foreground">Display your location on the map</p>
              </div>
              <Switch
                checked={settings.showOnMap}
                onCheckedChange={(checked) => handleSettingChange("showOnMap", checked)}
                disabled={!settings.shareLocation}
              />
            </div>

            <div className="flex items-center justify-between">
              <div>
                <p className="font-medium">Allow Nearby Search</p>
                <p className="text-sm text-muted-foreground">Appear in nearby user searches</p>
              </div>
              <Switch
                checked={settings.allowNearbySearch}
                onCheckedChange={(checked) => handleSettingChange("allowNearbySearch", checked)}
                disabled={!settings.shareLocation}
              />
            </div>

            <div className="space-y-2">
              <p className="font-medium">Share Location Duration</p>
              <Select
                value={settings.shareLocationDuration}
                onValueChange={(value) => handleSettingChange("shareLocationDuration", value)}
                disabled={!settings.shareLocation}
              >
                <SelectTrigger>
                  <SelectValue />
                </SelectTrigger>
                <SelectContent>
                  <SelectItem value="always">Always</SelectItem>
                  <SelectItem value="1hour">1 Hour</SelectItem>
                  <SelectItem value="8hours">8 Hours</SelectItem>
                  <SelectItem value="until_turned_off">Until Turned Off</SelectItem>
                </SelectContent>
              </Select>
            </div>
          </CardContent>
        </Card>

        {/* Visibility Settings */}
        <Card>
          <CardHeader>
            <CardTitle className="flex items-center space-x-2">
              <Eye className="h-5 w-5" />
              <span>Visibility</span>
            </CardTitle>
          </CardHeader>
          <CardContent className="space-y-4">
            <div className="flex items-center justify-between">
              <div>
                <p className="font-medium">Share with Contacts</p>
                <p className="text-sm text-muted-foreground">Allow your contacts to see your location</p>
              </div>
              <Switch
                checked={settings.shareWithContacts}
                onCheckedChange={(checked) => handleSettingChange("shareWithContacts", checked)}
                disabled={!settings.shareLocation}
              />
            </div>

            <div className="flex items-center justify-between">
              <div>
                <p className="font-medium">Share with Nearby Users</p>
                <p className="text-sm text-muted-foreground">Allow nearby users to see your location</p>
              </div>
              <Switch
                checked={settings.shareWithNearby}
                onCheckedChange={(checked) => handleSettingChange("shareWithNearby", checked)}
                disabled={!settings.shareLocation}
              />
            </div>
          </CardContent>
        </Card>

        {/* Location Accuracy */}
        <Card>
          <CardHeader>
            <CardTitle className="flex items-center space-x-2">
              <MapPin className="h-5 w-5" />
              <span>Location Accuracy</span>
            </CardTitle>
          </CardHeader>
          <CardContent className="space-y-4">
            <div className="space-y-2">
              <p className="font-medium">Accuracy Level</p>
              <Select
                value={settings.locationAccuracy}
                onValueChange={(value) => handleSettingChange("locationAccuracy", value)}
              >
                <SelectTrigger>
                  <SelectValue />
                </SelectTrigger>
                <SelectContent>
                  <SelectItem value="high">High (GPS + Network)</SelectItem>
                  <SelectItem value="medium">Medium (Network only)</SelectItem>
                  <SelectItem value="low">Low (Approximate)</SelectItem>
                </SelectContent>
              </Select>
              <p className="text-xs text-muted-foreground">
                Higher accuracy uses more battery but provides better location data
              </p>
            </div>

            <div className="flex items-center justify-between">
              <div>
                <p className="font-medium">Auto-update Location</p>
                <p className="text-sm text-muted-foreground">Continuously update your location</p>
              </div>
              <Switch
                checked={settings.autoUpdateLocation}
                onCheckedChange={(checked) => handleSettingChange("autoUpdateLocation", checked)}
              />
            </div>
          </CardContent>
        </Card>

        {/* Search Settings */}
        <Card>
          <CardHeader>
            <CardTitle>Search Settings</CardTitle>
          </CardHeader>
          <CardContent className="space-y-4">
            <div className="space-y-2">
              <div className="flex items-center justify-between">
                <p className="font-medium">Default Search Radius</p>
                <span className="text-sm text-muted-foreground">{settings.searchRadius}km</span>
              </div>
              <Slider
                value={[settings.searchRadius]}
                onValueChange={(value) => handleSettingChange("searchRadius", value[0])}
                max={50}
                min={1}
                step={1}
                className="w-full"
              />
              <p className="text-xs text-muted-foreground">Maximum distance to search for nearby users</p>
            </div>
          </CardContent>
        </Card>

        {/* Location History */}
        <Card>
          <CardHeader>
            <CardTitle className="flex items-center space-x-2">
              <Clock className="h-5 w-5" />
              <span>Location History</span>
            </CardTitle>
          </CardHeader>
          <CardContent className="space-y-4">
            <div className="flex items-center justify-between">
              <div>
                <p className="font-medium">Save Location History</p>
                <p className="text-sm text-muted-foreground">Store your location history for better experience</p>
              </div>
              <Switch
                checked={settings.locationHistory}
                onCheckedChange={(checked) => handleSettingChange("locationHistory", checked)}
              />
            </div>

            <div className="pt-2">
              <Button variant="outline" onClick={clearLocationHistory} className="w-full bg-transparent">
                <Trash2 className="h-4 w-4 mr-2" />
                Clear Location History
              </Button>
              <p className="text-xs text-muted-foreground mt-2">
                This will permanently delete all stored location data
              </p>
            </div>
          </CardContent>
        </Card>

        {/* Save Button */}
        <div className="pb-6">
          <Button className="w-full" onClick={() => router.back()}>
            Save Settings
          </Button>
        </div>
      </div>
    </div>
  )
}