"use client";

import { useState } from "react";
import useSWR from "swr";
import { useAuth } from "@/contexts/auth-context";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";
import { Badge } from "@/components/ui/badge";
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogFooter } from "@/components/ui/dialog";
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
import { Checkbox } from "@/components/ui/checkbox";
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table";
import { Plus, Pencil, Trash2, KeyRound, Shield, Users } from "lucide-react";
import { toast } from "sonner";

const fetcher = (url: string) => fetch(url).then((r) => r.json());

const SECTIONS = [
  { id: "dashboard", label: "Dashboard" },
  { id: "components", label: "Components" },
  { id: "products", label: "Products" },
  { id: "production", label: "Production" },
  { id: "supplier-pos", label: "Supplier POs" },
  { id: "customer-orders", label: "Customer Orders" },
  { id: "stock-history", label: "Stock History" },
  { id: "stock-take", label: "Stock Take" },
  { id: "logistics", label: "Logistics" },
  { id: "suppliers", label: "Suppliers" },
  { id: "customers", label: "Customers" },
];

interface UserData {
  id: number;
  email: string;
  name: string;
  role: "admin" | "user";
  is_active: boolean;
  permissions: {
    sections: string[];
    can_view_financial: boolean;
    can_edit: boolean;
    can_create: boolean;
    can_delete: boolean;
    can_download: boolean;
  };
  created_at: string;
}

const defaultPermissions = {
  sections: [] as string[],
  can_view_financial: false,
  can_edit: false,
  can_create: false,
  can_delete: false,
  can_download: false,
};

export default function SettingsPage() {
  const { user: currentUser } = useAuth();
  const { data: users = [], mutate } = useSWR<UserData[]>("/api/users", fetcher);
  
  const [dialogOpen, setDialogOpen] = useState(false);
  const [editingUser, setEditingUser] = useState<UserData | null>(null);
  const [passwordDialogOpen, setPasswordDialogOpen] = useState(false);
  const [passwordUserId, setPasswordUserId] = useState<number | null>(null);
  const [newPassword, setNewPassword] = useState("");
  const [saving, setSaving] = useState(false);

  const [form, setForm] = useState({
    email: "",
    name: "",
    password: "",
    role: "user" as "admin" | "user",
    permissions: { ...defaultPermissions },
  });

  // Check if current user is admin
  if (currentUser?.role !== "admin") {
    return (
      <div className="p-8">
        <Card>
          <CardContent className="py-12 text-center">
            <Shield className="h-12 w-12 mx-auto text-muted-foreground mb-4" />
            <h2 className="text-xl font-semibold mb-2">Access Denied</h2>
            <p className="text-muted-foreground">
              You don&apos;t have permission to access user settings.
            </p>
          </CardContent>
        </Card>
      </div>
    );
  }

  function openCreateDialog() {
    setEditingUser(null);
    setForm({
      email: "",
      name: "",
      password: "",
      role: "user",
      permissions: { ...defaultPermissions },
    });
    setDialogOpen(true);
  }

  function openEditDialog(user: UserData) {
    setEditingUser(user);
    setForm({
      email: user.email,
      name: user.name,
      password: "",
      role: user.role,
      permissions: {
        ...defaultPermissions,
        ...(user.permissions || {}),
        sections: user.permissions?.sections || [],
      },
    });
    setDialogOpen(true);
  }

  function toggleSection(sectionId: string) {
    setForm((prev) => {
      const sections = prev.permissions.sections.includes(sectionId)
        ? prev.permissions.sections.filter((s) => s !== sectionId)
        : [...prev.permissions.sections, sectionId];
      return {
        ...prev,
        permissions: { ...prev.permissions, sections },
      };
    });
  }

  function togglePermission(key: keyof typeof defaultPermissions) {
    if (key === "sections") return;
    setForm((prev) => ({
      ...prev,
      permissions: {
        ...prev.permissions,
        [key]: !prev.permissions[key],
      },
    }));
  }

  async function handleSave() {
    if (!form.email || !form.name) {
      toast.error("Email and name are required");
      return;
    }
    if (!editingUser && !form.password) {
      toast.error("Password is required for new users");
      return;
    }

    setSaving(true);
    try {
      const url = editingUser ? `/api/users/${editingUser.id}` : "/api/users";
      const method = editingUser ? "PUT" : "POST";

      const payload: Record<string, unknown> = {
        email: form.email,
        name: form.name,
        role: form.role,
        permissions: form.permissions,
      };
      if (form.password) {
        payload.password = form.password;
      }

      const res = await fetch(url, {
        method,
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify(payload),
      });

      if (!res.ok) {
        const data = await res.json();
        throw new Error(data.error || "Failed to save");
      }

      toast.success(editingUser ? "User updated" : "User created");
      setDialogOpen(false);
      mutate();
    } catch (err) {
      toast.error(err instanceof Error ? err.message : "Failed to save");
    } finally {
      setSaving(false);
    }
  }

  async function handleDelete(userId: number) {
    if (userId === currentUser?.id) {
      toast.error("You cannot delete your own account");
      return;
    }

    if (!confirm("Are you sure you want to delete this user?")) return;

    try {
      const res = await fetch(`/api/users/${userId}`, { method: "DELETE" });
      if (!res.ok) {
        const data = await res.json();
        throw new Error(data.error || "Failed to delete");
      }
      toast.success("User deleted");
      mutate();
    } catch (err) {
      toast.error(err instanceof Error ? err.message : "Failed to delete");
    }
  }

  function openPasswordDialog(userId: number) {
    setPasswordUserId(userId);
    setNewPassword("");
    setPasswordDialogOpen(true);
  }

  async function handleResetPassword() {
    if (!newPassword || newPassword.length < 6) {
      toast.error("Password must be at least 6 characters");
      return;
    }

    setSaving(true);
    try {
      const res = await fetch(`/api/users/${passwordUserId}`, {
        method: "PUT",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ password: newPassword }),
      });

      if (!res.ok) {
        const data = await res.json();
        throw new Error(data.error || "Failed to reset password");
      }

      toast.success("Password updated");
      setPasswordDialogOpen(false);
    } catch (err) {
      toast.error(err instanceof Error ? err.message : "Failed to reset password");
    } finally {
      setSaving(false);
    }
  }

  return (
    <div className="p-8 space-y-6">
      {/* Header */}
      <div className="flex items-center justify-between">
        <div>
          <h1 className="text-2xl font-bold flex items-center gap-2">
            <Users className="h-6 w-6" />
            User Management
          </h1>
          <p className="text-muted-foreground mt-1">
            Manage users, roles, and permissions
          </p>
        </div>
        <Button onClick={openCreateDialog} className="gap-2">
          <Plus className="h-4 w-4" />
          Add User
        </Button>
      </div>

      {/* Users Table */}
      <Card>
        <CardHeader>
          <CardTitle>Users</CardTitle>
          <CardDescription>
            {users.length} user{users.length !== 1 ? "s" : ""} registered
          </CardDescription>
        </CardHeader>
        <CardContent>
          <Table>
            <TableHeader>
              <TableRow>
                <TableHead>Name</TableHead>
                <TableHead>Email</TableHead>
                <TableHead>Role</TableHead>
                <TableHead>Sections</TableHead>
                <TableHead>Permissions</TableHead>
                <TableHead className="text-right">Actions</TableHead>
              </TableRow>
            </TableHeader>
            <TableBody>
              {users.map((user) => (
                <TableRow key={user.id}>
                  <TableCell className="font-medium">{user.name}</TableCell>
                  <TableCell className="text-muted-foreground">{user.email}</TableCell>
                  <TableCell>
                    <Badge variant={user.role === "admin" ? "default" : "secondary"}>
                      {user.role}
                    </Badge>
                  </TableCell>
                  <TableCell>
                    {user.role === "admin" ? (
                      <span className="text-xs text-muted-foreground">All</span>
                    ) : (
                      <span className="text-xs text-muted-foreground">
                        {user.permissions?.sections?.length || 0} section{(user.permissions?.sections?.length || 0) !== 1 ? "s" : ""}
                      </span>
                    )}
                  </TableCell>
                  <TableCell>
                    <div className="flex flex-wrap gap-1">
                      {user.role === "admin" ? (
                        <Badge variant="outline" className="text-xs">Full Access</Badge>
                      ) : (
                        <>
                          {user.permissions?.can_view_financial && <Badge variant="outline" className="text-xs">Financial</Badge>}
                          {user.permissions?.can_edit && <Badge variant="outline" className="text-xs">Edit</Badge>}
                          {user.permissions?.can_create && <Badge variant="outline" className="text-xs">Create</Badge>}
                          {user.permissions?.can_delete && <Badge variant="outline" className="text-xs">Delete</Badge>}
                          {user.permissions?.can_download && <Badge variant="outline" className="text-xs">Download</Badge>}
                        </>
                      )}
                    </div>
                  </TableCell>
                  <TableCell className="text-right">
                    <div className="flex items-center justify-end gap-1">
                      <Button
                        variant="ghost"
                        size="icon"
                        onClick={() => openPasswordDialog(user.id)}
                        title="Reset Password"
                      >
                        <KeyRound className="h-4 w-4" />
                      </Button>
                      <Button
                        variant="ghost"
                        size="icon"
                        onClick={() => openEditDialog(user)}
                        title="Edit User"
                      >
                        <Pencil className="h-4 w-4" />
                      </Button>
                      {user.id !== currentUser?.id && (
                        <Button
                          variant="ghost"
                          size="icon"
                          onClick={() => handleDelete(user.id)}
                          title="Delete User"
                          className="text-destructive hover:text-destructive"
                        >
                          <Trash2 className="h-4 w-4" />
                        </Button>
                      )}
                    </div>
                  </TableCell>
                </TableRow>
              ))}
            </TableBody>
          </Table>
        </CardContent>
      </Card>

      {/* User Dialog */}
      <Dialog open={dialogOpen} onOpenChange={setDialogOpen}>
        <DialogContent className="sm:max-w-[600px] max-h-[85vh] overflow-y-auto">
          <DialogHeader>
            <DialogTitle>
              {editingUser ? "Edit User" : "Create User"}
            </DialogTitle>
          </DialogHeader>

          <div className="space-y-6 py-4">
            {/* Basic Info */}
            <div className="grid grid-cols-2 gap-4">
              <div className="space-y-2">
                <Label htmlFor="name">Name *</Label>
                <Input
                  id="name"
                  value={form.name}
                  onChange={(e) => setForm({ ...form, name: e.target.value })}
                  placeholder="Full name"
                />
              </div>
              <div className="space-y-2">
                <Label htmlFor="email">Email *</Label>
                <Input
                  id="email"
                  type="email"
                  value={form.email}
                  onChange={(e) => setForm({ ...form, email: e.target.value })}
                  placeholder="user@company.com"
                />
              </div>
            </div>

            <div className="grid grid-cols-2 gap-4">
              <div className="space-y-2">
                <Label htmlFor="password">
                  {editingUser ? "New Password (leave blank to keep)" : "Password *"}
                </Label>
                <Input
                  id="password"
                  type="password"
                  value={form.password}
                  onChange={(e) => setForm({ ...form, password: e.target.value })}
                  placeholder={editingUser ? "Leave blank to keep current" : "Min 6 characters"}
                />
              </div>
              <div className="space-y-2">
                <Label htmlFor="role">Role</Label>
                <Select
                  value={form.role}
                  onValueChange={(val) => setForm({ ...form, role: val as "admin" | "user" })}
                >
                  <SelectTrigger>
                    <SelectValue />
                  </SelectTrigger>
                  <SelectContent>
                    <SelectItem value="user">User</SelectItem>
                    <SelectItem value="admin">Admin</SelectItem>
                  </SelectContent>
                </Select>
              </div>
            </div>

            {form.role === "user" && (
              <>
                {/* Section Access */}
                <div className="space-y-3">
                  <Label>Section Access</Label>
                  <p className="text-xs text-muted-foreground">
                    Select which sections this user can access
                  </p>
                  <div className="grid grid-cols-3 gap-2">
                    {SECTIONS.map((section) => (
                      <div
                        key={section.id}
                        className="flex items-center gap-2 p-2 rounded border"
                      >
                        <Checkbox
                          id={`section-${section.id}`}
                          checked={form.permissions.sections.includes(section.id)}
                          onCheckedChange={() => toggleSection(section.id)}
                        />
                        <Label
                          htmlFor={`section-${section.id}`}
                          className="text-sm cursor-pointer"
                        >
                          {section.label}
                        </Label>
                      </div>
                    ))}
                  </div>
                </div>

                {/* Permissions */}
                <div className="space-y-3">
                  <Label>Permissions</Label>
                  <div className="grid grid-cols-2 gap-3">
                    <div className="flex items-center gap-2 p-3 rounded border">
                      <Checkbox
                        id="perm-financial"
                        checked={form.permissions.can_view_financial}
                        onCheckedChange={() => togglePermission("can_view_financial")}
                      />
                      <div>
                        <Label htmlFor="perm-financial" className="cursor-pointer">
                          View Financial Info
                        </Label>
                        <p className="text-xs text-muted-foreground">
                          See prices, costs, and financial data
                        </p>
                      </div>
                    </div>
                    <div className="flex items-center gap-2 p-3 rounded border">
                      <Checkbox
                        id="perm-edit"
                        checked={form.permissions.can_edit}
                        onCheckedChange={() => togglePermission("can_edit")}
                      />
                      <div>
                        <Label htmlFor="perm-edit" className="cursor-pointer">
                          Edit Records
                        </Label>
                        <p className="text-xs text-muted-foreground">
                          Modify existing data
                        </p>
                      </div>
                    </div>
                    <div className="flex items-center gap-2 p-3 rounded border">
                      <Checkbox
                        id="perm-create"
                        checked={form.permissions.can_create}
                        onCheckedChange={() => togglePermission("can_create")}
                      />
                      <div>
                        <Label htmlFor="perm-create" className="cursor-pointer">
                          Create Records
                        </Label>
                        <p className="text-xs text-muted-foreground">
                          Add new components, products, etc.
                        </p>
                      </div>
                    </div>
                    <div className="flex items-center gap-2 p-3 rounded border">
                      <Checkbox
                        id="perm-delete"
                        checked={form.permissions.can_delete}
                        onCheckedChange={() => togglePermission("can_delete")}
                      />
                      <div>
                        <Label htmlFor="perm-delete" className="cursor-pointer">
                          Delete Records
                        </Label>
                        <p className="text-xs text-muted-foreground">
                          Remove data permanently
                        </p>
                      </div>
                    </div>
                    <div className="flex items-center gap-2 p-3 rounded border col-span-2">
                      <Checkbox
                        id="perm-download"
                        checked={form.permissions.can_download}
                        onCheckedChange={() => togglePermission("can_download")}
                      />
                      <div>
                        <Label htmlFor="perm-download" className="cursor-pointer">
                          Download Files
                        </Label>
                        <p className="text-xs text-muted-foreground">
                          Export CSVs and download reports (view only if disabled)
                        </p>
                      </div>
                    </div>
                  </div>
                </div>
              </>
            )}

            {form.role === "admin" && (
              <div className="rounded-lg border p-4 bg-muted/30">
                <p className="text-sm font-medium">Admin users have full access</p>
                <p className="text-xs text-muted-foreground mt-1">
                  Admins can access all sections, view financial data, and perform all actions including user management.
                </p>
              </div>
            )}
          </div>

          <DialogFooter>
            <Button variant="outline" onClick={() => setDialogOpen(false)}>
              Cancel
            </Button>
            <Button onClick={handleSave} disabled={saving}>
              {saving ? "Saving..." : editingUser ? "Update User" : "Create User"}
            </Button>
          </DialogFooter>
        </DialogContent>
      </Dialog>

      {/* Password Reset Dialog */}
      <Dialog open={passwordDialogOpen} onOpenChange={setPasswordDialogOpen}>
        <DialogContent className="sm:max-w-[400px]">
          <DialogHeader>
            <DialogTitle>Reset Password</DialogTitle>
          </DialogHeader>
          <div className="py-4">
            <Label htmlFor="new-password">New Password</Label>
            <Input
              id="new-password"
              type="password"
              value={newPassword}
              onChange={(e) => setNewPassword(e.target.value)}
              placeholder="Min 6 characters"
              className="mt-2"
            />
          </div>
          <DialogFooter>
            <Button variant="outline" onClick={() => setPasswordDialogOpen(false)}>
              Cancel
            </Button>
            <Button onClick={handleResetPassword} disabled={saving}>
              {saving ? "Saving..." : "Reset Password"}
            </Button>
          </DialogFooter>
        </DialogContent>
      </Dialog>
    </div>
  );
}