"use client";

import { useEffect, useState } from "react";

import { BellRing, Moon, Smartphone } from "lucide-react";

import { toast } from "sonner";

import { Card, CardBody, CardHeader, CardTitle } from "@/components/ui/card";

import { Button } from "@/components/ui/button";

import { Input, Label } from "@/components/ui/input";

import { Switch } from "@/components/ui/switch";

import { api } from "@/lib/api";

interface QuietHours {

  enabled: boolean;

  start: string;

  end: string;

}

const KEY = "drophawk:quiet-hours";

export default function SettingsPage() {

  const [topic] = useState(process.env.NEXT_PUBLIC_NTFY_TOPIC ?? "drophawk-drops");

  const [testing, setTesting] = useState(false);

  const [quiet, setQuiet] = useState<QuietHours>({ enabled: false, start: "23:00", end: "08:00" });

  useEffect(() => {

    try {

      const raw = localStorage.getItem(KEY);

      if (raw) setQuiet(JSON.parse(raw) as QuietHours);

    } catch {

    }

  }, []);

  const persist = (next: QuietHours) => {

    setQuiet(next);

    try {

      localStorage.setItem(KEY, JSON.stringify(next));

    } catch {

    }

  };

  const sendTest = async () => {

    setTesting(true);

    try {

      const res = await api.testNotification();

      toast.success(res.sent ? `Test push sent to ${res.topic}` : "Test queued");

    } catch (e) {

      toast.error(e instanceof Error ? e.message : "Could not send test push");

    } finally {

      setTesting(false);

    }

  };

  return (

    <div className="mx-auto max-w-2xl space-y-5">

      <div>

        <h2 className="text-lg font-semibold tracking-[var(--tracking-tight)]">Settings</h2>

        <p className="mt-0.5 text-sm text-[var(--color-fg-tertiary)]">

          Push delivery and quiet hours for this device.

        </p>

      </div>

      <Card>

        <CardHeader>

          <CardTitle className="flex items-center gap-2">

            <Smartphone className="h-4 w-4 text-[var(--color-accent-teal)]" aria-hidden />

            Push delivery

          </CardTitle>

        </CardHeader>

        <CardBody className="space-y-4">

          <div className="space-y-1.5">

            <Label htmlFor="ntfy-topic">ntfy topic</Label>

            <Input id="ntfy-topic" value={topic} readOnly aria-readonly className="font-mono" />

            <p className="text-xs text-[var(--color-fg-tertiary)]">

              Subscribe to this topic in the ntfy app on your phone to receive instant pushes.

            </p>

          </div>

          <Button onClick={sendTest} loading={testing} variant="secondary">

            <BellRing className="h-4 w-4" aria-hidden />

            Send test push

          </Button>

        </CardBody>

      </Card>

      <Card>

        <CardHeader>

          <CardTitle className="flex items-center gap-2">

            <Moon className="h-4 w-4 text-[var(--color-accent-violet)]" aria-hidden />

            Quiet hours

          </CardTitle>

          <Switch

            checked={quiet.enabled}

            onCheckedChange={(enabled) => persist({ ...quiet, enabled })}

            aria-label="Toggle quiet hours"

          />

        </CardHeader>

        <CardBody>

          <div className="grid grid-cols-2 gap-3">

            <div className="space-y-1.5">

              <Label htmlFor="q-start">From</Label>

              <Input

                id="q-start"

                type="time"

                value={quiet.start}

                disabled={!quiet.enabled}

                onChange={(e) => persist({ ...quiet, start: e.target.value })}

              />

            </div>

            <div className="space-y-1.5">

              <Label htmlFor="q-end">Until</Label>

              <Input

                id="q-end"

                type="time"

                value={quiet.end}

                disabled={!quiet.enabled}

                onChange={(e) => persist({ ...quiet, end: e.target.value })}

              />

            </div>

          </div>

          <p className="mt-3 text-xs text-[var(--color-fg-tertiary)]">

            During quiet hours, only <span className="text-[var(--color-accent-red)]">critical</span> watchlist

            matches break through. Everything else waits for morning.

          </p>

        </CardBody>

      </Card>

    </div>

  );

}