import { useUserConfig, useUpdatePrivacy } from "./hooks";
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
import { Switch } from "@/components/ui/switch";
import { Label } from "@/components/ui/label";
import { Card, CardContent, CardHeader, CardTitle, CardDescription } from "@/components/ui/card";

const visibilityOptions = [
  { value: "public", label: "Public" },
  { value: "members", label: "Members only" },
  { value: "private", label: "Private" },
];

export default function SettingsPrivacyPage() {
  const { data: config, isLoading } = useUserConfig();
  const update = useUpdatePrivacy();
  const privacy = config?.privacy;

  return (
    <div className="px-8 py-10">
      <h1 className="text-xl font-heading font-bold text-foreground">Privacy</h1>
      <p className="mt-1 text-sm text-muted-foreground">Control who can see your information and activity</p>

      {isLoading ? (
        <div className="mt-8 space-y-4">
          {Array.from({ length: 4 }).map((_, i) => (
            <div className="h-12 animate-pulse rounded-lg bg-muted" key={i} />
          ))}
        </div>
      ) : (
        <div className="mt-8 space-y-6">
          <Card>
            <CardHeader>
              <CardTitle>Profile visibility</CardTitle>
              <CardDescription>Who can see your profile page</CardDescription>
            </CardHeader>
            <CardContent>
              <Select
                value={privacy?.profile_visibility ?? "public"}
                onValueChange={(v) => update.mutate({ profile_visibility: v })}
              >
                <SelectTrigger className="w-48">
                  <SelectValue />
                </SelectTrigger>
                <SelectContent>
                  {visibilityOptions.map((opt) => (
                    <SelectItem key={opt.value} value={opt.value}>{opt.label}</SelectItem>
                  ))}
                </SelectContent>
              </Select>
            </CardContent>
          </Card>

          <Card>
            <CardHeader>
              <CardTitle>Activity visibility</CardTitle>
              <CardDescription>Who can see your contribution activity</CardDescription>
            </CardHeader>
            <CardContent>
              <Select
                value={privacy?.activity_visibility ?? "public"}
                onValueChange={(v) => update.mutate({ activity_visibility: v })}
              >
                <SelectTrigger className="w-48">
                  <SelectValue />
                </SelectTrigger>
                <SelectContent>
                  {visibilityOptions.map((opt) => (
                    <SelectItem key={opt.value} value={opt.value}>{opt.label}</SelectItem>
                  ))}
                </SelectContent>
              </Select>
            </CardContent>
          </Card>

          <Card>
            <CardHeader>
              <CardTitle>Email visibility</CardTitle>
              <CardDescription>Who can see your email address</CardDescription>
            </CardHeader>
            <CardContent>
              <Select
                value={privacy?.email_visibility ?? "private"}
                onValueChange={(v) => update.mutate({ email_visibility: v })}
              >
                <SelectTrigger className="w-48">
                  <SelectValue />
                </SelectTrigger>
                <SelectContent>
                  {visibilityOptions.map((opt) => (
                    <SelectItem key={opt.value} value={opt.value}>{opt.label}</SelectItem>
                  ))}
                </SelectContent>
              </Select>
            </CardContent>
          </Card>

          <Card>
            <CardHeader>
              <CardTitle>Other settings</CardTitle>
              <CardDescription>Additional privacy controls</CardDescription>
            </CardHeader>
            <CardContent>
              <div className="space-y-4">
                <div className="flex items-center justify-between">
                  <Label>Show online status</Label>
                  <Switch
                    checked={privacy?.show_online_status ?? true}
                    onCheckedChange={(v) => update.mutate({ show_online_status: v })}
                  />
                </div>
                <div className="flex items-center justify-between">
                  <Label>Allow direct messages</Label>
                  <Switch
                    checked={privacy?.allow_direct_messages ?? true}
                    onCheckedChange={(v) => update.mutate({ allow_direct_messages: v })}
                  />
                </div>
                <div className="flex items-center justify-between">
                  <Label>Allow search indexing</Label>
                  <Switch
                    checked={privacy?.allow_search_indexing ?? true}
                    onCheckedChange={(v) => update.mutate({ allow_search_indexing: v })}
                  />
                </div>
              </div>
            </CardContent>
          </Card>
        </div>
      )}
    </div>
  );
}