import React from 'react';

interface MemberSettingsPageProps {
  passwordError: string;
  passwordForm: {
    current_password: string;
    new_password: string;
    confirm_password: string;
  };
  passwordSaving: boolean;
  passwordSuccess: string;
  profileError: string;
  profileFormData: {
    first_name: string;
    last_name: string;
    email: string;
    phone: string;
    address: string;
  };
  profileSaving: boolean;
  profileSuccess: string;
  setPasswordForm: React.Dispatch<React.SetStateAction<{
    current_password: string;
    new_password: string;
    confirm_password: string;
  }>>;
  setProfileFormData: React.Dispatch<React.SetStateAction<{
    first_name: string;
    last_name: string;
    email: string;
    phone: string;
    address: string;
  }>>;
  onChangePassword: () => void;
  onSaveProfile: () => void;
}

const MemberSettingsPage: React.FC<MemberSettingsPageProps> = ({
  passwordError,
  passwordForm,
  passwordSaving,
  passwordSuccess,
  profileError,
  profileFormData,
  profileSaving,
  profileSuccess,
  setPasswordForm,
  setProfileFormData,
  onChangePassword,
  onSaveProfile
}) => (
  <div className="card member-card member-settings-card">
    <div className="member-card-header">
      <div>
        <p className="member-card-kicker">Settings</p>
        <h3>Profile Settings</h3>
      </div>
    </div>

    {profileError && <div className="alert alert-error">{profileError}</div>}
    {profileSuccess && <div className="alert alert-success">{profileSuccess}</div>}

    <div className="member-settings-grid">
      <div className="form-group">
        <label htmlFor="settings-first-name">First Name</label>
        <input
          id="settings-first-name"
          type="text"
          placeholder="First Name"
          value={profileFormData.first_name}
          onChange={(e) => setProfileFormData((prev) => ({ ...prev, first_name: e.target.value }))}
        />
      </div>
      <div className="form-group">
        <label htmlFor="settings-last-name">Last Name</label>
        <input
          id="settings-last-name"
          type="text"
          placeholder="Last Name"
          value={profileFormData.last_name}
          onChange={(e) => setProfileFormData((prev) => ({ ...prev, last_name: e.target.value }))}
        />
      </div>
      <div className="form-group">
        <label htmlFor="settings-email">Email</label>
        <input
          id="settings-email"
          type="email"
          placeholder="Email"
          value={profileFormData.email}
          onChange={(e) => setProfileFormData((prev) => ({ ...prev, email: e.target.value }))}
        />
      </div>
      <div className="form-group">
        <label htmlFor="settings-phone">Phone</label>
        <input
          id="settings-phone"
          type="text"
          placeholder="Phone"
          value={profileFormData.phone}
          onChange={(e) => setProfileFormData((prev) => ({ ...prev, phone: e.target.value }))}
        />
      </div>
    </div>
    <div className="form-group">
      <label htmlFor="settings-address">Address</label>
      <textarea
        id="settings-address"
        placeholder="Address"
        value={profileFormData.address}
        onChange={(e) => setProfileFormData((prev) => ({ ...prev, address: e.target.value }))}
        rows={3}
      />
    </div>
    <div className="member-settings-actions">
      <button className="btn btn-primary" disabled={profileSaving} onClick={onSaveProfile}>
        {profileSaving ? 'Saving...' : 'Save Profile'}
      </button>
    </div>

    <div className="member-settings-divider" />
    <h4 className="member-section-heading">Change Password</h4>
    {passwordError && <div className="alert alert-error">{passwordError}</div>}
    {passwordSuccess && <div className="alert alert-success">{passwordSuccess}</div>}
    <div className="member-settings-grid">
      <div className="form-group">
        <label htmlFor="settings-current-password">Current Password</label>
        <input
          id="settings-current-password"
          type="password"
          placeholder="Current Password"
          value={passwordForm.current_password}
          onChange={(e) => setPasswordForm((prev) => ({ ...prev, current_password: e.target.value }))}
        />
      </div>
      <div className="form-group">
        <label htmlFor="settings-new-password">New Password</label>
        <input
          id="settings-new-password"
          type="password"
          placeholder="New Password"
          value={passwordForm.new_password}
          onChange={(e) => setPasswordForm((prev) => ({ ...prev, new_password: e.target.value }))}
        />
      </div>
      <div className="form-group">
        <label htmlFor="settings-confirm-password">Confirm New Password</label>
        <input
          id="settings-confirm-password"
          type="password"
          placeholder="Confirm New Password"
          value={passwordForm.confirm_password}
          onChange={(e) => setPasswordForm((prev) => ({ ...prev, confirm_password: e.target.value }))}
        />
      </div>
    </div>
    <div className="member-settings-actions">
      <button className="btn btn-secondary" disabled={passwordSaving} onClick={onChangePassword}>
        {passwordSaving ? 'Updating...' : 'Update Password'}
      </button>
    </div>
  </div>
);

export default MemberSettingsPage;