import { redirect } from "next/navigation";
import { auth } from "@/lib/auth";
import { prisma } from "@/lib/prisma";
import { updateTelegramChatId } from "@/app/actions/settings";
import Sidebar from "../_components/Sidebar";
import { Send } from "lucide-react";

export default async function SettingsPage() {
  const session = await auth();

  if (!session?.user?.id) {
    redirect("/login");
  }

  const user = await prisma.user.findUnique({
    where: { id: session.user.id },
    select: {
      name: true,
      email: true,
      telegramChatId: true,
    },
  });

  if (!user) {
    redirect("/login");
  }

  return (
    <div className="min-h-screen bg-zinc-950 text-zinc-100">
      <Sidebar />
      <main className="p-4 md:ml-64 md:p-8">
        <div className="mx-auto max-w-xl">
          <h1 className="text-2xl font-bold text-zinc-100">Settings</h1>
          <p className="mt-1 text-sm text-zinc-400">
            Manage your notification preferences and profile settings.
          </p>

          <div className="mt-8 rounded-xl border border-zinc-800 bg-zinc-900 p-6">
            <h2 className="text-lg font-semibold text-zinc-100">
              Telegram Notifications
            </h2>
            <p className="mt-1 text-sm text-zinc-400">
              Receive instant alerts on Telegram when your patient takes their medication.
            </p>

            <form
              action={async (formData: FormData) => {
                "use server";
                const chatId = formData.get("telegramChatId") as string;
                await updateTelegramChatId(chatId);
              }}
              className="mt-6 space-y-4"
            >
              <div>
                <label
                  htmlFor="telegramChatId"
                  className="block text-sm font-medium text-zinc-300"
                >
                  Telegram Chat ID
                </label>
                <input
                  type="text"
                  id="telegramChatId"
                  name="telegramChatId"
                  defaultValue={user.telegramChatId || ""}
                  placeholder="e.g. 123456789"
                  className="mt-2 block w-full rounded-lg border border-zinc-700 bg-zinc-950 px-4 py-2.5 text-sm text-zinc-100 placeholder-zinc-600 focus:border-indigo-500 focus:outline-none focus:ring-1 focus:ring-indigo-500"
                />
                <p className="mt-2 text-xs text-zinc-500">
                  To get your Chat ID, message{" "}
                  <span className="font-medium text-indigo-400">@userinfobot</span>{" "}
                  on Telegram and paste the ID here to receive alerts.
                </p>
              </div>

              <div className="flex items-center justify-end gap-3 pt-2">
                <button
                  type="submit"
                  className="inline-flex items-center gap-2 rounded-lg bg-indigo-600 px-5 py-2.5 text-sm font-medium text-white transition-colors hover:bg-indigo-500"
                >
                  <Send className="h-4 w-4" />
                  Save Settings
                </button>
              </div>
            </form>
          </div>
        </div>
      </main>
    </div>
  );
}