// shared-field-types.ts
import { LucideIcon } from "lucide-react";
import { UseFormReturn } from "react-hook-form";
import { FieldValues } from "react-hook-form";

export type FormFieldType =
  | "text"
  | "textarea"
  | "switch"
  | "number"
  | "checkbox"
  | "select"
  | "multiselect"
  | "password"
  | "date"
  | "datetime"
  | "dateinput"
  | "time"
  | "radio"
  | "file"
  | "color"
  | "slider"
  | "segmented"
  | "native-select"
  | "json"
  | "rating"
  | "autocomplete"
  | "richtext"
  | "habesha-date"
  | "year-picker";

export interface BaseFormField<T> {
  name: keyof T;
  label: string;
  description?: string;
  placeholder?: string;
  required?: boolean;
  disabled?: boolean;
  hidden?: boolean;
  className?: string;
  wrapperProps?: Record<string, unknown>;
  data?: any;
  clearable?: any;
  section?: string;
  icon?: React.ComponentType<{ className?: string }>;
  group?: string;
  defaultValue?: any;
  // Grid span control (1-12)
  colSpan?: 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12;
  // For responsive design
  smColSpan?: 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12;
  lgColSpan?: 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12;

  // Existing properties...
  options?: string[] | { value: string; label: string; icon?: LucideIcon }[];
  onChange?: (value: any) => void;
  onScroll?: (e: React.UIEvent<HTMLDivElement>) => void;
}

// Define specific field interfaces for better type safety
export interface TextFormField<T> extends BaseFormField<T> {
  type: "text";
  autoComplete?: string;
}

export interface TextareaFormField<T> extends BaseFormField<T> {
  type: "textarea";
  rows?: number;
}

export interface NumberFormField<T> extends BaseFormField<T> {
  type: "number";
  min?: number;
  max?: number;
  step?: number | "any";
}

export interface PasswordFormField<T> extends BaseFormField<T> {
  type: "password";
  autoComplete?: "current-password" | "new-password";
}

export interface SwitchFormField<T> extends BaseFormField<T> {
  type: "switch";
}

export interface CheckboxFormField<T> extends BaseFormField<T> {
  type: "checkbox";
}

export interface SelectFormField<T> extends BaseFormField<T> {
  type: "select";
  options: { value: string; label: string; disabled?: boolean }[];
  searchable?: boolean;
  clearable?: boolean;
  defaultValue?: string;
}

export interface MultiSelectFormField<T> extends BaseFormField<T> {
  type: "multiselect";
  options: { value: string; label: string; disabled?: boolean }[];
  searchable?: boolean;
  defaultValue?: string[];
}

export interface DateFormField<T> extends BaseFormField<T> {
  type: "date" | "datetime" | "dateinput" | "time";
  minDate?: Date;
  maxDate?: Date;
  defaultValue?: string;
}

export interface RadioFormField<T> extends BaseFormField<T> {
  type: "radio";
  options: { value: string; label: string }[];
  orientation?: "horizontal" | "vertical";
}

export interface FileFormField<T> extends BaseFormField<T> {
  type: "file";
  accept?: string;
  multiple?: boolean;
}

export interface ColorFormField<T> extends BaseFormField<T> {
  type: "color";
}

export interface SliderFormField<T> extends BaseFormField<T> {
  type: "slider";
  min?: number;
  max?: number;
  step?: number;
  marks?: { value: number; label: string }[];
}

export interface SegmentedFormField<T> extends BaseFormField<T> {
  type: "segmented";
  options: { value: string; label: string }[];
}

export interface RatingFormField<T> extends BaseFormField<T> {
  type: "rating";
  count?: number;
  size?: "sm" | "md" | "lg";
  showLabels?: boolean;
  labels?: string[];
  language?: "am" | "en";
}

export interface HabeshaDateFormField<T> extends BaseFormField<T> {
  type: "habesha-date";
  language?: "am" | "en";
}

export interface YearPickerFormField<T> extends BaseFormField<T> {
  type: "year-picker";
  calendarType?: "gregorian" | "habesha";
  language?: "am" | "en";
  minYear?: number;
  maxYear?: number;
}

export interface AutocompleteFormField<T> extends BaseFormField<T> {
  type: "autocomplete";
  options: string[] | { value: string; label: string }[];
}

export interface RichTextFormField<T> extends BaseFormField<T> {
  type: "richtext";
  minHeight?: number;
  withTypography?: boolean;
  withLinks?: boolean;
  withImages?: boolean;
  withTextAlignment?: boolean;
  withColor?: boolean;
  withHighlight?: boolean;
}

// Union type for all form fields
export type FormField<T> =
  | TextFormField<T>
  | TextareaFormField<T>
  | NumberFormField<T>
  | PasswordFormField<T>
  | SwitchFormField<T>
  | CheckboxFormField<T>
  | SelectFormField<T>
  | MultiSelectFormField<T>
  | DateFormField<T>
  | RadioFormField<T>
  | FileFormField<T>
  | ColorFormField<T>
  | SliderFormField<T>
  | SegmentedFormField<T>
  | RatingFormField<T>
  | AutocompleteFormField<T>
  | RichTextFormField<T>
  | HabeshaDateFormField<T>
  | YearPickerFormField<T>;

// Type guards for better type checking
export function isSelectField<T>(
  field: FormField<T>
): field is SelectFormField<T> {
  return field.type === "select";
}

export function isMultiSelectField<T>(
  field: FormField<T>
): field is MultiSelectFormField<T> {
  return field.type === "multiselect";
}

export function isRadioField<T>(
  field: FormField<T>
): field is RadioFormField<T> {
  return field.type === "radio";
}

export function isAutocompleteField<T>(
  field: FormField<T>
): field is AutocompleteFormField<T> {
  return field.type === "autocomplete";
}

export function hasOptions<T>(
  field: FormField<T>
): field is
  | SelectFormField<T>
  | MultiSelectFormField<T>
  | RadioFormField<T>
  | AutocompleteFormField<T> {
  return (
    field.type === "select" ||
    field.type === "multiselect" ||
    field.type === "radio" ||
    field.type === "autocomplete"
  );
}

// GenericFormProps using react-hook-form
export interface GenericFormProps<T extends FieldValues> {
  form: UseFormReturn<T>;
  fields: FormField<T>[];
  onSubmit: (values: T) => Promise<void> | void;
  onCancel?: () => void;
  isLoading?: boolean;
  isSubmitting?: boolean;
  submitButtonText?: string;
  cancelButtonText?: string;
  successMessage?: string;
  errorMessage?: string;
  customButtons?: React.ReactNode;
  resetOnSuccess?: boolean;
  defaultValue?: string;
}

export enum TimeFrame {
  MONTH = "monthly",
  WEEK = "weekly",
  DAY = "daily",
  QUARTER = "quarterly",
  YEAR = "yearly",
}
