import React, { useState, useEffect } from 'react';
import './styles.css';

interface FormResponse { id: number; appointmentId: number; client: string; submittedDate: string; fields: Array<{ name: string; value: string }>; }

export default function FormResponses() {
  const [responses, setResponses] = useState<FormResponse[]>([]);
  const [selectedResponse, setSelectedResponse] = useState<FormResponse | null>(null);

  useEffect(() => {
    setResponses([
      { id: 1, appointmentId: 101, client: 'John Doe', submittedDate: '2024-02-10T09:30:00', fields: [
        { name: 'How did you hear about us?', value: 'Google search' },
        { name: 'Reason for visit', value: 'Initial consultation' },
        { name: 'Any allergies?', value: 'None' }
      ]},
      { id: 2, appointmentId: 102, client: 'Jane Smith', submittedDate: '2024-02-11T14:00:00', fields: [
        { name: 'How did you hear about us?', value: 'Referral from friend' },
        { name: 'Reason for visit', value: 'Follow-up' },
        { name: 'Any allergies?', value: 'Penicillin' }
      ]}
    ]);
  }, []);

  return (
    <div className="form-responses">
      <header>
        <h1>📋 Form Responses</h1>
      </header>
      <div className="responses-layout">
        <div className="responses-list">
          {responses.map(response => (
            <div key={response.id} className="response-item" onClick={() => setSelectedResponse(response)}>
              <h3>{response.client}</h3>
              <p>Appointment #{response.appointmentId}</p>
              <span className="date">{new Date(response.submittedDate).toLocaleDateString()}</span>
            </div>
          ))}
        </div>
        <div className="response-detail">
          {selectedResponse ? (
            <>
              <h2>{selectedResponse.client}</h2>
              <p className="meta">Submitted: {new Date(selectedResponse.submittedDate).toLocaleString()}</p>
              <div className="fields-list">
                {selectedResponse.fields.map((field, i) => (
                  <div key={i} className="field-item">
                    <strong>{field.name}</strong>
                    <p>{field.value}</p>
                  </div>
                ))}
              </div>
            </>
          ) : (
            <div className="empty-state">Select a response to view details</div>
          )}
        </div>
      </div>
    </div>
  );
}
