"use client";

import { type FormEvent, type SVGProps, useState } from "react";

import { CalendarReminderSettings } from "@/components/calendar-reminder-settings";
import { ThemeToggle } from "@/components/theme-toggle";
import { ViewSettingsSection } from "@/components/view-customiser";
import type { ViewPreferenceItem } from "@/lib/view-preferences";

type SettingsMenuProps = {
  items: ViewPreferenceItem[];
  user: {
    name: string;
    role: string;
    email: string;
  };
};

function GearIcon(props: SVGProps<SVGSVGElement>) {
  return (
    <svg
      aria-hidden="true"
      fill="none"
      height="20"
      stroke="currentColor"
      strokeLinecap="round"
      strokeLinejoin="round"
      strokeWidth="1.8"
      viewBox="0 0 24 24"
      width="20"
      {...props}
    >
      <path d="M12 15.2a3.2 3.2 0 1 0 0-6.4 3.2 3.2 0 0 0 0 6.4Z" />
      <path d="M19.4 15a1.7 1.7 0 0 0 .34 1.87l.05.05a2 2 0 0 1-2.83 2.83l-.05-.05a1.7 1.7 0 0 0-1.87-.34 1.7 1.7 0 0 0-1.04 1.56V21a2 2 0 0 1-4 0v-.08a1.7 1.7 0 0 0-1.04-1.56 1.7 1.7 0 0 0-1.87.34l-.05.05a2 2 0 0 1-2.83-2.83l.05-.05A1.7 1.7 0 0 0 4.6 15a1.7 1.7 0 0 0-1.56-1.04H3a2 2 0 0 1 0-4h.08A1.7 1.7 0 0 0 4.64 8.9a1.7 1.7 0 0 0-.34-1.87l-.05-.05a2 2 0 0 1 2.83-2.83l.05.05a1.7 1.7 0 0 0 1.87.34H9a1.7 1.7 0 0 0 1-1.56V3a2 2 0 0 1 4 0v.08a1.7 1.7 0 0 0 1.04 1.56 1.7 1.7 0 0 0 1.87-.34l.05-.05a2 2 0 0 1 2.83 2.83l-.05.05a1.7 1.7 0 0 0-.34 1.87v.04A1.7 1.7 0 0 0 20.96 10H21a2 2 0 0 1 0 4h-.08A1.7 1.7 0 0 0 19.4 15Z" />
    </svg>
  );
}

export function SettingsMenu({ items, user }: SettingsMenuProps) {
  const [open, setOpen] = useState(false);
  const [passwordMessage, setPasswordMessage] = useState("");

  function handlePasswordSubmit(event: FormEvent<HTMLFormElement>) {
    event.preventDefault();
    setPasswordMessage(
      "Password changes are ready for a secure backend connection. This demo keeps the account unchanged.",
    );
  }

  return (
    <div className="relative z-[90]">
      <button
        aria-expanded={open}
        aria-label="Settings"
        className="inline-flex h-11 w-11 items-center justify-center rounded-full border border-border bg-surface-strong text-foreground transition hover:border-primary/35 hover:text-primary"
        onClick={() => setOpen((current) => !current)}
        title="Settings"
        type="button"
      >
        <GearIcon />
      </button>

      {open ? (
        <div className="absolute right-1/2 top-[calc(100%+0.75rem)] z-[110] w-[min(94vw,560px)] translate-x-1/2 overflow-hidden rounded-[28px] border border-border bg-surface-strong text-left shadow-[0_28px_90px_rgba(37,44,38,0.18)] sm:right-0 sm:translate-x-0">
          <div className="flex items-start justify-between gap-4 bg-surface-deep px-5 py-4 text-white">
            <div>
              <p className="font-mono text-[11px] uppercase tracking-[0.28em] text-white/60">
                Settings
              </p>
              <h2 className="mt-2 text-xl font-semibold tracking-tight">
                Workspace controls
              </h2>
              <p className="mt-1 text-sm text-white/70">
                Account, access, and dashboard preferences.
              </p>
            </div>
            <button
              className="rounded-full border border-white/20 px-3 py-1 text-xs font-semibold text-white/80 transition hover:border-white/40 hover:text-white"
              onClick={() => setOpen(false)}
              type="button"
            >
              Close
            </button>
          </div>

          <div className="max-h-[72vh] space-y-4 overflow-y-auto p-5">
            <section className="rounded-[22px] border border-border bg-surface p-4">
              <div className="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
                <div>
                  <p className="text-sm font-semibold text-foreground">Appearance</p>
                  <p className="mt-1 text-xs leading-5 text-muted">
                    Switch between light and dark mode.
                  </p>
                </div>
                <ThemeToggle />
              </div>
            </section>

            <section className="rounded-[22px] border border-border bg-surface p-4">
              <p className="text-sm font-semibold text-foreground">Login info</p>
              <dl className="mt-4 grid gap-3 text-sm sm:grid-cols-2">
                <div>
                  <dt className="text-xs uppercase tracking-[0.18em] text-muted">
                    Name
                  </dt>
                  <dd className="mt-1 font-semibold text-foreground">{user.name}</dd>
                </div>
                <div>
                  <dt className="text-xs uppercase tracking-[0.18em] text-muted">
                    Role
                  </dt>
                  <dd className="mt-1 font-semibold text-foreground">{user.role}</dd>
                </div>
                <div className="sm:col-span-2">
                  <dt className="text-xs uppercase tracking-[0.18em] text-muted">
                    Email
                  </dt>
                  <dd className="mt-1 break-all font-semibold text-foreground">
                    {user.email}
                  </dd>
                </div>
              </dl>
            </section>

            <section className="rounded-[22px] border border-border bg-surface p-4">
              <div className="flex flex-col gap-1">
                <p className="text-sm font-semibold text-foreground">Change password</p>
                <p className="text-xs leading-5 text-muted">
                  Placeholder controls for the demo account. A production version would
                  connect these fields to a secure password service.
                </p>
              </div>
              <form className="mt-4 grid gap-3" onSubmit={handlePasswordSubmit}>
                <input
                  autoComplete="current-password"
                  className="rounded-[16px] border border-border bg-surface-strong px-3 py-2.5 text-sm text-foreground outline-none transition focus:border-primary"
                  placeholder="Current password"
                  type="password"
                />
                <input
                  autoComplete="new-password"
                  className="rounded-[16px] border border-border bg-surface-strong px-3 py-2.5 text-sm text-foreground outline-none transition focus:border-primary"
                  placeholder="New password"
                  type="password"
                />
                <input
                  autoComplete="new-password"
                  className="rounded-[16px] border border-border bg-surface-strong px-3 py-2.5 text-sm text-foreground outline-none transition focus:border-primary"
                  placeholder="Confirm new password"
                  type="password"
                />
                <button
                  className="rounded-full border border-primary bg-primary px-4 py-2.5 text-sm font-semibold text-white transition hover:bg-primary/90"
                  type="submit"
                >
                  Update password
                </button>
              </form>
              {passwordMessage ? (
                <p className="mt-3 rounded-[16px] border border-accent/20 bg-accent-soft px-3 py-2 text-xs leading-5 text-foreground">
                  {passwordMessage}
                </p>
              ) : null}
            </section>

            <section className="rounded-[22px] border border-border bg-surface p-4">
              <CalendarReminderSettings />
            </section>

            <section className="rounded-[22px] border border-border bg-surface p-4">
              <ViewSettingsSection items={items} />
            </section>
          </div>
        </div>
      ) : null}
    </div>
  );
}