"use client";

import type { ReactNode, SVGProps } from "react";

import { PropertyPilotLogo } from "@/components/brand-logo";
import { NotificationCentre } from "@/components/notification-centre";
import { QuickStartPanel } from "@/components/quick-start-panel";
import { SidebarNav } from "@/components/sidebar-nav";
import { SettingsMenu } from "@/components/settings-menu";
import {
  Badge,
  BuildingsIcon,
  MessageIcon,
  ShieldIcon,
  WalletIcon,
  WrenchIcon,
} from "@/components/dashboard-ui";
import {
  HideableTile,
  ViewPreferencesProvider,
} from "@/components/view-customiser";
import {
  formatCompactCurrency,
  formatPercent,
  portfolioSnapshot,
} from "@/lib/property-data-uk";
import { viewPreferenceItems } from "@/lib/view-preferences";

export type DashboardUser = {
  name: string;
  role: string;
  email: string;
};

type DashboardShellProps = {
  children: ReactNode;
  user: DashboardUser;
};

function LoginSignIcon(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="M10 6V5a2 2 0 0 1 2-2h7v18h-7a2 2 0 0 1-2-2v-1" />
      <path d="M3 12h11" />
      <path d="m10 8 4 4-4 4" />
    </svg>
  );
}

export function DashboardShell({ children, user }: DashboardShellProps) {
  return (
    <ViewPreferencesProvider>
      <div className="dashboard-compact-type min-h-screen pb-24 md:pb-0">
        <div className="mx-auto max-w-[1600px] px-4 py-5 sm:px-6 lg:px-8">
          <header className="relative flex flex-col items-center gap-4 py-4 text-center">
            <div className="order-2 flex flex-wrap items-center justify-center gap-2 sm:absolute sm:right-0 sm:top-4 sm:order-none sm:justify-end">
              <NotificationCentre />
              <SettingsMenu items={viewPreferenceItems} user={user} />
              <form action="/api/auth/signout" method="post">
                <button
                  aria-label="Sign out"
                  className="inline-flex h-11 w-11 items-center justify-center rounded-full border border-border bg-surface-strong text-foreground transition hover:border-danger/35 hover:text-danger"
                  title="Sign out"
                  type="submit"
                >
                  <LoginSignIcon />
                </button>
              </form>
            </div>
            <h1 className="sr-only">PropertyPilot</h1>
            <PropertyPilotLogo compact markClassName="h-16 w-16 text-primary" />
            <p className="font-mono text-xs uppercase tracking-[0.36em] text-muted">
              property operations system
            </p>
          </header>

          <div className="sticky top-0 z-40 -mx-4 border-y border-border bg-background/88 px-4 py-3 backdrop-blur sm:-mx-6 sm:px-6 lg:-mx-8 lg:px-8">
            <div className="flex items-center justify-center">
              <SidebarNav />
            </div>
          </div>

          <section className="mt-6">
            <div className="space-y-6">
              {children}

              <HideableTile id="shell-quick-start" label="start here shortcuts">
                <QuickStartPanel />
              </HideableTile>

              <div className="grid gap-4 md:grid-cols-2 2xl:grid-cols-4">
                <HideableTile id="shell-collection-rate" label="collection rate tile">
                  <div className="card-shell rounded-[26px] p-5">
                    <div className="flex items-start justify-between">
                      <div>
                        <p className="text-sm font-medium text-muted">Collection rate</p>
                        <p className="mt-2 text-2xl font-semibold tracking-tight text-foreground">
                          {formatPercent(portfolioSnapshot.collectionRate)}
                        </p>
                      </div>
                      <span className="rounded-2xl border border-primary/20 bg-primary/10 p-3 text-primary">
                        <WalletIcon />
                      </span>
                    </div>
                    <p className="mt-3 text-sm text-muted">
                      {formatCompactCurrency(portfolioSnapshot.monthlyCollected)} collected
                      this month.
                    </p>
                  </div>
                </HideableTile>

                <HideableTile id="shell-occupied-units" label="occupied units tile">
                  <div className="card-shell rounded-[26px] p-5">
                    <div className="flex items-start justify-between">
                      <div>
                        <p className="text-sm font-medium text-muted">Occupied units</p>
                        <p className="mt-2 text-2xl font-semibold tracking-tight text-foreground">
                          {portfolioSnapshot.occupiedUnits}/{portfolioSnapshot.totalUnits}
                        </p>
                      </div>
                      <span className="rounded-2xl border border-accent/20 bg-accent/10 p-3 text-accent">
                        <BuildingsIcon />
                      </span>
                    </div>
                    <p className="mt-3 text-sm text-muted">
                      Small-portfolio occupancy is{" "}
                      {formatPercent(portfolioSnapshot.occupancyRate)}.
                    </p>
                  </div>
                </HideableTile>

                <HideableTile id="shell-compliance-watch" label="compliance watch tile">
                  <div className="card-shell rounded-[26px] p-5">
                    <div className="flex items-start justify-between">
                      <div>
                        <p className="text-sm font-medium text-muted">Compliance watch</p>
                        <p className="mt-2 text-2xl font-semibold tracking-tight text-foreground">
                          {portfolioSnapshot.dueSoonCompliance} due
                        </p>
                      </div>
                      <span className="rounded-2xl border border-danger/20 bg-danger/10 p-3 text-danger">
                        <ShieldIcon />
                      </span>
                    </div>
                    <div className="mt-3 flex flex-wrap gap-2">
                      <Badge tone="red">{portfolioSnapshot.blockedCompliance} blocked</Badge>
                      <Badge tone="teal">Live certificate vault</Badge>
                    </div>
                  </div>
                </HideableTile>

                <HideableTile id="shell-tenant-operations" label="tenant operations tile">
                  <div className="card-shell rounded-[26px] p-5">
                    <div className="flex items-start justify-between">
                      <div>
                        <p className="text-sm font-medium text-muted">Tenant operations</p>
                        <p className="mt-2 text-2xl font-semibold tracking-tight text-foreground">
                          {portfolioSnapshot.openWorkOrders} / {portfolioSnapshot.unreadMessages}
                        </p>
                      </div>
                      <span className="rounded-2xl border border-primary/20 bg-primary-soft p-3 text-primary">
                        <WrenchIcon />
                      </span>
                    </div>
                    <div className="mt-3 flex flex-wrap gap-2">
                      <Badge tone="amber">{portfolioSnapshot.unreadMessages} unread messages</Badge>
                      <Badge tone="success">
                        <span className="inline-flex items-center gap-1">
                          <MessageIcon className="h-3.5 w-3.5" /> Tenant messages
                        </span>
                      </Badge>
                    </div>
                  </div>
                </HideableTile>
              </div>

            </div>
          </section>
        </div>
      </div>
    </ViewPreferencesProvider>
  );
}