import { useUserConfig, useUpdateProfile } from "./hooks";
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
import { Card, CardContent, CardHeader, CardTitle, CardDescription } from "@/components/ui/card";
import AvatarUploader from "@/components/ui/avatar-uploader";
import { useAuth } from "@/context/auth-context";
import { useQueryClient } from "@tanstack/react-query";

const timezones = [
  "UTC", "America/New_York", "America/Chicago", "America/Los_Angeles",
  "America/Denver", "Europe/London", "Europe/Berlin", "Europe/Paris",
  "Asia/Shanghai", "Asia/Tokyo", "Asia/Kolkata", "Asia/Singapore",
  "Australia/Sydney", "Pacific/Auckland",
];

const languages = [
  { value: "en", label: "English" },
  { value: "zh", label: "Chinese" },
  { value: "ja", label: "Japanese" },
  { value: "ko", label: "Korean" },
  { value: "de", label: "German" },
  { value: "fr", label: "French" },
  { value: "es", label: "Spanish" },
];

export default function SettingsProfilePage() {
  const { data: config, isLoading } = useUserConfig();
  const updateProfile = useUpdateProfile();
  const profile = config?.profile;
  const { user } = useAuth();
  const queryClient = useQueryClient();

  return (
    <div className="px-8 py-10">
      <h1 className="text-xl font-heading font-bold text-foreground">Profile</h1>
      <p className="mt-1 text-sm text-muted-foreground">Manage your language, timezone, and display preferences</p>

      {isLoading ? (
        <div className="mt-8 space-y-4">
          {Array.from({ length: 3 }).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>Avatar</CardTitle>
              <CardDescription>Upload a profile photo</CardDescription>
            </CardHeader>
            <CardContent>
              <AvatarUploader
                currentUrl={user?.avatar_url}
                label="Profile photo"
                onUploaded={() => {
                  queryClient.invalidateQueries({ queryKey: ["auth", "me"] });
                }}
                uploadEndpoint="/api/v1/user/avatar"
              />
            </CardContent>
          </Card>
          <Card>
            <CardHeader>
              <CardTitle>Language</CardTitle>
              <CardDescription>Choose your preferred interface language</CardDescription>
            </CardHeader>
            <CardContent>
              <Select
                value={profile?.language ?? "en"}
                onValueChange={(v) => updateProfile.mutate({ language: v })}
              >
                <SelectTrigger className="w-48">
                  <SelectValue />
                </SelectTrigger>
                <SelectContent>
                  {languages.map((lang) => (
                    <SelectItem key={lang.value} value={lang.value}>{lang.label}</SelectItem>
                  ))}
                </SelectContent>
              </Select>
            </CardContent>
          </Card>

          <Card>
            <CardHeader>
              <CardTitle>Timezone</CardTitle>
              <CardDescription>Select your local timezone for accurate date/time display</CardDescription>
            </CardHeader>
            <CardContent>
              <Select
                value={profile?.timezone ?? "UTC"}
                onValueChange={(v) => updateProfile.mutate({ timezone: v })}
              >
                <SelectTrigger className="w-48">
                  <SelectValue />
                </SelectTrigger>
                <SelectContent>
                  {timezones.map((tz) => (
                    <SelectItem key={tz} value={tz}>{tz}</SelectItem>
                  ))}
                </SelectContent>
              </Select>
            </CardContent>
          </Card>
        </div>
      )}
    </div>
  );
}