import { useState, useEffect } from 'react';

interface FormField {
  id: string;
  name: string;
  type: 'text' | 'email' | 'select' | 'textarea';
  required: boolean;
}

interface Form {
  id: number;
  name: string;
  description: string;
  fields: FormField[];
}

export default function FormBuilder() {
  const [forms, setForms] = useState<Form[]>([]);
  const [selectedForm, setSelectedForm] = useState<Form | null>(null);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    const mockForms: Form[] = [
      {
        id: 1,
        name: 'New Client Intake',
        description: 'Initial consultation form',
        fields: [
          { id: '1', name: 'Full Name', type: 'text', required: true },
          { id: '2', name: 'Email', type: 'email', required: true },
          { id: '3', name: 'Reason for Visit', type: 'textarea', required: false },
        ],
      },
    ];
    setForms(mockForms);
    setLoading(false);
  }, []);

  return (
    <div className="min-h-screen bg-gray-900 text-gray-100 p-6">
      <div className="max-w-7xl mx-auto">
        <div className="flex justify-between items-center mb-8">
          <h1 className="text-3xl font-bold text-blue-400">Form Builder</h1>
          <button className="bg-blue-600 hover:bg-blue-700 px-6 py-2 rounded-lg font-medium">
            + New Form
          </button>
        </div>

        <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
          <div className="lg:col-span-1">
            <h2 className="text-xl font-semibold mb-4">Forms</h2>
            <div className="space-y-3">
              {forms.map((form) => (
                <div
                  key={form.id}
                  onClick={() => setSelectedForm(form)}
                  className={`bg-gray-800 rounded-lg p-4 cursor-pointer hover:bg-gray-750 transition ${
                    selectedForm?.id === form.id ? 'ring-2 ring-blue-500' : ''
                  }`}
                >
                  <h3 className="font-semibold">{form.name}</h3>
                  <p className="text-sm text-gray-400">{form.fields.length} fields</p>
                </div>
              ))}
            </div>
          </div>

          <div className="lg:col-span-2">
            {selectedForm ? (
              <div className="bg-gray-800 rounded-lg p-6">
                <h2 className="text-xl font-semibold mb-4">{selectedForm.name}</h2>
                <p className="text-gray-400 mb-6">{selectedForm.description}</p>
                
                <div className="space-y-4">
                  {selectedForm.fields.map((field) => (
                    <div key={field.id} className="bg-gray-700 rounded-lg p-4">
                      <div className="flex justify-between items-start mb-2">
                        <div>
                          <h4 className="font-medium">{field.name}</h4>
                          <p className="text-sm text-gray-400">Type: {field.type}</p>
                        </div>
                        {field.required && (
                          <span className="bg-red-900 text-red-200 px-2 py-1 rounded text-xs">Required</span>
                        )}
                      </div>
                    </div>
                  ))}
                </div>

                <button className="mt-6 bg-green-600 hover:bg-green-700 px-6 py-2 rounded-lg font-medium">
                  + Add Field
                </button>
              </div>
            ) : (
              <div className="bg-gray-800 rounded-lg p-12 text-center">
                <p className="text-gray-400">Select a form to edit</p>
              </div>
            )}
          </div>
        </div>
      </div>
    </div>
  );
}
