Permissions

import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
import { Button } from "@/components/ui/button";
import { Card, CardContent } from "@/components/ui/card";
import { Badge } from "@/components/ui/badge";
import { Checkbox } from "@/components/ui/checkbox";
import { Label } from "@/components/ui/label";
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from "@/components/ui/select";
import { Shield, Users, Building2, Database, Settings } from "lucide-react";

const permissions = [
  {
    category: "User Management",
    icon: Users,
    permissions: [
      { id: "users.view", label: "View users" },
      { id: "users.create", label: "Create users" },
      { id: "users.edit", label: "Edit users" },
      { id: "users.delete", label: "Delete users" },
    ],
  },
  {
    category: "Organization",
    icon: Building2,
    permissions: [
      { id: "org.settings", label: "Manage organization settings" },
      { id: "org.billing", label: "Access billing" },
      { id: "org.teams", label: "Manage teams" },
    ],
  },
  {
    category: "Data Access",
    icon: Database,
    permissions: [
      { id: "data.read", label: "Read data" },
      { id: "data.write", label: "Write data" },
      { id: "data.delete", label: "Delete data" },
      { id: "data.share", label: "Share data" },
    ],
  },
  {
    category: "System Settings",
    icon: Settings,
    permissions: [
      { id: "settings.view", label: "View settings" },
      { id: "settings.edit", label: "Edit settings" },
      { id: "settings.security", label: "Manage security" },
    ],
  },
];

export default function UserPermissions() {
  return (
    <div className="container mx-auto px-4 py-6 md:px-6 2xl:max-w-[1400px]">
      <div className="mx-auto max-w-4xl">
        {/* Header */}
        <div className="mb-6 flex flex-col items-start justify-between gap-4 sm:flex-row">
          <div className="flex items-center gap-4">
            <Avatar className="size-12">
              <AvatarImage src="https://github.com/shadcn.png" alt="User" />
              <AvatarFallback>JD</AvatarFallback>
            </Avatar>
            <div>
              <div className="flex items-center gap-2">
                <h1 className="text-2xl font-semibold">John Doe</h1>
                <Badge variant="secondary">Admin</Badge>
              </div>
              <p className="text-muted-foreground text-sm">john@example.com</p>
            </div>
          </div>
          <Button>
            <Shield className="mr-2 size-4" />
            Update Permissions
          </Button>
        </div>

        {/* Role Selector */}
        <Card className="mb-6 p-0">
          <CardContent className="p-6">
            <div className="flex flex-col items-start justify-between gap-4 sm:flex-row sm:items-center">
              <div className="space-y-1">
                <h2 className="text-lg font-semibold">Role Assignment</h2>
                <p className="text-muted-foreground text-sm">
                  Select a predefined role or customize permissions below
                </p>
              </div>
              <div className="w-[200px]">
                <Select defaultValue="admin">
                  <SelectTrigger>
                    <SelectValue placeholder="Select role" />
                  </SelectTrigger>
                  <SelectContent>
                    <SelectItem value="admin">Administrator</SelectItem>
                    <SelectItem value="manager">Manager</SelectItem>
                    <SelectItem value="editor">Editor</SelectItem>
                    <SelectItem value="viewer">Viewer</SelectItem>
                    <SelectItem value="custom">Custom</SelectItem>
                  </SelectContent>
                </Select>
              </div>
            </div>
          </CardContent>
        </Card>

        {/* Permissions Grid */}
        <div className="space-y-6">
          {permissions.map((section) => {
            const Icon = section.icon;
            return (
              <Card key={section.category} className="p-0">
                <CardContent className="p-6">
                  <div className="mb-4 flex items-center gap-2">
                    <Icon className="text-muted-foreground size-5" />
                    <h2 className="text-lg font-semibold">
                      {section.category}
                    </h2>
                  </div>
                  <div className="grid gap-4 sm:grid-cols-2">
                    {section.permissions.map((permission) => (
                      <div
                        key={permission.id}
                        className="flex items-center space-x-2"
                      >
                        <Checkbox id={permission.id} />
                        <Label
                          htmlFor={permission.id}
                          className="text-sm font-normal"
                        >
                          {permission.label}
                        </Label>
                      </div>
                    ))}
                  </div>
                </CardContent>
              </Card>
            );
          })}
        </div>

        {/* Access History */}
        <Card className="mt-6 p-0">
          <CardContent className="p-6">
            <h2 className="mb-4 text-lg font-semibold">
              Recent Access Changes
            </h2>
            <div className="space-y-4">
              {[
                {
                  action: "Role changed to Administrator",
                  by: "Sarah Chen",
                  date: "2 hours ago",
                },
                {
                  action: "Added Data Management permissions",
                  by: "Mike Wilson",
                  date: "1 day ago",
                },
                {
                  action: "Removed Billing access",
                  by: "System Audit",
                  date: "3 days ago",
                },
              ].map((log, i) => (
                <div
                  key={i}
                  className="flex flex-col items-start justify-between border-b py-2 last:border-0 sm:flex-row sm:items-center"
                >
                  <div>
                    <p className="text-sm font-medium">{log.action}</p>
                    <p className="text-muted-foreground text-sm">By {log.by}</p>
                  </div>
                  <span className="text-muted-foreground text-sm">
                    {log.date}
                  </span>
                </div>
              ))}
            </div>
          </CardContent>
        </Card>
      </div>
    </div>
  );
}