// app/components/admin/roles/RoleForm.tsx
'use client';

import { useState, useEffect } from 'react';
import { useRouter } from 'next/navigation';
import toast from 'react-hot-toast';

// ── Shared form components ──────────────────────────────────────────────────
import FormCard         from '@/app/components/admin/CommonComponents/Formcard';
import FormSection      from '@/app/components/admin/CommonComponents/Formsection';
import FormField        from '@/app/components/admin/CommonComponents/Formfield';
import FormActions      from '@/app/components/admin/CommonComponents/Formactions';
import PermissionMatrix from '@/app/components/admin/CommonComponents/PermissionMatrix';
import type { Permission } from '@/app/components/admin/CommonComponents/PermissionMatrix';
// ───────────────────────────────────────────────────────────────────────────

// ── Types ─────────────────────────────────────────────────────────────────

interface Role {
  id:          string;
  name:        string;
  description: string;
  permissions: Permission[];
  created_at:  string;
  updated_at:  string;
}

interface RoleFormData {
  name:        string;
  description: string;
  permissions: string[];
}

interface RoleFormProps {
  roleId?:      string;
  initialData?: Role;
}

// ── Helpers ───────────────────────────────────────────────────────────────

const EMPTY_FORM: RoleFormData = {
  name:        '',
  description: '',
  permissions: [],
};

const toFormData = (role: Role): RoleFormData => ({
  name:        role.name        || '',
  description: role.description || '',
  permissions: role.permissions?.map(p => p.id) || [],
});

// ── Component ─────────────────────────────────────────────────────────────

export default function RoleForm({ roleId, initialData }: RoleFormProps) {
  const router    = useRouter();
  const isEditing = Boolean(roleId);

  const [formData,    setFormData]    = useState<RoleFormData>(
    initialData ? toFormData(initialData) : EMPTY_FORM
  );
  const [loading,     setLoading]     = useState(false);
  const [permissions, setPermissions] = useState<Permission[]>([]);

  // ── Data fetching ─────────────────────────────────────────────────────

  useEffect(() => {
    const load = async () => {
      try {
        // Always fetch the full permissions catalogue
        const permRes = await fetch('/api/backend/admin/permissions');
        if (permRes.ok) {
          const d = await permRes.json();
          setPermissions(d.permissions || []);
        }

        // Fetch role only when editing and no SSR initialData was provided
        if (roleId && !initialData) {
          const roleRes = await fetch(`/api/backend/admin/roles/${roleId}`);
          if (roleRes.ok) {
            const d = await roleRes.json();
            setFormData(toFormData(d.role));
          }
        }
      } catch {
        toast.error('Failed to load form data');
      }
    };

    load();
  }, [roleId, initialData]);

  // ── Handlers ──────────────────────────────────────────────────────────

  const handleInputChange = (
    e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>
  ) => {
    const { name, value } = e.target;
    setFormData(prev => ({ ...prev, [name]: value }));
  };

  const handleTogglePermission = (id: string) => {
    setFormData(prev => ({
      ...prev,
      permissions: prev.permissions.includes(id)
        ? prev.permissions.filter(p => p !== id)
        : [...prev.permissions, id],
    }));
  };

  const handleToggleModule = (
    _module: string,
    moduleIds: string[],
    allSelected: boolean
  ) => {
    setFormData(prev => ({
      ...prev,
      permissions: allSelected
        ? prev.permissions.filter(id => !moduleIds.includes(id))
        : [...new Set([...prev.permissions, ...moduleIds])],
    }));
  };

  const handleSelectAll = () =>
    setFormData(prev => ({ ...prev, permissions: permissions.map(p => p.id) }));

  const handleClearAll = () =>
    setFormData(prev => ({ ...prev, permissions: [] }));

  // ── Validation ────────────────────────────────────────────────────────

  const validate = (): boolean => {
    if (!formData.name.trim()) {
      toast.error('Role name is required');
      return false;
    }
    if (formData.name.trim().length < 2) {
      toast.error('Role name must be at least 2 characters long');
      return false;
    }
    if (!formData.description.trim()) {
      toast.error('Role description is required');
      return false;
    }
    return true;
  };

  // ── Submit ────────────────────────────────────────────────────────────

  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault();
    if (!validate()) return;

    setLoading(true);
    try {
      const url    = isEditing
        ? `/api/backend/admin/roles/${roleId}`
        : '/api/backend/admin/roles';
      const method = isEditing ? 'PUT' : 'POST';

      const response = await fetch(url, {
        method,
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({
          name:        formData.name.trim(),
          description: formData.description.trim(),
          permissions: formData.permissions,
        }),
      });

      const data = await response.json();

      if (response.ok) {
        toast.success(isEditing ? 'Role updated successfully' : 'Role created successfully');
        router.push('/admin/dashboard/employees/roles');
        router.refresh();
      } else {
        toast.error(data.error || `Failed to ${isEditing ? 'update' : 'create'} role`);
      }
    } catch {
      toast.error(`Failed to ${isEditing ? 'update' : 'create'} role`);
    } finally {
      setLoading(false);
    }
  };

  // ── Render ────────────────────────────────────────────────────────────

  return (
    <FormCard
      title={isEditing ? 'Edit Role' : 'Create New Role'}
      description={
        isEditing
          ? 'Update role information and permissions'
          : 'Add a new role to the system'
      }
      backHref="/admin/dashboard/employees/roles"
      backLabel="Back to Roles"
      className="max-w-7xl"
    >
      <form onSubmit={handleSubmit} className="space-y-8">

        {/* ── Basic Information ── */}
        <FormSection title="Basic Information">
          <div className="space-y-6">
            <FormField
              id="name"
              name="name"
              label="Role Name"
              value={formData.name}
              onChange={handleInputChange}
              placeholder="Enter role name (e.g., Content Manager, Moderator)"
              hint="Use a descriptive name that clearly indicates the role's purpose"
              required
            />

            <FormField
              id="description"
              name="description"
              label="Description"
              value={formData.description}
              onChange={handleInputChange}
              type="textarea"
              placeholder="Describe what this role can do and who should have it"
              hint="Provide a clear description of this role's responsibilities and access level"
              rows={3}
              required
            />
          </div>
        </FormSection>

        {/* ── Permissions ── */}
        <FormSection
          title="Permissions"
          description={`${formData.permissions.length} permission${formData.permissions.length !== 1 ? 's' : ''} selected`}
        >
          <PermissionMatrix
            permissions={permissions}
            selectedIds={formData.permissions}
            onToggle={handleTogglePermission}
            onToggleModule={handleToggleModule}
            onSelectAll={handleSelectAll}
            onClearAll={handleClearAll}
          />
        </FormSection>

        {/* ── Actions ── */}
        <FormActions
          cancelHref="/admin/dashboard/employees/roles"
          submitLabel={isEditing ? 'Update Role' : 'Create Role'}
          loadingLabel={isEditing ? 'Updating...' : 'Creating...'}
          loading={loading}
        />

      </form>
    </FormCard>
  );
}