"use client";

import { FormEvent, useState } from "react";
import { useRouter } from "next/navigation";

type Props = {
  organization: { name: string };
  settings: {
    timezone: string;
    allowManagersCreateUsers: boolean;
    emailNotificationsEnabled: boolean;
    workingHoursStart: string;
    workingHoursEnd: string;
    autoClockOutEnabled: boolean;
    autoClockOutAfterHours: number;
    idleDetectionMinutes: number;
    mandatoryClockIn: boolean;
    screenshotsEnabled: boolean;
    screenshotIntervalMinutes: number;
    pauseScreenshotsWhenIdle: boolean;
    screenshotRetentionDays: number;
  };
};

export function SettingsForm({ organization, settings }: Props) {
  const router = useRouter();
  const [message, setMessage] = useState("");

  async function submit(event: FormEvent<HTMLFormElement>) {
    event.preventDefault();
    const form = new FormData(event.currentTarget);
    const response = await fetch("/api/settings", {
      method: "PATCH",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify({
        name: form.get("name"),
        timezone: form.get("timezone"),
        allowManagersCreateUsers: form.get("allowManagersCreateUsers") === "on",
        emailNotificationsEnabled: form.get("emailNotificationsEnabled") === "on",
        workingHoursStart: form.get("workingHoursStart"),
        workingHoursEnd: form.get("workingHoursEnd"),
        autoClockOutEnabled: form.get("autoClockOutEnabled") === "on",
        autoClockOutAfterHours: form.get("autoClockOutAfterHours"),
        idleDetectionMinutes: form.get("idleDetectionMinutes"),
        mandatoryClockIn: form.get("mandatoryClockIn") === "on",
        screenshotsEnabled: form.get("screenshotsEnabled") === "on",
        screenshotIntervalMinutes: form.get("screenshotIntervalMinutes"),
        pauseScreenshotsWhenIdle: form.get("pauseScreenshotsWhenIdle") === "on",
        screenshotRetentionDays: form.get("screenshotRetentionDays")
      })
    });
    const payload = await response.json().catch(() => ({}));
    setMessage(response.ok ? "Settings saved." : payload.error ?? "Could not save settings.");
    router.refresh();
  }

  return (
    <form className="mt-6 grid gap-5" onSubmit={submit}>
      <section className="admin-card grid gap-4 p-5 md:grid-cols-2">
        <h2 className="text-lg font-semibold md:col-span-2">General settings</h2>
        <label className="admin-label">Organization name<input className="admin-input normal-case tracking-normal" name="name" defaultValue={organization.name} /></label>
        <label className="admin-label">Timezone<input className="admin-input normal-case tracking-normal" name="timezone" defaultValue={settings.timezone} /></label>
      </section>
      <section className="admin-card grid gap-3 p-5 md:grid-cols-2">
        <h2 className="text-lg font-semibold md:col-span-2">User and notification settings</h2>
        <label className="flex items-center gap-2 text-sm"><input name="allowManagersCreateUsers" type="checkbox" defaultChecked={settings.allowManagersCreateUsers} /> Managers can create users</label>
        <label className="flex items-center gap-2 text-sm"><input name="emailNotificationsEnabled" type="checkbox" defaultChecked={settings.emailNotificationsEnabled} /> Email notifications enabled</label>
      </section>
      <section className="admin-card grid gap-4 p-5 md:grid-cols-2">
        <h2 className="text-lg font-semibold md:col-span-2">Tracking policy</h2>
        <label className="admin-label">Work starts<input className="admin-input normal-case tracking-normal" name="workingHoursStart" defaultValue={settings.workingHoursStart} /></label>
        <label className="admin-label">Work ends<input className="admin-input normal-case tracking-normal" name="workingHoursEnd" defaultValue={settings.workingHoursEnd} /></label>
        <label className="admin-label">Auto clock-out after hours<input className="admin-input normal-case tracking-normal" name="autoClockOutAfterHours" type="number" defaultValue={settings.autoClockOutAfterHours} /></label>
        <label className="admin-label">Idle detection minutes<input className="admin-input normal-case tracking-normal" name="idleDetectionMinutes" type="number" defaultValue={settings.idleDetectionMinutes} /></label>
        <label className="admin-label">Screenshot interval minutes<input className="admin-input normal-case tracking-normal" name="screenshotIntervalMinutes" type="number" defaultValue={settings.screenshotIntervalMinutes} /></label>
        <label className="admin-label">Screenshot retention days<input className="admin-input normal-case tracking-normal" name="screenshotRetentionDays" type="number" defaultValue={settings.screenshotRetentionDays} /></label>
        <label className="flex items-center gap-2 text-sm"><input name="autoClockOutEnabled" type="checkbox" defaultChecked={settings.autoClockOutEnabled} /> Auto clock-out enabled</label>
        <label className="flex items-center gap-2 text-sm"><input name="mandatoryClockIn" type="checkbox" defaultChecked={settings.mandatoryClockIn} /> Mandatory clock-in</label>
        <label className="flex items-center gap-2 text-sm"><input name="screenshotsEnabled" type="checkbox" defaultChecked={settings.screenshotsEnabled} /> Screenshots enabled</label>
        <label className="flex items-center gap-2 text-sm"><input name="pauseScreenshotsWhenIdle" type="checkbox" defaultChecked={settings.pauseScreenshotsWhenIdle} /> Pause screenshots when idle</label>
      </section>
      <div className="flex items-center gap-3"><button className="brand-button" type="submit">Save settings</button>{message ? <span className="text-sm text-brand-secondary">{message}</span> : null}</div>
    </form>
  );
}