import { redirect } from "next/navigation";
import { auth } from "@/auth";
import { can } from "@/lib/rbac";
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";

const ROLES = ["Super Admin", "Admin", "Manager", "Staff"];
const MATRIX: { feature: string; access: (boolean | "read" | "author")[] }[] = [
  { feature: "System Settings & App Logs", access: [true, false, false, false] },
  { feature: "Manage Users & Staff Positions", access: [true, true, false, false] },
  { feature: "Manage Companies, Channels & Platforms", access: [true, true, true, false] },
  { feature: "Add/Edit KPI Indicators (Dept & Personal)", access: [true, true, true, "read"] },
  { feature: "Manage / Intervene in All Staff Tasks", access: [true, true, true, false] },
  { feature: "Log Personal Weekly Tasks", access: [true, true, true, true] },
  { feature: "Draft & Submit Scheduled Posts", access: [true, true, true, true] },
  { feature: "Approve / Reject Posts", access: [true, true, true, false] },
  { feature: "Publish Post & Record Posting Date", access: ["author", "author", "author", "author"] },
  { feature: "View Personal & Team Dashboard", access: [true, true, true, "read"] },
  { feature: "Executive Dashboard & Monthly Report", access: [true, true, true, false] },
  { feature: "Enter Marketing Financials (budget/spend/revenue)", access: [true, true, true, false] },
  { feature: "Create & Finalize Staff Appraisals", access: [true, true, true, false] },
  { feature: "View Own Appraisal & Self-Assess", access: [true, true, true, true] },
];

function Cell({ v }: { v: boolean | "read" | "author" }) {
  if (v === "read") return <span className="text-warning">Read</span>;
  if (v === "author") return <span className="text-primary text-xs">Author only</span>;
  return v ? <span className="text-success">✓</span> : <span className="text-muted-foreground">—</span>;
}

export default async function SettingsPage() {
  const session = await auth();
  if (!can(session?.user?.role, "system:settings")) redirect("/dashboard");

  return (
    <div>
      <div className="mb-5">
        <h1 className="text-xl font-bold tracking-tight">Settings</h1>
        <p className="text-sm text-muted-foreground">System configuration & role permissions</p>
      </div>

      <Card>
        <CardHeader>
          <CardTitle>Role-Based Access Control Matrix</CardTitle>
        </CardHeader>
        <CardContent className="p-0">
          <div className="overflow-x-auto">
            <table className="w-full text-sm">
              <thead>
                <tr className="border-y border-border text-left text-xs uppercase text-muted-foreground">
                  <th className="px-4 py-2.5">Feature Module</th>
                  {ROLES.map((r) => (
                    <th key={r} className="px-4 py-2.5 text-center">
                      {r}
                    </th>
                  ))}
                </tr>
              </thead>
              <tbody>
                {MATRIX.map((row) => (
                  <tr key={row.feature} className="border-b border-border last:border-0">
                    <td className="px-4 py-2.5 font-medium">{row.feature}</td>
                    {row.access.map((a, i) => (
                      <td key={i} className="px-4 py-2.5 text-center">
                        <Cell v={a} />
                      </td>
                    ))}
                  </tr>
                ))}
              </tbody>
            </table>
          </div>
        </CardContent>
      </Card>

      <Card className="mt-4">
        <CardHeader>
          <CardTitle>Application</CardTitle>
        </CardHeader>
        <CardContent className="space-y-1 text-sm text-muted-foreground">
          <div>Marketing KPI &amp; Task Tracking System</div>
          <div>Signed in as: <span className="text-foreground">{session?.user?.email}</span></div>
          <div>Stack: Next.js · Prisma · PostgreSQL · Auth.js · TanStack Query</div>
        </CardContent>
      </Card>
    </div>
  );
}
