import { saveBrandingAction } from "@/app/actions";
import { AppShell } from "@/components/AppShell";
import { BrandingImageInput } from "@/components/BrandingImageInput";
import { ConfirmSubmitButton } from "@/components/ConfirmSubmitButton";
import { EmptyState } from "@/components/EmptyState";
import { PageHeader } from "@/components/PageHeader";
import { StatusMessage } from "@/components/StatusMessage";
import { prisma } from "@/lib/prisma";
import { getSelectedProject } from "@/lib/projects";

export default async function BrandingSettingsPage({
  searchParams
}: {
  searchParams?: Promise<Record<string, string | string[] | undefined>>;
}) {
  const params = (await searchParams) ?? {};
  const selected = typeof params.projectId === "string" ? params.projectId : undefined;
  const { user, projects, project, permissions, projectRole } = await getSelectedProject(selected, "settings.edit");
  const branding = await prisma.brandingSetting.findFirst({ orderBy: { createdAt: "asc" } });

  if (!project) {
    return (
      <AppShell projects={projects} username={user.name ?? user.username ?? user.email} role={projectRole ?? user.role} permissions={permissions}>
        <EmptyState title="Create a project before editing branding." href="/projects" actionLabel="Create project" />
      </AppShell>
    );
  }

  return (
    <AppShell projects={projects} selectedProjectId={project.id} username={user.name ?? user.username ?? user.email} role={projectRole ?? user.role} permissions={permissions}>
      <PageHeader title="Branding" description="Customize the app name, logo, header, and favicon used across the tracker." />
      <StatusMessage updated={params.updated} deleted={params.deleted} error={params.error} />

      <form action={saveBrandingAction} className="panel grid max-w-4xl gap-5 p-4">
        <input type="hidden" name="projectId" value={project.id} />
        <div className="grid gap-4 md:grid-cols-2">
          <label className="grid gap-2">
            <span className="label">App name</span>
            <input className="field" name="appName" defaultValue={branding?.appName ?? "Partnership Tracker"} required />
          </label>
          <label className="grid gap-2">
            <span className="label">Default header title</span>
            <input className="field" name="headerTitle" defaultValue={branding?.headerTitle ?? ""} placeholder="Optional" />
          </label>
        </div>

        <div className="grid gap-4 md:grid-cols-3">
          <BrandingImageInput name="logo" label="Logo" existingUrl={branding?.logoUrl} removeName="removeLogo" />
          <BrandingImageInput name="smallLogo" label="Small logo / icon" existingUrl={branding?.smallLogoUrl} removeName="removeSmallLogo" />
          <BrandingImageInput name="favicon" label="Favicon" existingUrl={branding?.faviconUrl} removeName="removeFavicon" />
        </div>

        <div className="grid gap-3 rounded-md border border-line bg-slate-50 p-3">
          <label className="flex items-center gap-2 text-sm font-medium text-slate-700">
            <input className="h-4 w-4 rounded border-line" name="showProjectName" type="checkbox" defaultChecked={branding?.showProjectName ?? true} />
            Show project name in header
          </label>
          <label className="flex items-center gap-2 text-sm font-medium text-slate-700">
            <input className="h-4 w-4 rounded border-line" name="showSidebarLogo" type="checkbox" defaultChecked={branding?.showSidebarLogo ?? true} />
            Show logo in sidebar
          </label>
          <label className="flex items-center gap-2 text-sm font-medium text-slate-700">
            <input className="h-4 w-4 rounded border-line" name="showHeaderLogo" type="checkbox" defaultChecked={branding?.showHeaderLogo ?? false} />
            Show logo in top header
          </label>
        </div>

        <ConfirmSubmitButton title="Review changes" message="Save these branding settings and update the app header/sidebar?" confirmLabel="Confirm Save">
          Save branding
        </ConfirmSubmitButton>
      </form>
    </AppShell>
  );
}