"use client";

import { useState } from "react";

interface FormField {
  id: string;
  type: string;
  label: string;
  placeholder?: string;
  required: boolean;
  options?: string[];
  helpText?: string;
  order: number;
}

interface Props {
  title: string;
  description?: string;
  fields: FormField[];
  disabled?: boolean;
  onSubmitDemo?: () => void;
}

/**
 * Renders the applicant-facing form exactly as it will appear when submitted.
 * Used in both the live preview modal and the standalone preview page.
 * When `disabled` is true, fields are read-only (preview mode).
 */
export function ApplicantFormRenderer({ title, description, fields, disabled, onSubmitDemo }: Props) {
  const [formData, setFormData] = useState<Record<string, any>>({});

  function updateField(id: string, value: any) {
    if (disabled) return;
    setFormData({ ...formData, [id]: value });
  }

  return (
    <div className="bg-white rounded-xl border border-gray-200 shadow-sm p-8">
      <div className="mb-8 pb-6 border-b border-gray-200">
        <h1 className="text-2xl font-bold text-gray-900">{title || "Untitled Form"}</h1>
        {description && <p className="text-gray-600 mt-2">{description}</p>}
      </div>

      <div className="space-y-6">
        {fields.length === 0 && (
          <p className="text-sm text-gray-400 text-center py-8">No fields yet — add some in the builder</p>
        )}
        {fields.map((field) => (
          <div key={field.id}>
            <label className="block text-sm font-medium text-gray-700 mb-1">
              {field.label}
              {field.required && <span className="text-red-500 ml-1">*</span>}
            </label>

            {field.type === "long_text" ? (
              <textarea
                value={formData[field.id] || ""}
                onChange={(e) => updateField(field.id, e.target.value)}
                placeholder={field.placeholder}
                required={field.required}
                disabled={disabled}
                className="w-full px-3 py-2.5 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 text-sm h-24 resize-none disabled:bg-gray-50"
              />
            ) : field.type === "dropdown" ? (
              <select
                value={formData[field.id] || ""}
                onChange={(e) => updateField(field.id, e.target.value)}
                required={field.required}
                disabled={disabled}
                className="w-full px-3 py-2.5 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 text-sm disabled:bg-gray-50"
              >
                <option value="">Select an option</option>
                {(field.options || []).map((opt, i) => (
                  <option key={`${opt}-${i}`} value={opt}>{opt}</option>
                ))}
              </select>
            ) : field.type === "radio" ? (
              <div className="space-y-2">
                {(field.options || []).map((opt, i) => (
                  <label key={`${opt}-${i}`} className="flex items-center gap-2 cursor-pointer">
                    <input
                      type="radio"
                      name={field.id}
                      value={opt}
                      checked={formData[field.id] === opt}
                      onChange={(e) => updateField(field.id, e.target.value)}
                      required={field.required}
                      disabled={disabled}
                      className="w-4 h-4 text-blue-600 border-gray-300 focus:ring-blue-500"
                    />
                    <span className="text-sm text-gray-700">{opt}</span>
                  </label>
                ))}
              </div>
            ) : field.type === "checkbox" ? (
              <label className="flex items-center gap-2 cursor-pointer">
                <input
                  type="checkbox"
                  checked={formData[field.id] || false}
                  onChange={(e) => updateField(field.id, e.target.checked)}
                  disabled={disabled}
                  className="w-4 h-4 text-blue-600 border-gray-300 rounded focus:ring-blue-500"
                />
                <span className="text-sm text-gray-700">{field.placeholder || field.label}</span>
              </label>
            ) : field.type === "file" ? (
              <input
                type="file"
                onChange={(e) => updateField(field.id, e.target.files?.[0]?.name || "")}
                required={field.required}
                disabled={disabled}
                className="text-sm text-gray-500 file:mr-4 file:py-2 file:px-4 file:rounded-lg file:border-0 file:text-sm file:font-medium file:bg-blue-50 file:text-blue-700 hover:file:bg-blue-100 disabled:opacity-60"
              />
            ) : field.type === "date" ? (
              <input
                type="date"
                value={formData[field.id] || ""}
                onChange={(e) => updateField(field.id, e.target.value)}
                required={field.required}
                disabled={disabled}
                className="w-full px-3 py-2.5 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 text-sm disabled:bg-gray-50"
              />
            ) : field.type === "email" ? (
              <input
                type="email"
                value={formData[field.id] || ""}
                onChange={(e) => updateField(field.id, e.target.value)}
                placeholder={field.placeholder}
                required={field.required}
                disabled={disabled}
                className="w-full px-3 py-2.5 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 text-sm disabled:bg-gray-50"
              />
            ) : field.type === "phone" ? (
              <input
                type="tel"
                value={formData[field.id] || ""}
                onChange={(e) => updateField(field.id, e.target.value)}
                placeholder={field.placeholder}
                required={field.required}
                disabled={disabled}
                className="w-full px-3 py-2.5 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 text-sm disabled:bg-gray-50"
              />
            ) : field.type === "number" ? (
              <input
                type="number"
                value={formData[field.id] || ""}
                onChange={(e) => updateField(field.id, e.target.value)}
                placeholder={field.placeholder}
                required={field.required}
                disabled={disabled}
                className="w-full px-3 py-2.5 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 text-sm disabled:bg-gray-50"
              />
            ) : (
              <input
                type="text"
                value={formData[field.id] || ""}
                onChange={(e) => updateField(field.id, e.target.value)}
                placeholder={field.placeholder}
                required={field.required}
                disabled={disabled}
                className="w-full px-3 py-2.5 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 text-sm disabled:bg-gray-50"
              />
            )}

            {field.helpText && <p className="text-xs text-gray-500 mt-1">{field.helpText}</p>}
          </div>
        ))}

        {fields.length > 0 && (
          <button
            type="button"
            onClick={onSubmitDemo}
            disabled={disabled}
            className="w-full py-3 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors font-medium disabled:opacity-60 disabled:cursor-not-allowed"
          >
            Submit Application
          </button>
        )}
      </div>
    </div>
  );
}