/**
 * FormPageTemplate - Master template for settings/form pages
 * 
 * Usage:
 * <FormPageTemplate
 *   title="General Settings"
 *   subtitle="Configure your application settings"
 *   sections={formSections}
 *   onSave={handleSave}
 *   onCancel={handleCancel}
 * />
 */

import React, { ReactNode, useState } from 'react';

interface FormSection {
  title: string;
  description?: string;
  fields: ReactNode;
}

interface FormPageTemplateProps {
  title: string;
  subtitle?: string;
  sections: FormSection[];
  onSave?: (data: any) => void | Promise<void>;
  onCancel?: () => void;
  saveLabel?: string;
  cancelLabel?: string;
  loading?: boolean;
  className?: string;
}

export default function FormPageTemplate({
  title,
  subtitle,
  sections,
  onSave,
  onCancel,
  saveLabel = 'Save Changes',
  cancelLabel = 'Cancel',
  loading = false,
  className = '',
}: FormPageTemplateProps) {
  const [isDirty, setIsDirty] = useState(false);

  const handleSave = async () => {
    if (onSave) {
      await onSave({});
      setIsDirty(false);
    }
  };

  return (
    <div className={className}>
      {/* Page Header */}
      <div className="mb-6">
        <h2 className="text-xl font-semibold text-gray-800 dark:text-white/90 mb-1">{title}</h2>
        {subtitle && (
          <p className="text-sm text-gray-500 dark:text-gray-400">{subtitle}</p>
        )}
      </div>

      {/* Form Sections */}
      <div className="space-y-6">
        {sections.map((section, index) => (
          <div
            key={index}
            className="rounded-2xl border border-gray-200 bg-white dark:border-gray-800 dark:bg-white/[0.03]"
          >
            <div className="border-b border-gray-100 px-6 py-5 dark:border-gray-800">
              <h3 className="text-base font-medium text-gray-800 dark:text-white/90">
                {section.title}
              </h3>
              {section.description && (
                <p className="text-sm text-gray-500 dark:text-gray-400 mt-1">
                  {section.description}
                </p>
              )}
            </div>
            <div className="p-6">
              {section.fields}
            </div>
          </div>
        ))}
      </div>

      {/* Save Bar */}
      {(onSave || onCancel) && (
        <div className="mt-6 flex items-center justify-end gap-3 rounded-lg border border-gray-200 bg-gray-50 p-4 dark:border-gray-800 dark:bg-white/[0.03]">
          {onCancel && (
            <button
              onClick={onCancel}
              className="rounded-lg border border-gray-200 bg-white px-4 py-2.5 text-sm font-medium text-gray-700 hover:bg-gray-50 dark:border-gray-800 dark:bg-gray-900 dark:text-gray-400 dark:hover:bg-white/[0.03]"
            >
              {cancelLabel}
            </button>
          )}
          {onSave && (
            <button
              onClick={handleSave}
              disabled={loading || !isDirty}
              className="inline-flex items-center justify-center gap-2 rounded-lg bg-brand-500 px-4 py-2.5 text-sm font-medium text-white shadow-theme-xs hover:bg-brand-600 disabled:opacity-50 disabled:cursor-not-allowed"
            >
              {loading ? 'Saving...' : saveLabel}
            </button>
          )}
        </div>
      )}
    </div>
  );
}

