"use client"

import { useState } from "react"
import { Button } from "@/components/ui/button"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Label } from "@/components/ui/label"
import { Switch } from "@/components/ui/switch"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
import { Alert, AlertDescription } from "@/components/ui/alert"
import { Shield, Trash2, Download } from "lucide-react"

interface PrivacyDataSettingsProps {
  user: any
}

export function PrivacyDataSettings({ user }: PrivacyDataSettingsProps) {
  const [settings, setSettings] = useState({
    dataCollection: true,
    analytics: false,
    personalizedAds: false,
    shareWithPartners: false,
    retentionPeriod: "1year",
    deleteAfterInactivity: false,
  })

  return (
    <div className="space-y-6">
      <Card>
        <CardHeader>
          <CardTitle className="flex items-center gap-2">
            <Shield className="h-5 w-5" />
            Data Privacy Controls
          </CardTitle>
          <CardDescription>Manage how your data is collected, used, and stored</CardDescription>
        </CardHeader>
        <CardContent className="space-y-6">
          <div className="flex items-center justify-between">
            <div className="space-y-0.5">
              <Label>Data Collection for Improvement</Label>
              <p className="text-sm text-muted-foreground">
                Allow us to use your interactions to improve our AI models
              </p>
            </div>
            <Switch
              checked={settings.dataCollection}
              onCheckedChange={(checked) => setSettings({ ...settings, dataCollection: checked })}
            />
          </div>

          <div className="flex items-center justify-between">
            <div className="space-y-0.5">
              <Label>Usage Analytics</Label>
              <p className="text-sm text-muted-foreground">Help us understand how you use G7 Astrum</p>
            </div>
            <Switch
              checked={settings.analytics}
              onCheckedChange={(checked) => setSettings({ ...settings, analytics: checked })}
            />
          </div>

          <div className="flex items-center justify-between">
            <div className="space-y-0.5">
              <Label>Personalized Experience</Label>
              <p className="text-sm text-muted-foreground">Customize your experience based on usage patterns</p>
            </div>
            <Switch
              checked={settings.personalizedAds}
              onCheckedChange={(checked) => setSettings({ ...settings, personalizedAds: checked })}
            />
          </div>

          <div className="space-y-2">
            <Label>Data Retention Period</Label>
            <Select
              value={settings.retentionPeriod}
              onValueChange={(value) => setSettings({ ...settings, retentionPeriod: value })}
            >
              <SelectTrigger>
                <SelectValue />
              </SelectTrigger>
              <SelectContent>
                <SelectItem value="30days">30 Days</SelectItem>
                <SelectItem value="3months">3 Months</SelectItem>
                <SelectItem value="6months">6 Months</SelectItem>
                <SelectItem value="1year">1 Year</SelectItem>
                <SelectItem value="indefinite">Indefinite</SelectItem>
              </SelectContent>
            </Select>
          </div>
        </CardContent>
      </Card>

      <Card>
        <CardHeader>
          <CardTitle>Data Management</CardTitle>
          <CardDescription>Export or delete your personal data</CardDescription>
        </CardHeader>
        <CardContent className="space-y-4">
          <div className="flex items-center justify-between p-4 border rounded-lg">
            <div>
              <h4 className="font-medium">Export Your Data</h4>
              <p className="text-sm text-muted-foreground">Download all your conversations and account data</p>
            </div>
            <Button variant="outline">
              <Download className="h-4 w-4 mr-2" />
              Export
            </Button>
          </div>

          <div className="flex items-center justify-between p-4 border rounded-lg border-destructive/20">
            <div>
              <h4 className="font-medium text-destructive">Delete All Data</h4>
              <p className="text-sm text-muted-foreground">
                Permanently delete all your conversations and account data
              </p>
            </div>
            <Button variant="destructive">
              <Trash2 className="h-4 w-4 mr-2" />
              Delete
            </Button>
          </div>

          <Alert>
            <Shield className="h-4 w-4" />
            <AlertDescription>
              Your privacy is important to us. We use industry-standard encryption and never sell your personal data to
              third parties.
            </AlertDescription>
          </Alert>
        </CardContent>
      </Card>
    </div>
  )
}