import Shell from "@/components/Shell";
import { requireSession, asMembershipRow } from "@/lib/session";
import { can } from "@/lib/rbac";
import { getMainWpIntegration } from "@/lib/data/integrations";
import { PageHeader, Card, Badge } from "@/components/ui";
import { saveMainWpIntegrationAction } from "@/lib/actions/integration-actions";

function Row({ label, value }: { label: string; value: string }) {
  return (
    <div className="bg-bg-card px-4 py-3.5 flex justify-between gap-4">
      <span className="text-[13px] text-text-secondary">{label}</span>
      <span className="text-[13px] font-semibold font-mono">{value}</span>
    </div>
  );
}

export default async function SettingsPage() {
  const session = await requireSession();
  const m = asMembershipRow(session);
  const integration = getMainWpIntegration(session.orgId);
  const config = JSON.parse(integration.config || "{}");

  return (
    <Shell session={session} active="/settings">
      <PageHeader title="Account settings" description="Profile and organization" />
      <div className="flex flex-col gap-px bg-border border border-border rounded-xl overflow-hidden mb-6">
        <Row label="Name" value={session.name} />
        <Row label="Email" value={session.email} />
        <Row label="Organization" value={session.orgName} />
        <Row label="Your role" value={session.role} />
      </div>

      {can.manageIntegrations(m) && (
        <>
          <div className="text-[13px] font-bold mb-3">MainWP integration</div>
          <Card className="mb-2">
            <div className="flex items-center justify-between mb-4">
              <div className="text-sm text-text-secondary max-w-md">
                Connects to the MainWP Dashboard plugin so Uptime, Security, and SSL data on your
                sites come from real MainWP data instead of placeholders. This requires a custom
                MainWP extension exposing a REST endpoint (MainWP has no public multi-site API by
                default) — see the implementation spec for details. Syncing isn't implemented yet;
                this just stores the connection details for that phase of work.
              </div>
              <Badge status={integration.status.startsWith("Configured") ? "ACTIVE" : "Not connected"}>
                {integration.status}
              </Badge>
            </div>
            <form action={saveMainWpIntegrationAction} className="flex flex-col gap-3.5">
              <div>
                <label className="block text-xs text-text-secondary mb-1.5">
                  MainWP hub base URL
                </label>
                <input
                  name="baseUrl"
                  defaultValue={config.baseUrl ?? ""}
                  placeholder="https://webstation.app/wp-admin"
                  className="w-full bg-bg-input border border-border-input rounded-lg px-3 py-2.5 text-sm font-mono outline-none"
                />
              </div>
              <div>
                <label className="block text-xs text-text-secondary mb-1.5">
                  Application password / consumer key
                </label>
                <input
                  name="consumerKey"
                  type="password"
                  defaultValue={config.consumerKey ?? ""}
                  className="w-full bg-bg-input border border-border-input rounded-lg px-3 py-2.5 text-sm font-mono outline-none"
                />
              </div>
              <button
                type="submit"
                className="bg-accent text-white font-bold text-sm px-4 py-2 rounded-lg self-start"
              >
                Save
              </button>
            </form>
          </Card>
        </>
      )}
    </Shell>
  );
}