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

const digestModes = [
  { value: "none", label: "None" },
  { value: "daily", label: "Daily" },
  { value: "weekly", label: "Weekly" },
];

function minuteToTime(minute: number) {
  const h = Math.floor(minute / 60);
  const m = minute % 60;
  return `${h.toString().padStart(2, "0")}:${m.toString().padStart(2, "0")}`;
}

function timeToMinute(time: string) {
  const [h, m] = time.split(":").map(Number);
  return h * 60 + m;
}

export default function SettingsNotificationsPage() {
  const { data: config, isLoading } = useUserConfig();
  const update = useUpdateNotification();
  const notif = config?.notifications;

  return (
    <div className="px-8 py-10">
      <h1 className="text-xl font-heading font-bold text-foreground">Notifications</h1>
      <p className="mt-1 text-sm text-muted-foreground">Control how and when you receive notifications</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>Channels</CardTitle>
              <CardDescription>Choose which notification channels to enable</CardDescription>
            </CardHeader>
            <CardContent>
              <div className="space-y-4">
                <div className="flex items-center justify-between">
                  <Label>In-app notifications</Label>
                  <Switch
                    checked={notif?.in_app_enabled ?? true}
                    onCheckedChange={(v) => update.mutate({ in_app_enabled: v })}
                  />
                </div>
                <div className="flex items-center justify-between">
                  <Label>Email notifications</Label>
                  <Switch
                    checked={notif?.email_enabled ?? true}
                    onCheckedChange={(v) => update.mutate({ email_enabled: v })}
                  />
                </div>
                <div className="flex items-center justify-between">
                  <Label>Push notifications</Label>
                  <Switch
                    checked={notif?.push_enabled ?? false}
                    onCheckedChange={(v) => update.mutate({ push_enabled: v })}
                  />
                </div>
              </div>
            </CardContent>
          </Card>

          <Card>
            <CardHeader>
              <CardTitle>Content</CardTitle>
              <CardDescription>Select which types of notifications you want to receive</CardDescription>
            </CardHeader>
            <CardContent>
              <div className="space-y-4">
                <div className="flex items-center justify-between">
                  <Label>Security alerts</Label>
                  <Switch
                    checked={notif?.security_enabled ?? true}
                    onCheckedChange={(v) => update.mutate({ security_enabled: v })}
                  />
                </div>
                <div className="flex items-center justify-between">
                  <Label>Product updates</Label>
                  <Switch
                    checked={notif?.product_enabled ?? true}
                    onCheckedChange={(v) => update.mutate({ product_enabled: v })}
                  />
                </div>
                <div className="flex items-center justify-between">
                  <Label>Marketing</Label>
                  <Switch
                    checked={notif?.marketing_enabled ?? false}
                    onCheckedChange={(v) => update.mutate({ marketing_enabled: v })}
                  />
                </div>
              </div>
            </CardContent>
          </Card>

          <Card>
            <CardHeader>
              <CardTitle>Digest</CardTitle>
              <CardDescription>Choose how often to receive notification digests</CardDescription>
            </CardHeader>
            <CardContent>
              <Select
                value={notif?.digest_mode ?? "daily"}
                onValueChange={(v) => update.mutate({ digest_mode: v })}
              >
                <SelectTrigger className="w-48">
                  <SelectValue />
                </SelectTrigger>
                <SelectContent>
                  {digestModes.map((d) => (
                    <SelectItem key={d.value} value={d.value}>{d.label}</SelectItem>
                  ))}
                </SelectContent>
              </Select>
            </CardContent>
          </Card>

          <Card>
            <CardHeader>
              <CardTitle>Do Not Disturb</CardTitle>
              <CardDescription>Pause notifications during specific hours</CardDescription>
            </CardHeader>
            <CardContent>
              <div className="space-y-4">
                <div className="flex items-center justify-between">
                  <Label>Enable DND</Label>
                  <Switch
                    checked={notif?.dnd_enabled ?? false}
                    onCheckedChange={(v) => update.mutate({ dnd_enabled: v })}
                  />
                </div>
                {(notif?.dnd_enabled ?? false) && (
                  <div className="flex items-center gap-4">
                    <div className="flex items-center gap-2">
                      <Label>Start</Label>
                      <Input
                        className="w-20 h-8 text-sm font-mono"
                        type="time"
                        value={minuteToTime(notif?.dnd_start_minute ?? 0)}
                        onChange={(e) => update.mutate({ dnd_start_minute: timeToMinute(e.target.value) })}
                      />
                    </div>
                    <div className="flex items-center gap-2">
                      <Label>End</Label>
                      <Input
                        className="w-20 h-8 text-sm font-mono"
                        type="time"
                        value={minuteToTime(notif?.dnd_end_minute ?? 480)}
                        onChange={(e) => update.mutate({ dnd_end_minute: timeToMinute(e.target.value) })}
                      />
                    </div>
                  </div>
                )}
              </div>
            </CardContent>
          </Card>
        </div>
      )}
    </div>
  );
}