// app/components/admin/permissions/PermissionForm.tsx
'use client';

import { useState, useEffect } from 'react';
import { useRouter } from 'next/navigation';
import toast from 'react-hot-toast';
import { MODULES, ACTIONS } from '@/lib/permissions';

// ── 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 FormSelect        from '@/app/components/admin/CommonComponents/Formselect';
import type { SelectOption } from '@/app/components/admin/CommonComponents/Formselect';
import FormActions       from '@/app/components/admin/CommonComponents/Formactions';
// ───────────────────────────────────────────────────────────────────────────

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

interface PermissionData {
  id:          string;
  name:        string;
  description: string;
  module:      string;
  action:      string;
  created_at:  string;
  updated_at:  string;
}

interface PermissionFormData {
  name:        string;
  description: string;
  module:      string;
  action:      string;
}

interface PermissionFormProps {
  permissionId?: string;
  initialData?:  PermissionData;
}

// ── Constants ─────────────────────────────────────────────────────────────

const EMPTY_FORM: PermissionFormData = {
  name:        '',
  description: '',
  module:      '',
  action:      '',
};

const toFormData = (p: PermissionData): PermissionFormData => ({
  name:        p.name        || '',
  description: p.description || '',
  module:      p.module      || '',
  action:      p.action      || '',
});

const toOptions = (items: string[]): SelectOption[] =>
  items.map(item => ({
    value: item,
    label: item.charAt(0).toUpperCase() + item.slice(1),
  }));

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

export default function PermissionForm({ permissionId, initialData }: PermissionFormProps) {
  const router    = useRouter();
  const isEditing = Boolean(permissionId);

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

  useEffect(() => {
    if (!permissionId || initialData) return;

    const load = async () => {
      try {
        const res = await fetch(`/api/backend/admin/newpermissions/${permissionId}`);
        if (res.ok) {
          const d = await res.json();
          setFormData(toFormData(d.permission));
        }
      } catch {
        toast.error('Failed to load permission data');
      }
    };

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

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

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

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

    setLoading(true);
    try {
      const url    = isEditing
        ? `/api/backend/admin/newpermissions/${permissionId}`
        : '/api/backend/admin/newpermissions';
      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(),
          module:      formData.module,
          action:      formData.action,
        }),
      });

      const data = await response.json();

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

  return (
    <FormCard
      title={isEditing ? 'Edit Permission' : 'Create New Permission'}
      description={
        isEditing
          ? 'Update permission information'
          : 'Add a new permission to the system'
      }
      backHref="/admin/dashboard/employees/permissions"
      backLabel="Back to Permissions"
    >
      <form onSubmit={handleSubmit} className="space-y-6">

        <FormSection title="Permission Details">
          <div className="space-y-6">
            <FormField
              id="name"
              name="name"
              label="Permission Name"
              value={formData.name}
              onChange={handleInputChange}
              placeholder="Enter permission name (e.g., users:read, content:create)"
              hint="Use format: module:action (e.g., users:read, content:create)"
              required
            />

            <FormField
              id="description"
              name="description"
              label="Description"
              value={formData.description}
              onChange={handleInputChange}
              type="textarea"
              rows={3}
              placeholder="Describe what this permission allows the user to do"
              hint="Clear description helps users understand the permission's purpose"
              required
            />

            <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
              <FormSelect
                id="module"
                name="module"
                label="Module"
                value={formData.module}
                onChange={handleInputChange}
                options={toOptions(MODULES)}
                placeholder="Select a module"
                hint="The module this permission belongs to"
                required
              />

              <FormSelect
                id="action"
                name="action"
                label="Action"
                value={formData.action}
                onChange={handleInputChange}
                options={toOptions(ACTIONS)}
                placeholder="Select an action"
                hint="The action this permission allows"
                required
              />
            </div>
          </div>
        </FormSection>

        {/* Preview */}
        <div className="bg-var-info-bg border border-var-info-border rounded-xl p-4">
          <h4 className="text-sm font-medium text-var-info-text mb-2">Permission Preview</h4>
          <div className="flex items-center space-x-3 flex-wrap gap-2">
            <div className="flex items-center space-x-2">
              <span className="px-3 py-1 bg-var-success-bg text-var-success-text text-xs font-medium rounded-full capitalize">
                {formData.module || 'module'}
              </span>
              <span className="text-var-text-muted">:</span>
              <span className="px-3 py-1 bg-var-primary-muted text-var-primary-text text-xs font-medium rounded-full capitalize">
                {formData.action || 'action'}
              </span>
            </div>
            <div className="text-sm text-var-text">
              Result: <span className="font-mono font-medium text-var-text">{formData.name || 'module:action'}</span>
            </div>
          </div>
        </div>

        <FormActions
          cancelHref="/admin/dashboard/employees/permissions"
          submitLabel={isEditing ? 'Update Permission' : 'Create Permission'}
          loadingLabel={isEditing ? 'Updating...' : 'Creating...'}
          loading={loading}
        />

      </form>
    </FormCard>
  );
}